Safariでのチェックボックスやラジオボタンのフォーカスの挙動を調べてみる

以前にSafariのtabキーでのフォーカス移動についての記事やCSSの:focus-withinを使ってみる記事で触れましたが、Safariでのフォーカスの動作が他のブラウザと異なるようだったので、いくつかサンプルを用意して挙動を試してみます。

サンプルコード

まずは以前:focus-withinを使ってみるでも試した、:focus-withinを使用した場合を試してみます。

<form>
  <div class="form-item">
    連絡
    <input type="checkbox" name="contact[]" value="電話" id="tel">
    <label for="tel">電話</label>
    <input type="checkbox" name="contact[]" value="メール" id="mail">
    <label for="mail">メール</label>
  </div>
  <div class="form-item">
    時間帯
    <input type="radio" name="hour" value="8:00〜12:00" id="hour-1">
    <label for="hour-1">8:00〜12:00</label>
    <input type="radio" name="hour" value="12:00〜16:00" id="hour-2">
    <label for="hour-2">12:00〜16:00</label>
    <input type="radio" name="hour" value="16:00〜20:00" id="hour-3">
    <label for="hour-3">16:00〜20:00</label>
    <input type="radio" name="hour" value="20:00〜24:00" id="hour-4">
    <label for="hour-4">20:00〜24:00</label>
  </div>
</form>

チェックボックスやラジオボタンにフォーカスが当たった際に、祖先要素の.form-itemに背景色がつくようにします。

.form-item:focus-within {
	background: skyblue;
}

Safariで確認したところ、キーボード操作では意図した通り背景色がつきますが、クリックで選択した場合には背景色がつきませんでした。
:focus-withinのデモページ

次に:focusを使って、隣接するlabelに背景色がつくようにしてみます。

input[type="checkbox"]:focus + label {
    background: skyblue;
}
input[type="radio"]:focus + label {
    background: skyblue;
}

この場合も先ほどと同様で、Safariだとキーボード操作では背景色がつきますが、クリックの場合は背景色がつきませんでした。
:focusのデモページ

次はJavaScriptでチェックボックスやラジオボタンにフォーカスを当てられるかを試してみます。

<form>
  <div class="form-item">
    連絡
    <input type="checkbox" name="contact[]" value="電話" id="tel">
    <label for="tel">電話</label>
    <input type="checkbox" name="contact[]" value="メール" id="mail">
    <label for="mail">メール</label>
    <button id="checkbox-focus" type="button">電話にフォーカスを当てる</button>
  </div>
  <div class="form-item">
    時間帯
    <input type="radio" name="hour" value="8:00〜12:00" id="hour-1">
    <label for="hour-1">8:00〜12:00</label>
    <input type="radio" name="hour" value="12:00〜16:00" id="hour-2">
    <label for="hour-2">12:00〜16:00</label>
    <input type="radio" name="hour" value="16:00〜20:00" id="hour-3">
    <label for="hour-3">16:00〜20:00</label>
    <input type="radio" name="hour" value="20:00〜24:00" id="hour-4">
    <label for="hour-4">20:00〜24:00</label>
    <button id="radio-focus" type="button">8:00〜12:00にフォーカスを当てる</button>
  </div>
</form>

ボタンクリックで先頭のチェックボックス・ラジオボタンにフォーカスが当たるように設定します。

document.querySelector('#checkbox-focus').addEventListener('click', function() {
    document.querySelector('input[type="checkbox"]').focus();
});
document.querySelector('#radio-focus').addEventListener('click', function() {
    document.querySelector('input[type="radio"]').focus();
});

この場合はクリックでもキーボード操作でもフォーカスを当てることができました。
focus()のデモページ

最後にフォーカスのイベントが発生するかどうかを試してみます。
チェックボックスやラジオボタンにフォーカスのイベントが発生した際に、その要素のvalueをconsoleに表示するようにします。

const checks = document.querySelectorAll('input');
 for (let i = 0; i < checks.length; i++) {
  checks[i].addEventListener('focus', output_val);
}
function output_val() {
  console.log(this.value);
}

Safariのキーボード操作では背景色がつきますが、クリックで選択した場合には背景色がつきませんでした。
focusイベントのデモページ

上記で試したデモと調べた範囲での結論としては、Safariではクリック(マウス操作)ではチェックボックスやラジオボタンにフォーカスできず、キーボード操作の場合のみフォーカスが発生するようです。
そのため、マウス操作だと:focusなどのCSSの設定やフォーカスイベントは発生しませんが、focus() でフォーカスを当てること自体はできるようなので、クリックしたチェックボックスやラジオボタンに対してJavaScriptを使ってフォーカスを当てる、といった実装自体はできるかもしれないです。