javascript - 自定义下拉选择组件的 Angular 色

Question

我在这里有一个键盘可访问的自定义下拉组件:https://codesandbox.io/s/31440w1vo6

但是，当我打开 NVDA 或 JAWS 时，激活“选择等位基因”后焦点不会再移动到选项列表中的第一个元素。

我猜这与 Angular 色有关。目前，我有一个具有选择 Angular 色的“选择等位基因”div，以及一个 aria-expanded 和 aria-toggled 来描述它是否打开。选项具有选项的作用。

我需要应用哪些 Angular 色或咏叹调才能确保使用屏幕阅读器时正确移动焦点？

Answer 1

我做了一些研究和测试，问题是:Space/Enter keydown 代码由 Browse< 中的屏幕阅读器替换为 click 事件 模式。NVDA 也提出了同样的问题 here .

对于您的情况，我想说，通过为所有适用事件选择第一个选项，可以轻松解决此问题，如下所示:

    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 Angular 色:

You could use role="application" to forceably disable use of browse mode, but that would mean the user wouldn't be able to use browse mode.

在这种情况下，事件应该在触发时进行处理。