Focus visibleの導入: Snow Monkeyでドロワーメニューのフォーカスの枠線を表示させない方法

こんにちは、みみです。

Snow Monkeyのドロワーメニュー、便利ですよね。でもモバイルでみた時にアレ？と思う人が多いと思います。ドロワーメニューの一番上のメニューにふわっとした枠線が付くやつ。アレを取りたいなーと思う人は結構居ると思います。

2020/12/13 18:25追記: Snow Monkey ver.12 より改善されて、フォーカスがでなくなっています！なので一番手っ取り早いのはSnow Monkeyをアップデートすることです！
というわけで、以下は、諸事情で今スグアップデート出来ない方や、:focus-visibleそのものに興味が有る方へのコンテンツとなります…

でもあれって実はとても大事な線なのです。キーボード操作で画面を操作する人には命綱と言っても良いものです。いわゆるアクセシビリティに関わる処ですが、Snow Monkeyはアクセシビリティ対応も素晴らしく、キーボード操作でフォーカスが当たる順番をちゃんと考えて作ってあります。

参照:
細かすぎて伝わらない Snow Monkey の地味なこだわり – WordPress テーマ Snow Monkey

なので安易にoutline:noneで消さない方が良いのですが、とはいえせっかく可愛く、カコヨク作ったサイト、細部までこだわりたい貴方に朗報です。:focus-visible という素敵な擬似クラスがCSSの草案にあるのでこれを活用しましょう。これを使うと、キーボード操作では無い時だけフォーカスの表示を調整することが出来ます。

:focus-visible

一番簡単な方法

追加CSSに下記を追加します。

/* ドロワーメニューのフォーカスの枠線をキーボード操作以外では表示させない */
.c-drawer__menu :focus:not(:focus-visible) {
  outline: 0;
}

ただし、2020年12月現在、Safariで :focus-visible が効かないので、Safariでみている人には枠線は出たままです（詳しい対応状況はMDNでご確認ください）。今の処ソレじゃああんまり意味がないんだよな、という方にはこちら。

よりオススメな方法

Safariでも効かせるためにJavaScriptのライブラリ focus-visible.js を使います。

Snow Monkeyをお使いなら、My Snow Monkeyを作成することをオススメしますが、このぐらいなら子テーマでも良いですから、ともかくfunctions.phpもしくはそれに準じるところに

wp_enqueue_script( 'focus-visible-js', 'https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js', '5.2.0', true );

とか書いて読み込ませます。

読み込ませているCSSまたは追加CSSに下記を追加します。

.js-focus-visible .c-drawer__menu :focus:not(.focus-visible) {
    outline: 0;
}

focus-visible使ってるならべつに全体的に表示させなくて良いんじゃないとも思うのですが、何に影響があるか分からないので念の為あくまでドロワーメニュー内に限っておきます。
つまり、さらにフォーカスがハンバーガーボタンに戻った時とかも表示させたくないな、という場合は以下のように書きます。

.js-focus-visible .c-drawer__menu :focus:not(.focus-visible),
.js-focus-visible .l-header :focus:not(.focus-visible){
    outline: 0;
}

My Snow Monkey Starterの場合

focus-visibleはnpmで配布されているので、package.jsonに追記または

$npm install --save focus-visible

をしておいて、index.jsに

import applyFocusVisiblePolyfill from 'focus-visible';

として読み込ませています。

ということで、このサイトにも実装してみたので、良かったらテストしてみてください。なんかバグ見つけたらご報告PLZ。

…とかいう対応をしていてようやく気がついたのですが、以前、私が左側にメニューがあって閉じボタンがドロワーメニュー内に有るタイプにカスタムしたやつって閉じようとする時になかなか閉じボタンにフォーカスが当たらんのですね…。後でこっそり対応しておこうと思います。

とかやってると、左と右とでスイッチできるのにも対応したくなってきた…。沼なのでまた案件で使ったりしたらやります…。