動機
button
要素はクリックした時にfocusがあたった状態になるので、
デザインの再現の際に、不都合があることがあります。
button:focus {
outline: none;
}
上記のようにfocus時のスタイルを消してしまえば、いったんは良いのですが、
キーボードでアクセスした時に、そのbutton
がfocusされているのか視覚的に分からないため、アクセシビリティ的には良くありません。
ですので、マウスでクリックした時はfocus時のスタイルを消し、キーボードアクセスでfocusされた時は、スタイルを残せるようにJavaScriptで判定したいと思います。
実装例
const button = document.querySelector('button');
const onClickButton = (event) => {
if (event.detail !== 0) {
event.currentTarget.style.outline = 'none';
}
}
const onFocusButton = (event) => {
event.currentTarget.style.outline = '';
}
button.addEventListener('click', onClickButton, false);
button.addEventListener('focus', onFocusButton, false);
解説
onClickButton
の箇所
clickイベントの時、引数eventにはMouseEventオブジェクトが入ります。
MouseEventには(自分が確認した限り)、keydown時のevent.key
のように押下されたキーを判定できるプロパティが無かったため、event.detail !== 0
で、マウスのクリックなのか、Enterキーなのかを判定しました。
event.detail
が何かと言うと、クリック数を読み取り専用で返してくれるプロパティのようです。
UIEvent.detail - Web API | MDN
ですので、今回はクリック数がゼロかどうかで、MouseかEnterかを判定しています。
つまり、
event.detail !== 0
は、クリック数が0以外の時なので、
Mouseでクリックされた時の挙動を記述します。
Mouseでクリックされた時はevent.currentTarget.style.outline = 'none';
でfocus時のスタイルを消します。もっと詳細にスタイルを指定したい場合は、classList.add('className')
でクラス制御でスタイルを変更しても良いかもしれません。
onFocusButton
の箇所
onFocusButton
では、focusが当たった時に、onClickButton
で消したスタイルを元に戻す記述をしています。
event.currentTarget.style.outline = '';
で空文字を代入しているのは、既存のスタイル(ブラウザのデフォルトスタイルや、CSSで指定したスタイル)が再度適用できるようにです。
まとめ
以上、clickイベント時にMouseかEnterキーかを判定して、
focus時のスタイルをコントロールする方法を紹介しました。
より良い方法がありましたら、是非コメントを頂けたら幸いです。