【CSS Tips】リンクにフォーカスできないと思ったら、display: contents が原因だった - Qiita

はじめに 偶然フォーカスできないリンクを見つけて原因を調べたところ、aタグにdisplay: contentsが指定されていたのが原因だったのでその備忘録です。 なぜdisplay: contentsを指定するとフォーカスができなくなるのか そもそも、display: contentsとは、ボックスツリーを生成するかどうかを指定するプロパティです。 display: contentsが指定された要素は、表示はされるけどボックスツリー上では無視されるようになります。 このdisplay: contentsにはアクセシビリティ上のバグが複数報告されており、この挙動もその1つと思われます。 報告されているバグは、display: contentsが指定されている要素のroleがアクセシビリティツリー上で無視されるようになるというものです。 実際にdisplay: contentsを指定したリンク