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的兼容性表格

兼容性表格,看着兼容性表格还是比较喜人。

focusable-table
focusable-table

IE11下SVG元素默认可以focusable

IE11下有一个奇怪的现象,就是svg默认可以获取焦点(focus),尤其是在登录界面,input前后有prefix和suffix时,尤其别扭。官方一直到EdgeHTML时代的某个版本才修复,看这里microsoft-edge Support tabindex in SVG, don’t make every focusable by default

问题的原因

IE 11下的svg元素默认是focusable的,也就是说其它浏览器svg元素默认是不能获取焦点的,这就造成了,当input有prefix和suffix的svg时,tab进行表单输入切换就很麻烦,被认为是bug。

例如:

1
2
3
4
5
6
<form>
<svg></svg>
<input type="text"/>
<svg></svg>
<input type="text"/>
</form>

解决方案

解决方案也很简单

1
<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 focusable by default

Focus, tabIndex and behavior of browsers

ant-design-icons Set svg default focusable=false

tabindex attributes