How to prevent SVG elements from gaining focus with tabs in IE11?

internet-explorer svg internet-explorer-11 tabindex
Alain Duchesneau picture Alain Duchesneau · Apr 1, 2015 · Viewed 9.5k times · Source

There is an inline SVG element among my HTML form elements. When I navigate through my elements with the Tab key, the SVG element gets focused, in IE11 only, even if the SVG element has the tabindex="-1" attribute set to every element inside it:

<svg width="20px" height="20px" tabindex="-1">
    <g tabindex="-1">
      <circle cx="8.5" cy="8.5" r="7.75" stroke="#999" stroke-width="1" tabindex="-1" />
      […]
    </g>
</svg>

To be sure that it's focusing on that element, I call document.activeElement in the console, and yes, it prints out the SVG thing.

Internet Explorer 11 should honor the negative value, as it does for other DOM elements, or should it not? What can I possibly do to prevent this?

Answer

Zachary Ryan Smith picture Zachary Ryan Smith · Sep 19, 2016

In case you missed it, the answer was commented:

tabindex is part of upcoming SVG2 and is not yet supported by IE11. Have a look at this question for a work-around.

The answer in that question recommends adding a focusable="false" attribute to the SVG element.

Thanks to @altocumulus

Related questions

IE11 meta element Breaks SVG

I've embedded an SVG files data directly into my html. It shows in Chrome and Firefox, but in IE11 it doesn't show at all. The pastebin link to the SVG is http://pastebin.com/eZpLXFfD I've tried adding a META …

Read More
Emulate IE7 for IE8 but not for IE9 using "X-UA-Compatible"

I have a website depending on vector drawing, for Internet Explorer I'm using VML and for other browsers I'm using SVG. IE8 however, doesn't have support for neither without falling back to IE7-mode which has VML. Therefore I'm including &…

Read More
How do you detect support for VML or SVG in a browser

I'm writing a bit of javascript and need to choose between SVG or VML (or both, or something else, it's a weird world). Whilst I know that for now that only IE supports VML, I'd much rather detect functionality than …

Read More