CSS）フォーカスしたスタイルをクリックしたときは適用せず、tab移動した際のみ適用したい

Question

件名の通りです。
CSSでフォーカスしたスタイルをクリックしたときは表示させない様にしたいが、タブで移動した場合はスタイルを適用させたい

bootstrapのパンくずでは実装されていますが、どう指定すれば、この挙動になるのか見当がつかず、困っています。
https://getbootstrap.com/docs/4.0/components/breadcrumb/

単純に擬似要素の:focusだと、クリックした際にfocusされてしまいます。

aaa:focus {
  background:red;
}

:focus-visibleというものが理想的ですが、まだ正式版では使えず、設定を変えないと使えない機能になっています。

aaa:focus-visible {
  background:red;
}

Comments

[Lhankor_Mhy]

ポリフィルはダメでしたか？　JavaScriptは避けたいということでしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible#Polyfill

[yosnar]

回答ありがとうございます。
javascriptが使わなくて良いなら使いたくないという状況です。
bootstrapで実現できているので、cssだけで実装できるのではないかと思い、質問しています。

[Lhankor_Mhy]

タブフォーカスした時のoutlineでしたら、ブラウザによる振る舞いだと思います。
何もしなくてもそうなると思いますよ。

古い記事ですが。
https://accessible-usable.net/2009/09/entry_090913.html

[yosnar]

おっしゃるとおり、outlineでinput要素以外であれば意図通り動くようですね。
bootstrapもそれが起因して動いているようです。
box-shadowをつけたいという要望だったので、今回どうなるかわかりませんが、知見が広がりました。

ありがとうございました。

Answer 1

この記事はなかなか面白いと思いました。
tab-indexがある要素でラッピングして、クリックしたときは子要素に、キーボードフォーカスした時は親要素にフォーカスが当たるようにしています。

Keyboard-Only Focus