概念

透過使用者的互動，某些特定的元素即帶有 focus 狀態，例如：<a>、<button>、<input>、 <select>，表單相關元素幾乎都可以利用 tab 鍵或是 shift+ tab 鍵來控制 focus。

還有一個 HTML 屬性 tabindex，用來控制 tabbing 的 index 值：

• tabindex = 0：代表這個元素可以透過 tab 鍵取得 focus
• tabindex= -1：代表這個元素僅能透過 script 來控制
• tabindex > 0：代表 tab order 會照著 tabindex 的順序，而不是 DOM 的順序

:focus-visible 的出現

起初瀏覽器只針對 :focus 設定樣式，會將 focus 元素都套用 focus ring，大部分的開發者都會移除瀏覽器這個 focus outline 樣式，但移除樣式的同時也讓使用 tab 鍵切換 focus 的用戶看不出 focus 樣式。

後來，瀏覽器不再對每一個 focus 元素增加突兀的 focus ring，只在它認為需要的時候顯示 focus indicator。例如：當按鈕在觸控裝置被點擊時，不會出現 focus；但如果是 text input 區塊就會需要 focus 做提醒。
當用戶很明確的知道 focus 在哪時，不需要 focus 樣式，例如：使用滑鼠或是觸控操作時；反之，如果是使用鍵盤或是 script 做 focus 時，就會需要加上 focus 樣式在元素上。

:focus 會匹配到目前 focus 的元素
:focus-visible 也是匹配到 focus 元素，但只在必須讓用戶知道的情況下才會顯示 (瀏覽器決定)

注意事項

• 如果元素需要透過鍵盤取得 focus，避免使用 outline: none
• 只在必要時刻在元素上使用 tabindex > 0
• focus 樣式和預設樣式必須有差異，以顯示出不同狀態

參考資源

MDN Web Docs - :focus-visible
CSS TRICKS - :focus-visible