如何在 Web 组件中制作可访问列表？

Question

我构建了一个 select 网络组件（一个按钮，用于切换下拉列表中的选项列表）。它实际上是 2 个组件：x-select 和 x-option。我在 x-select 中有一个 div role="list"（在它的影子 DOM 内，包裹着 <slot />）并且每个 x-option 都有一个 role="listitem"。为两个组件启用 Shadow DOM 后，NVDA（Chrome）不会获取选项的文本内容；它宣布类似“列表项（第 6 个，共 12 个）”的内容。

<!-- x-select -->
<button aria-controls="listbox-id">Select an option</button>
<div role="listbox" id="listbox-id">
    <slot />
</div>


<!-- x-option -->
<Host role="option">
  <slot />
</Host>


<!-- usage -->
<x-select>
  <x-option>Red</x-option>
  <x-option>Blue</x-option>
  <x-option>Green</x-option>
</x-select>

这似乎是因为 list 在 my-select 的阴影 DOM 内，而 listitem 在 [=44] 的阴影中=]（开槽）。

当为选项组件禁用阴影 DOM 时，NVDA 会读取选项文本，但这对我来说不是一个令人满意的解决方案。

这是 NVDA 中的错误吗？是否有解决方法，或者是否有更好的方法来构建此组件？

更新
进一步测试后，我注意到我的代码在 VoiceOver/Safari、NVDA/Firefox 和 NVDA/JAWS 中有效，但在 NVDA/Chrome、JAWS/Chrome、NVDA/Edge 和 JAWS/Edge。似乎是 Chromium 中的一个错误（支持 Chrome 和 Edge）。我提交了一个错误 here

Answer 1

该问题实际上是由于 Chrome 中的错误引起的，该错误已得到修复。参见 https://bugs.chromium.org/p/chromium/issues/detail?id=1214277

如何在 Web 组件中制作可访问列表？

How to make an accessible list in a web component?

javascript

accessibility

web-component

wai-aria

nvda