angular js, специальные возможности, таблицы, навигация по клавишам со стрелками - PullRequest
0 голосов
/ 26 мая 2020

У меня старое приложение angular js, и моя миссия - исправить проблемы с доступом. У меня есть таблица с переключателями внутри ячеек, и мне нужно перемещаться между ними с помощью клавиш со стрелками вверх и вниз.

У меня уже есть метод, который решает эту проблему, и он отлично работает, пока я не протестирую его с помощью программы чтения с экрана (NVDA)

По какой-то причине SR заставляет метод игнорироваться и приводит к тому, что таблица теряет фокус.

единственный способ, которым мне удалось заставить его работать, - это установить в таблице role="application". но из того, что я читал до сих пор, неправильно использовать его в этом случае

Это образец одной из ячеек:

    <td class="scheduleLineCell" style="text-align: center;">
         <input type="radio" 
                class="btnRadio ng-valid ng-not-empty ng-touched ng-dirty" 
                aria-describedby="" 
                value="126" data-ng-model="selectedIdList[childSchedule.gridIndex]" 
                data-ng-key-press="scheduleKeyPress" 
                data-ng-grid-index="0" 
                xng-focus="isFocusOnStationButton == false &amp;&amp; 
                isFocusOnMapButton == false &amp;&amp; ScheduleLine.Id == 
                selectedIdList[search.currentScheduleGridIndex]" name="2096">
    </td>

1 Ответ

0 голосов
/ 27 мая 2020

Можете ли вы сделать рабочий пример здесь или на JSfiddler?

Неожиданно могу сказать следующее.

  1. Вы не должны помещать элементы управления в таблицы или использовать таблицы в целях проектирования.
    а. Если у вас есть строка вводимых данных, сделайте ее из "div" s
    b. Помните, программы чтения с экрана часто повторяют заголовки таблиц!

  2. J AWS, а NVDA бесполезно обращается с экранами JSEvents и дает нам пример страницы, чтобы помочь

  3. (AngularJS) Выполните рефакторинг элемента управления обратно в компонент или директиву и посмотрите, поможет ли это.
    аег <custom-radio-button ng-value="val" aria-checked="true"></custom-radio-button>
...