2021年1月〜3月に各ブラウザでfocus-visible周りの動きがあったのでまとめた

1末から2月にかけて、:focus-visible周りのブラウザ実装が進んだのでまとめました。

:focus-visibleのおさらい

:focus-visibleは、タブ移動時のみ要素のoutlineを表示させることができる疑似クラスです。
:focusだと要素にタブ移動時にフォーカスした際だけではなく、クリック時などにもoutlineが表示されるので、outlineを消しがちだったがそれを避けることができます。

outlineを消しちゃうとアクセシビリティ上よくないので、:focus-visibleを使用します。

Chrome

Chromeで:focus-visibleがUA style sheetのデフォルトになります。
この変更はChrome 90から入るようです。

Chrome 86から:focus-visibleは使用できていたが、UA style sheetは:forcusだったので、下記のような記述が必要でした。

:focus:not(:focus-visible) {
outline: 0;
}

今回の変更で:focus-visibleがUA style sheetのデフォルトになったので上記の記述は不要になります。

Firefox

Firefox 85で:focus-visibleが有効にになりました。

いままで:-moz-focusringの疑似クラスを使用していたが、Firefox 85で:focus-visibleが実装されました。
FirefoxDevToolsでスタイルの切り替えもできるようになっています。

Safari

IgaliaがOpen Prioritizationを通して、WebKitに:focus-visibleを実装協力

IgaliaがOpen Prioritizationというクラウドファンディングを通して、WebKitに:focus-visibleを実装することになり、実装するためにWPTのテストを実装したり、実装するにあたった課題を報告している記事です。

今回の記事の冒頭で紹介しているChromeで:focus-visibleがUA style sheetのデフォルトになっていないIssueを報告をしているのもIgaliaの人なのですが、このPJを通して発見されたものになります。

Safariはinput系のDOMはShadow DOMで構成されています。　　
これがあるので:focus-visible実装の壁になってるようです。

Igaliaは今後もWebKitに:focus-visibleを実装するレポート記事を出してくれるようです。

2020/3/12追記

Release Notes for Safari Technology Preview 122で記載されていますが、STPで:focus-visibleが実装されたようです！
Safariで使えるようになるのも目前ですね！

さいごに

早く全ブラウザで:focus-visibleが使えるようになってほしいですね。

#サイボウズフロントエンドマンスリーで同様のことを喋ってるのでよければご覧ください。