前端小糾結--IE11下SVG元素默認focusable=true

原本我也不太關注一些交互的問題，可是在處理IE11下的svg可以focus(就是tab時候可以獲取焦點)時候，發現原來tabindex也是大坑。每一次兼容性問題背後，都是有相關問題的好幾個標準，一個標準還有好幾個版本，不一樣的時期的瀏覽器，實現的又有差別，只要有一個瀏覽器和其它瀏覽器行爲不一樣，就會被定義爲你有bug。PS: 最近搞兼容性好累。

tabindex值的範圍

使用以前先看看這篇文章dont-use-tabindex-greater-than-0

tabindex 的最大值不該超過 32767。若是沒有指定，它的默認值爲 -1。

還有一個好玩的z-index屬性，真可怕。

具體取決於整數的值：

• tabindex=負值 (一般是tabindex=「-1」)，表示元素是可聚焦的，可是不能經過鍵盤導航來訪問到該元素，用JS作頁面小組件內部鍵盤導航的時候很是有用。
• tabindex="0" ，表示元素是可聚焦的，而且能夠經過鍵盤導航來聚焦到該元素，它的相對順序是當前處於的DOM結構來決定的。
• tabindex=正值，表示元素是可聚焦的，而且能夠經過鍵盤導航來訪問到該元素；它的相對順序按照tabindex 的數值遞增而滯後獲焦。若是多個元素擁有相同的 tabindex，它們的相對順序按照他們在當前DOM中的前後順序決定。

根據鍵盤序列導航的順序，值爲 0 、非法值、或者沒有 tabindex 值的元素應該放置在 tabindex 值爲正值的元素後面。

element的tabbable和focusable

元素還分爲focusable和非focusable，若是使用了tabindex就能夠改變相關的行爲，看參考連接的資料，這裏作一下記錄，方便之後回顧。

focusable和tabbable的相關解釋

不翻譯了，直接上連接what-is-focusable

focusable的兼容性表格

兼容性表格，看着兼容性表格仍是比較喜人。

IE11下SVG元素默承認以focusable

IE11下有一個奇怪的現象，就是svg默承認以獲取焦點(focus)，尤爲是在登陸界面，input先後有prefix和suffix時，尤爲彆扭。官方一直到EdgeHTML時代的某個版本才修復，看這裏microsoft-edge Support tabindex in SVG, don't make every svg focusable by default

問題的緣由

IE 11下的svg元素默認是focusable的，也就是說其它瀏覽器svg元素默認是不能獲取焦點的，這就形成了，當input有prefix和suffix的svg時，tab進行表單輸入切換就很麻煩，被認爲是bug。

例如：

<form>
    <svg></svg>
        <input type="text"/>
    <svg></svg>   
        <input type="text"/>
</form>
複製代碼

解決方案

解決方案也很簡單

<svg focusable="false"><svg>
複製代碼

若是全局不少svg就很難受了，因此推薦使用ally.js解決。

ant-design組件庫

由於工做中使用的是ant-design-vue因此順便了解了下，發現

ant-design的已經解決了這個事情看ant-design-icons Set svg default focusable=false 這裏。

參考

ally.js - making accessibility simpler

focusable table

focusable-test

how-to-prevent-svg-elements-from-gaining-focus-with-tabs-in-ie11

disable-onfocus-event-for-svg-element

microsoft-edge Support tabindex in SVG, don't make every svg focusable by default

Focus, tabIndex and behavior of browsers

ant-design-icons Set svg default focusable=false

tabindex attributes

關注公衆號，發現更多精彩內容。