やーホント詰まった。「なんでできねぇんだよ」が久々に来たね。

英語圏兄貴の検索に引っかかることを願って、英単語まじえて説明していく。

◆したいこと

  1. htmlでbutton要素をclickする。
  2. focusは当てたい。けど見せたくない。つまるところ、outlineをhiddenしたい。outlineをinvisibleしたい。outline: none;したい。
  3. しかしながらtabで移動してきたときはfocusを当てたい。

◆前提知識：CSSの疑似クラス

条件によりCSSをあてたい時に使用。

MDN：疑似クラス

◆試行錯誤（読まなくてよし）

▼擬似クラス:focusでoutline: none;

MDN：:focus

  • Tabで移動してきたときにoutlineが消えちゃう。やだ。

▼擬似クラス:activeでoutline: none;

MDN：:active

  • mouseupしたときにoutlineが復活する。やだ。

▼buttonのonclickでthis.blur()

MDN：element.blur()

  • holdしてるときにoutlineがでる。やだ。
  • 「outlineが見えていない」じゃなくて「focusがはずれる」だ。やだ。

▼buttonのonmousedownとonmouseupでthis.blur()

同上。

◆疑似クラス:focus-visible

visibleって名前おかしいでしょ。「関係ないか」と思ってしまった。

:focus-visible 疑似クラスは、要素が :focus 疑似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると発見的に指定した場合 (多くのブラウザーではこの場合、「フォーカスリング」を表示します) に適用されます。

このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。
-出典　MDN：:focus-visible

日本語しゃべって（懇願）

しかしまぁ、こいつを使えばいい。

◆つかう

これかここみろ！「CodePenで開く」しろ！

MDN：:not()

◆問題発生

Vue.jsフレームワークを使って開発していたんだが、単一ファイルComponent配下のbuttonでfocus-visibleが効かない。outlineでちゃう。

◆対処

なんかfocus-visibleってまだらしいから、polyfillすりゃいいらしい。

  1. yarn add -D focus-visible

     する

  2. .vueファイルの<script>タグ内で 
    import 'focus-visible';

    する

  3. .vueファイルの<style>タグ内で 
    button:focus:not(.focus-visible) {
    outline: none;
}

    する
    ※例は「button」要素になってるけど「.hoge」クラスでもいいし「#fuga」IDでもいいでしょうね。

◆以上

Chromeは当然として、IEでもEdgeでも動いてるし多分FireFoxでも動くでしょ。（楽観）

「わかんねぇ」とか「ポリフィルってなんだよ。やめろよ。」とかあったらコメントしろな。