検索フォームへは移動と同時にフォーカスもさせたい。そうしておかないと、入力可能にするにはもう一度クリックしなくてはならず、フラストレーションがたまるからだ。このウェブサイトではinput[type="search"]にIDを振ることで実現しておいた。HTMLコードだけで実装できる。しかし、Firefox 54やMobile Safari 10.2ではうまくフォーカスが当たってくれない。
Demo: Fragment ID and Focus Management
Firefox 54ではフォーカス順の位置は入力ボックスの位置に移るが、入力可能な状態にはならない。Mobile Safari 10.2では入力ボックスがズームされ、キーボードが出てくるが、実際には入力することはできない。
フラグメントをたどる仕様によると「Run the focusing steps for target」というステップが存在する。それならばフォーカスが当たるのが正しいはずだ。Firefox 54やMobile Safari 10.2のバグと言えるだろう。とはいうものの、仕様の後出しのようなので、まだ反映されていないだけとも言える。
バグだ！ と言っててもしょうがないので、JavaScriptでフォローした方が良いかもしれない。JavaScriptで制御する場合は、リンクをジャックするのではなく、hashchangeイベントを利用すると良さそうだ。DOM構築を待つ必要がないため、低コストで初期化できるはずだ。
今のところブラウザーのせいにして何もしていない。Firefoxはともかくとして、Mobile Safari 10.3で治っていなかったら直すつもりだ。
Firefoxには12年前からバグが立っていた。仕様の更新を受け、実装作業が進んでいるようだ。Safariにも同じようなバグがあり、パッチも登録されている。挙動が統一される可能性は高い。
iOS 10.3に上げて確認したところうまくフォーカスが当たらないままだったので、とりあえずという形で当たるようにしておいた。Mobie Safariのclickイベントなどからしかフォーカスを制御できないという仕様のことをすっかり忘れていたので、なかなか面倒な感じになっている。それだけで済めばまだよかったのだが、Firefox 54ではclickイベントのコードを実行したあとにブラウザー側のフォーカス制御が行われるようで、こっちはこっちでhashchangeイベントを利用しなければならなかった。