Modal 中的选项卡不可 Tabbable - 辅助功能

Question

请看这个例子 https://stackblitz.com/edit/primeng-dynamicdialog-demo-quno4x?file=src/app/tabs.component.html

单击显示按钮。然后按 Tab。

x 被勾勒出来，这是正确的行为。

现在再次按 Tab 键。注意 x 是如何保持聚焦的。

预期的行为是第一个选项卡应该获得焦点。

无论按多少次tab键，都无法聚焦到标签一、二、三

如果您查看源代码，找到标签的锚点 href 标签，将 tabindex="0" 添加到它们，然后按几次标签，您就可以关注它们，如您在此处看到的.

<a tabindex="0" _ngcontent-lsq-c155="" href="" ngbnavlink="" id="ngb-nav-9" role="tab" aria-controls="ngb-nav-9-panel" aria-selected="true" aria-disabled="false" class="nav-link active">One</a>

我不明白为什么我需要添加 tabindex="0" 才能使其符合可访问性。有趣的是，如果这些选项卡不在模式中，则不会发生此错误。

Answer 1

对我来说，这似乎是 PrimeNG FocusTrap 实现中的一个错误。

虽然我从未在 PrimeNG 上工作过，但我想挖掘一下，这就是我发现的：

PrimeNG 与任何其他库一样具有 FocusTrap 模态（对话框、DynamicDialog 等）的实现
他们不认为锚 <a> 元素是可聚焦的，这看起来很奇怪。无法聚焦模态中的锚元素。用于 element.querySelectorAll(selector) 的 selector 如下：

    `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
    [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
    input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
    textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
    [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]):not(.p-disabled)`

上面 href 有一个 CSS 选择器，但它不匹配锚标记：

    [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])

还有另一个选择器检查是否存在 tabindex 属性：

    [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])

I don't understand why I need to add tabindex="0" in order for this to be accessibility compliant. The interesting thing is that if these tabs aren't in a modal, this bug doesn't happen.

当您添加 tabindex="0" 时，它与上一点指定的选择器匹配，因此有效。
如果选项卡不在模式中，则没有 FocusTrap，因此没有问题。

Modal 中的选项卡不可 Tabbable - 辅助功能

Tabs in Modal Aren't Tabbable - Accessibility

html

angular

twitter-bootstrap

accessibility

primeng