Javascript 确保下拉选择框可以通过键盘访问fix axe violation（WCAG）-js

因此，在我的网页上运行（Web可访问性工具）会产生冲突：

具有可滚动内容的元素应可通过键盘访问

链接声明为了修复它，元素应该有可聚焦的内容或者应该是可聚焦的。我可以通过选项卡导航到它，但是我无法按enter键展开下拉列表。（按向上键展开）

如何解决此问题，以便通过按enter键扩展/触发下拉列表（假设这是解决此错误的方法？）

我的js代码：

self.filterFields.forEach(x => {
                var titleDep = $('th[data-field="' + x + '"]');
                if (titleDep.find('select').length === 0 && self.foreignKeyData[x]) {
                    titleDep.append('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');
                }
            });

            self.stringFilters.forEach(x => {
                var titleDep = $('th[data-field="' + x + '"]');
                if (titleDep.find('select').length === 0 && self.stringFilterValues[x]) {
                    titleDep.append('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');     
                }
            });

以及append语句中的

focusable=“true”

和

autofocus

，但这也不起作用

然而，这似乎并没有让我更接近解决方案。任何帮助都将不胜感激

---

干杯

aXe给您的错误是因为select元素上的tabindex为-92。所以你想知道这是从哪里来的<代码>元素在默认情况下应该是可选项卡的，无需添加显式的tabindex。根据定义，任何带有负tabindex的内容都无法通过键盘访问。有关tabindex如何工作的详细讨论，请参阅。从您提供的内容中，我无法判断还有哪些其他代码可能正在修改tabindex。

它只是一个常规的

元素，还是有某种插件可以更改它（例如，流行的Select2插件）？可能有一个事件侦听器正在修改默认行为。

                titleDep.find('input').attr({ "tabindex": "0" });
                titleDep.find('input').attr({ "tabindex": 0 });