HTMLのLABEL要素を.focus()でフォーカスしたかった

tabindex="0"を設定した<label>を.focus()してもフォーカスされない。調べてもクリティカルな回答がない…。から試行錯誤で至ったコードを晒します。

状況

See the Pen Toggle-Button by horyu (@horyu) on CodePen.

見て読んでお分かりのように、こんな感じでトグルボタン用の<label>がありました。隣の<button>に label.focus() が仕組んであります。document.activeElement ===の後ろの<span>に現在フォーカスされているエレメントが表示されるようになっています。さて、ボタンをクリックしてみましょう。

・・・

**できるじゃん！！！！となった方、そのブラウザは良いですね。私が常用するWaterfox**では出来ませんでした。

実装

Waterfox 56.2.11 (64 ビット)でlabelをフォーカスさせる例が以下となります。

See the Pen Toggle-Button Focus by horyu (@horyu) on CodePen.

フォーカスの実装は以下のようになりました。

// 参考：
// https://stackoverflow.com/questions/2388164/set-focus-on-div-contenteditable-element#answer-16863913
const setFocus = (label) => {
  label.setAttribute('contentEditable', true);
  const range = document.createRange();
  range.setStart(label, 0);
  range.setEnd(label, 0);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  label.setAttribute('contentEditable', false);
};

概説としてはこんな感じになります。

1. labelにcontentEditable属性をtrueにし、テキストを選択可能にする
2. labelのみを含むRangeオブジェクトを作る
3. ユーザーの選択範囲Selectionオブジェクトの中身を作りたてのRange`オブジェクトだけにする
4. labelのcontentEditable属性をfalseにする