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

我在这里有一个可通过键盘访问的自定义下拉组件：

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

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

---

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

我做了一些研究和测试，问题如下：

空格

/

回车

按键

屏幕读取器在

浏览

模式下将代码替换为

单击

事件。 NVDA也有同样的问题

对于您的情况，我想说，为所有适用的事件选择第一个选项是很容易解决的，例如：

    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();
            }
        );
    };

因此，这将在有/没有屏幕阅读器的情况下工作

另一个选项是强制页面使用

应用程序

角色：

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

---

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

它与windows的本机屏幕阅读器一起正常工作吗？因为在MacOS上，它工作得很好。Windows“讲述人”确实允许焦点在“选择等位基因”div被激活时移动，但由于某种原因，“讲述人”没有公布任何文本。这是它自己的一系列问题。。。总的来说，我认为与同样免费的NVDA相比，叙述者是一个相当差劲的屏幕阅读器。所以我不一定要针对这一点。很高兴知道画外音效果很好！是的，它唯一的问题是关于我的，因为它写着“水黑色方块，可点击，天蓝色黑色方块，可点击”。所以我试着用禁用的屏幕阅读器将正方形样式放到伪选择器中。是的，我在测试时也注意到了这一点。这很容易解决。谢谢完美的非常感谢您的帮助，并在这个问题上提供了清晰的信息。在Chrome和NVDA中验证。