Chrome バージョン127からスクローラーのフォーカスの仕様が変わったので注意が必要

Chromeのスクローラーのフォーカスの仕様変更
スクローラーをフォーカスされないようにする方法
tabindex属性ではクリック時のフォーカスは無効化できない

Chromeのスクローラーのフォーカスの仕様変更

スクローラーとはスクロール可能な要素のことで、例えば以下のような要素です。

Chrome v127以降でキーボードのタブキーを使用してフォーカスすると、スクローラー部分がフォーカスされていることが確認できます。

スクローラーのサンプル

CSS

.scroller-sample {
  overflow: auto;
  width: 20em;
  height: 5em;
  margin-bottom: 1em;
  border: 1px solid #CCC;
}

:focus {
  outline: 1px solid lightgreen;
}

逆に言うとキーボードのタブキーを使用してフォーカスしていなくても、Chrome バージョン127からはいままでフォーカスされていなかった要素がフォーカスされるようになりました。

スクローラーをフォーカスされないようにする方法

Chrome バージョン127以前のようにスクローラーをフォーカスされないようにしたい場合は、「tabindex="-1"」を要素に追加します。

HTML

<div class="scroller-sample" tabindex="-1">
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
  <div>tabindex="-1"を追加</div>
</div>