:focus-within は Edge に対応していないからといって甘くみてるとぶっこわれた話

:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。

 <div class="button">
   <input type="submit"> 
   // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる
 </div>

例えば、

 <li>
  <button>ボタン</button>
  <button>ボタン</button>
  <button>ボタン</button>
 </li>
// ↑ li:hover トリガーで出てくるボタンメニューとか

この場合キーボード操作のみでは、ボタンメニューにたどり着けないが、:focus-within を使うと楽にできるのでいいけど、Edge と IE11 はサポートされていない、ブラウザを限定して、ちょっとでも使えるようにとか。JSとかでフォーカスコントロールするまでのつなぎとかでさくっといれとくにはだいぶ楽なので、いれておいたら痛い目にあった。

&:hover,
&:focus-within {

}

みたい、複数セレクタで :focus-within 書いてたとこの :hoverスタイルが Edge で軒並み動かなくなった。

細かいことまでおってないが、たぶんEdgeさん的にはそんなセレクタないし、ということで、そのスコープまるごとスキップされているような感じ。

この場合、 :focus-within を諦めるか、:hover と :focus-within わけることで解決できる。

&:hove {

}

&:focus-within {

}

が、minify かなんかで複数セレクタをまとめたりするんじゃないかとか思ったりするけど、なんかとりあえずはあれしてあれしている。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within

衝撃！Mac の Firefox で Tabキー移動したいときはシステム設定いじる必要がある

最近、諸事情から Firefox に乗り換えたんですけど、Tabキーでフォーカス移動したいところにぜんぜんいけなくて、どうやらボタンとかフォームは移動できるんやけど、アンカーリンクに移動できない。あれ、バグってる？と思って、いろいろ調べていたら、

stackoverflow.com

なんと、Mac システム設定環境設定 > キーボード > ショートカットタブ の中の

下のラジオボタンの二項目のうち、「テキストボックスとリストのみ」になっていると、リンクとかにタブキーで移動できないので、「すべてのコントロール」を選択しましょう。

これ「テキストボックスとリストのみ」に設定した記憶ないからたぶん、デフォルトよね？なんかメリットあるんだろうか・・

visibility: hidden の中の visibility: visible なアイツ

visibility: hidden で css的に要素を消すということはあるあるだと思うんですが、その消している要素は、見た目的には存在していないようでして、しっかりとDOM としても、要素としても存在しているのでスクロールのパフォーマンスなどにも影響してくることはよく知られている。

しかし、なんらかの事情で display: none; できないこともあったり、css アニメーションでいい感じに消したり表示したい、となると、やはり visibility: hidden と opacity: 0, oveflow: hidden, あるいは clip などを使って、消すことも多い。

そんなときに気をつけたいのは、なんかしらの思惑と思惑が交錯した結果、その子要素に visibility: visible な要素があるときだ。細かいことは置いといて、見ていただければわかる。

この青い丸。恥ずかしげもなくここに存在しているが、実は、visibility: hidden された wrapper の中にいるのだ。visibility: visible な要素は、そんな中でもしっかりとそこにいる上に、visible なのだ。これは理解しがたい。

親がでしゃばりなら、その子もまたでしゃばり、という理屈はわかる。親が引っ込み思案なのに、子はオラオラ系、まぁ、ないこともないか。

hidden
要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は visibility が visible に設定されていれば可視になります。
引用元：visibility - CSS: カスケーディングスタイルシート | MDN

といったように、visibility: hidden している要素は position: abusolute してスタッキングコンテキストを外れたていたりすると忘れがちであるが、ただ見えないだけでレイアウトにもしっかりと影響する。

しかし、スクリーンリーダーにはその存在が知られることはない。 position: absolute して visibility: hidden しているからといって、安心はできないのだ。