自定义下拉 select 组件的角色

Question

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

但是，当我打开 NVDA 或 JAWS 时，激活 "Select an Allele" 后焦点不再移动到选项列表中的第一个元素。

我猜这与角色有关。目前我有 "Select an Allele" div 和 select 角色，以及 aria-expanded 和 aria-toggled 来描述它是否打开。 options的作用是option.

我需要应用什么角色或咏叹调来确保在使用屏幕 reader 时正确移动焦点？

Answer 1

我做了一些研究和测试，这是问题所在： Space/Enter keydown代码在Browse模式下被屏幕-reader替换为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();
            }
        );
    };

所以这将在 with/without 屏幕 reader 上工作。

另一种选择是强制您的页面使用 application 角色：

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.

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

自定义下拉 select 组件的角色

Roles for custom drop down select component

javascript

accessibility

screen-readers

nvda

reactjs