これは何
outline: noneやoutline: 0が当たっている要素に:focusでoutlineなどのフォーカス表示指定すると、Tabキーでフォーカスした時だけでなく要素をクリックした時にもフォーカス表示が表示されてしまう現象の解決方法です。
結論
:focusではなく:focus-visibleを使ってフォーカス表示を指定する。
本文
buttonやaのようなフォーカスできる要素は、デフォルトでTabでフォーカスした際にoutlineが表示されるようになっています。
このoutline見た目のために0やnoneを指定して表示されなくすると、キーボード操作でWebを利用するユーザーが「今自分がどこの要素にフォーカスしているか」が視覚的に判断できなくなり、アクセシビリティが低下してしまいます。
🔽 リンクとボタンにoutline: noneが指定されているため、Tabでフォーカスしても視覚的にわからない
See the Pen outline:none by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.
そのため、outlineの値を0やnoneにすることはしないか、する場合は大体のフォーカス表示が必要になります。
普段コーディングをしている際はブラウザがデフォルトで表示されるようになっているので問題ないのですが、たまにreset.cssのような親要素や使用したライブラリに意図せずoutline: 0やoutline: noneが当たっていることがあります。
こうした時、フォーカス表示を表示させたい要素に:focusを使ってoutlineの指定をオーバーライドしてフォーカス表示を実装していました。
しかし、この:focusを使用することには一つ落とし穴があります。
それは、フォーカス表示がTabキーでフォーカスした時だけでなく要素をクリックやタップした時にも表示されてしまうことです。
（safariの場合は表示されません）
🔽無事フォーカス時に表示が出るようになったが、クリック時にもフォカース表示が出てしまう...
See the Pen Untitled by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.
ボタンをクリックした時にまでoutlineが表示されるのは好ましくありません。
そんな時に、:focus-visibleを使うと、Tabでフォーカスした時のみフォーカス表示を出すことができます！
:focus-visible 擬似クラスは、要素が :focus 擬似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると推測的に判断した場合に適用されます (多くのブラウザーではこの場合、既定で「フォーカスリング」を表示します)。
このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。
🔽無事フォーカス時に表示が出るし、クリック時には表示が出ないようになりました！ 
See the Pen :focus-visible by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.
こちらの方法は、キーボードのタブ移動時はoutlineを表示し、マウスクリック時は非表示にする | NullNullという記事で発見することができました 
感謝
2022年8月現在、Can I use...で確認するとChrome, Edge, Safari, Firefox, Operaなどの最新版でサポートされているようです！
Ref
- キーボードのタブ移動時はoutlineを表示し、マウスクリック時は非表示にする | NullNull
- :focus - CSS: カスケーディングスタイルシート | MDN
- :focus-visible - CSS: カスケーディングスタイルシート | MDN
最後に
よければこんなCSSやアクセシビリティ、あとは普段よく記事を書いているFigmaなどについてDevトークで情報交換してくださる方を募集中です...！ お気軽にご応募ください! :)