簡単すぎるから説明することはないと思ったらないこともなかった。
なーんも考えずに i エレメントにクリックハンドラ書いてたら、滅茶苦茶使いにくいのね、当たり前なんだけど。具体的には
- フォーカスが飛ばない (TAB キーなどで)
- click ハンドラを書いても ENTER キーや SPACE キーでは「押せない」
そらそうだ。
最初 1. を解決出来る「role="button" tabindex="0"」で糠喜び出来てたんだけど、そりゃ「フォーカスだけ行ってもらっても…」と 0.0000001 秒で落胆。「これもそりゃそーだ」。
なので結局こんなしかない、というかこれだけが唯一の解だろうね:
1 <!-- ... -->
2 <style>
3 button {
4 /* ここの調整は人それぞれで大変だが頑張るしかない。
5 アイコンとテキストを出したい人とアイコンだけがいい人とで
6 ノリが結構違ってくると思う。*/
7 background-color: transparent;
8 border: none;
9 font-size: 16px; /* "font awesome" の名の通り font-size に反応する。 */
10 }
11 i:hover {
12 /* これをするかは好みと思うが、上の button のスタイルを採用する場合、
13 ポインタ変えないと非常に気持ちが悪い、個人的に。*/
14 cursor: pointer;
15 }
16 </style>
17 <!-- ... -->
18 <button type="submit" id="open-node-filters">
19 <i class="fa fa-filter fa-1x" aria-hidden="true" title="Open node filters"></i>
20 </button>
