请参阅此示例

现在再次按 Tab。请注意 x 如何仍然聚焦。

预期的行为是选项卡 One 应该被聚焦。

无论按多少次Tab，都无法将注意力集中在选项卡一、二、三上

如果您查看源代码，找到选项卡的锚点 href 标签，将 tabindex="0" 添加到它们，然后按几次 tab，您可以专注于它们，如您在此处看到的那样。

<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" 以使其符合可访问性。有趣的是，如果这些选项卡不在模式中，则不会发生此错误。

uj5u.com热心网友回复：

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

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

• PrimeNG 与任何其他库一样具有模FocusTrap态（对话框、动态对话框等）的实作
• 他们不认为锚<a>元素是可聚焦的，这看起来很奇怪。模态中的锚元素无法聚焦。用于的选择器element.querySelectorAll(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)`

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

    [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])

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