Question

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

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

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

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

Answer 1

我做了一些研究和测试，这是问题所在： Space / Enter keydown代码在click模式下被屏幕阅读器替换为Browse事件。 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角色：

您可以使用role =“ application”来强制禁用浏览模式的使用，但这将意味着用户将无法使用浏览模式。

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

自定义下拉选择组件的角色

1 个答案: