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

Question

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

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

Полагаю, это связано с ролями. В настоящее время у меня есть div "Select a Allele" с выбранной ролью, а также с расширением aria и переключателем aria, чтобы описать, открыт ли он. Опции имеют роль опции.

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

Answer 1

Я провел некоторые исследования и тестирование, и вот проблема: Коды Space / Enter 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", чтобы принудительно отключить использование режима просмотра, но это будет означать, что пользователь не сможет использовать режим просмотра.

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