Роли для настраиваемого компонента выбора в раскрывающемся списке

У меня есть настраиваемый раскрывающийся компонент, доступный с клавиатуры: https://codesandbox.io/s/31440w1vo6

Однако, когда я включаю NVDA или JAWS, перемещение фокуса на первый элемент в списке опций после активации «Выбрать аллель» больше не происходит.

Полагаю, это связано с ролями. В настоящее время у меня есть div «Select an Allele» с ролью select, а также aria-expand и aria-toggled, чтобы описать, открыт ли он. У опций есть роль опции.

Какие роли или арию мне нужно применить, чтобы обеспечить правильное перемещение фокуса при использовании программы чтения с экрана?


reactjs javascript accessibility screen-readers nvda
person Taylor N    schedule 12.04.2019    source источник
comment
Правильно ли работает с родным средством чтения с экрана Windows? Потому что с MacOS это работает хорошо.   -  person extempl    schedule 15.04.2019
comment
Экранный диктор Windows позволяет перемещать фокус, когда активирован div Select an Allele, но Экранный диктор по какой-то причине не объявляет какой-либо текст. Это его собственный набор проблем ... В целом, я считаю, что экранный диктор - довольно плохая программа для чтения с экрана по сравнению с NVDA, которая также бесплатна. Так что я не обязательно пытаюсь это сделать. Приятно знать, что VoiceOver работает хорошо!   -  person Taylor N    schedule 15.04.2019
comment
Да, единственная проблема, которая есть у меня, так это то, что он читает «Черный квадрат цвета морской волны», «кликабельно», «Черный квадрат лазурного цвета», «кликабельно». Поэтому я бы попытался применить этот квадратный стиль к псевдо-селектору с отключенным средством чтения с экрана.   -  person extempl    schedule 15.04.2019
comment
Да, я заметил это и во время тестирования. Это простое решение. Спасибо!   -  person Taylor N    schedule 17.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я провел небольшое исследование и тестирование, и вот в чем проблема: коды _1 _ / _ 2_ keydown заменяются на событие click программой чтения с экрана в режиме Browse. У NVDA такая же проблема обнаружена здесь.

Для вашего случая я бы сказал, что это можно легко обойти, выбрав первый вариант для всех применимых событий, таких как:

    handleOpenOptions = event => {
        switch (event.type) {
            case "click":
                this._handleOpenOptions(event);
                break;
            case "keydown":
                if (event.key === "Enter" || event.key === " ") {
                    this._handleOpenOptions(event);
                }
                break;
            default:
        }
    };

    _handleOpenOptions = event => {
        this.setState(
            () => {
                return {
                    openOptions: !this.state.openOptions,
                    focusedOption: document.activeElement.id
                };
            },
            () => {
                this.arrayOfOptionsRefs[0].focus();
            }
        );
    };

Таким образом, это будет работать как с программой чтения с экрана, так и без нее.

Другой вариант - заставить вашу страницу использовать роль application:

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

в этом случае события должны обрабатываться по мере их запуска.

person extempl    schedule 15.04.2019
comment
Идеально! Большое спасибо за вашу помощь и внесение ясности в проблему. Проверено в Chrome и NVDA. - person Taylor N; 17.04.2019