IE11でfontawesome5(SVG with JavaScript)を使うとタブキーでフォーカスが移動してしまう現象の回避策

動作環境

• Windows 10 pro 64bit
  • IE11
• jQuery JavaScript Library v3.3.1
  • jquery-3.3.1.js
• Bootstrap v4.1.0
  • bootstrap.css
  • bootstrap.bundle.js
• Font Awesome Free 5.0.8
  • fontawesome-all.js

今回の現象

本家サイトの How to Use にも記載の通り、<i>タグを使って WEB ページにアイコンを埋め込みます。
HTML 内に input 系のタグと交互に入れておくとわかりやすいです。
そして IE11 で表示して、タブキーを押します。
すると、<i>タグの数だけ、フォーカスがどこかに消えてしまいます。
Chrome ではこの現象はおきませんでした。

普通の書き方

<i class="far fa-envelope"></i>
この書き方をするとフォーカスを持ってしまいます。

やってみたけどダメだった例

<i class="far fa-envelope" tabindex="-1"></i>
tabindex を指定してもフォーカスをスキップしてくれませんでした。

回避策

<i class="far fa-envelope" focusable="false"></i>
focusable を指定することで、SVGに展開後もフォーカスを制御できるようです。
false にすることでフォーカスを持たなくなります。
これで IE でも安心してフォームの中で SVG が使えます。