22

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?

kahlan88
  • 101
  • 1
  • 8
Alain Duchesneau
  • 394
  • 1
  • 4
  • 12

1 Answers1

48

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

Daniel Tonon
  • 9,261
  • 5
  • 61
  • 64
Zachary Ryan Smith
  • 2,688
  • 1
  • 20
  • 30
  • 2
    Thanks. It's easier to see a solution and find an answered question. It would have been nice if someone would have marked this answer accepted - it would have saved me a few minutes at least. – loctrice Jun 07 '17 at 19:14
  • 1
    An interesting point is that SVG is focusable by default even if it is inside an interactive element, for example a button. – certainlyakey Jan 18 '19 at 12:00