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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With