Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

タイトルで出オチ。

説明

visibility:hiddenしたフォームコントロールはタブフォーカスできない(タブオーダーから外れる)ことに気が付きました。

display:noneしたフォームコントロールがタブフォーカスできないのは知っていたし理解できるけど、visibility

  • 見えてるか見えてないか」の表示性を表すプロパティであり、
  • displayのように存在までなくしてしまうわけではない

から、まさかタブオーダーから外されるとは思わなかった(マウス操作はできるし)。

こんなときが危険

input要素を消して、独自の見た目を実装するボタンコンポーネントとか。

<label class="toggle-button"><input type="radio"><span><span>どこの席でもよい</span></span></label>
<label class="toggle-button"><input type="radio"><span><span>窓側</span></span></label>
<label class="toggle-button"><input type="radio"><span><span>通路側</span></span></label>

タブオーダーから外れると、キーボードでは操作できなくなってしまいます。

display, visibility, opacityの違い

ざっくり。

  • display:none
    • 表示を消す。存在も消す。存在が消えた結果、見えなくなる。
    • マウス操作不可
    • キーボード操作(タブフォーカス)不可
  • visibility:hidden
    • 表示を消す。存在は消さない。見えないが存在自体は残るので、触ることは可能。
    • マウス操作可。
    • キーボード操作(タブフォーカス)不可
  • opacity:0
    • 透明にすることで表示を消す。存在は消さない
    • マウス操作可。
    • キーボード操作(タブフォーカス)可。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment