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

【问题标题】：Roles for custom drop down select component自定义下拉选择组件的角色
【发布时间】：2019-04-12 16:34:35
【问题描述】：

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

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

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

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

【问题讨论】：

它能否与 Windows 的本机屏幕阅读器一起正常工作？因为在 MacOS 上它运行良好。
Windows 讲述人确实允许在激活“选择等位基因”div 时移动焦点，但讲述人由于某种原因没有宣布任何文本。这是它自己的一系列问题......总的来说，与同样免费的 NVDA 相比，我认为 Narrator 是一个相当糟糕的屏幕阅读器。所以我不一定要以此为目标。很高兴知道 VoiceOver 效果很好！
是的，它对我来说唯一的问题是“Aqua Black square, clickable, Azure black square, clickable”。所以我会尝试将方形样式添加到禁用屏幕阅读器的伪选择器中。
是的，我在测试时也注意到了这一点。这很容易解决。谢谢！

标签： javascript reactjs accessibility screen-readers nvda

【解决方案1】：

我做了一些研究和测试，这就是问题所在： Space/Enterkeydown 代码在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 角色：

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

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

【讨论】：

完美！非常感谢您的帮助并澄清了这个问题。在 Chrome 和 NVDA 中验证。