請參閱此示例
現在再次按 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" 以使其符合可訪問性。有趣的是，如果這些選項卡不在模式中，則不會發生此錯誤。
- 當您添加時
tabindex="0"，它與最后一點中指定的選擇器匹配，因此它可以作業。 - 如果選項卡不在模式中，則
FocusTrap沒有問題，因此沒有問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407512.html
標籤：
上一篇：導航欄中右側的文本不顯示