はじめに
偶然フォーカスできないリンクを見つけて原因を調べたところ、aタグにdisplay: contentsが指定されていたのが原因だったのでその備忘録です。
なぜdisplay: contentsを指定するとフォーカスができなくなるのか
そもそも、display: contentsとは、ボックスツリーを生成するかどうかを指定するプロパティです。
display: contentsが指定された要素は、表示はされるけどボックスツリー上では無視されるようになります。
このdisplay: contentsにはアクセシビリティ上のバグが複数報告されており、この挙動もその1つと思われます。
報告されているバグは、display: contentsが指定されている要素のroleがアクセシビリティツリー上で無視されるようになるというものです。
実際にdisplay: contentsを指定したリンクと何も指定していないリンクを並べてみました。
See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.
Tabキーを押すと、display: contentsの方は飛ばして何も指定していないリンクの方にフォーカスが当たります。
また、display: contentsが指定された方のリンクはtext-decorationも消えています。
解決方法：display: contentsの使用を避ける
display: contentsはCSSのツリー上で無視されるので、gridレイアウト内で使うとテーブルレイアウトのような見た目を実現することができます。
See the Pen display:contents by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.
Ref 【CSS Tips】tableタグを使わずにテーブルレイアウトを作る - Qiita
ただ、現在はsubgridがサポートされて、代用が効くようになったのでdisplay: contentsが必要になるシーンは少ないと思います。
そのため、基本的にはdisplay: contentsの使用は避けるのが良いと思います。