ExtJS & FontAwesome: совместимость с программами чтения с экрана - PullRequest
Новая
       5

ExtJS & FontAwesome: совместимость с программами чтения с экрана

0 голосов
/ 23 ноября 2018

У меня есть приложение, которое должно быть читаемым на экране (для слепых), и я пытаюсь прочитать FontAwesome Icon.Прямо сейчас у меня есть это например: 

{
    xtype: 'actioncolumn',
    items: [
    {
        iconCls: 'x-fa fa-envelope',
    }],
    dataIndex: 'edit',
    text: 'Send E-Mail'
}

И я использую программу чтения с экрана NVDA -> https://www.nvaccess.org/download/

Однако он не может прочитать этот текст («Отправить E-Mail») на мышкепарения.Я знаю, что у font-awesome есть возможность включить aria-label="Send E-Mail", но как мне применить его к элементу ExtJS?

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Мне не удалось найти способ сделать "actioncolumn" совместимым, поэтому я преобразовал их в "widgetcolumn", и это работает лучше.Недостатком этого является то, что вы не можете иметь несколько «виджетов» в одном столбце, поэтому каждое из действий получит свой собственный столбец, и у вас будут кнопки в столбцах вместо более элегантных значков.Но что вы можете сделать, Ext .... 

{
    xtype: 'widgetcolumn',
    text: 'Edit', //column header
    align: 'center',
    width: 60,
    widget: {
        xtype: 'button',
        width: 40,
        iconCls: 'x-fa fa-pencil',
        ariaLabel: 'click to edit',
        handler: 'edit'
    }
}

Для обработчика аргументы немного отличаются, так как теперь это кнопка (это характерно для моего случая, используя идентификатор записи):

edit: function(button) {
    var grid = button.up('grid'),
        store = grid.getStore(),
        recordId = button.getWidgetRecord().getId(),
        record = store.findRecord('id', recordId);
    //and so on....
}
0 голосов
/ 26 ноября 2018

Вы пробовали это: 

{
    iconCls: 'x-fa fa-envelope',
    tooltip: 'Send E-Mail',
}
...