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

Question

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

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

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

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

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”强制禁用浏览模式，但这意味着用户将无法使用浏览模式。

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