Internet Explorer 11: all the SVG icons are focusable

[afercia]

IE 11 suffers from a bug where all SVG icons inside focusable elements default to focusable=”true”. As a consequence, both the wrapper focusable element and the inner SVG get focus and create a tab stop.

This is new to me (not a great SVG expert here) but seems to be a well known bug. More details, for example, here: http://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-4

I've reproduced this behavior testing with IE 11 on all the controls that use SVG icons, for example the ones highlighted in the screenshot below:

This is very annoying because, when using a keyboard, users have to tab twice to navigate content every time they encounter a control with a SVG icon.

I haven't been able to reproduce in Edge, where everything seems to work fine, but some more testing would be nice.

Seems the recommended fix is to add focusable="false" to the SVGs, but maybe worth researching if there are other, less intrusive, fixes.

[jasmussen]

Can reproduce this in IE11 :(

If we do need to add any properties to these SVGs, we might want to do it upstream in the dashicons repo.

[dpersing]

@afercia @jasmussen So glad our article was helpful!

[afercia]

Marking with the high priority label to indicate it's an a11y priority. This should be definitely be fixed, as the keyboard navigation experience is subpar for IE 11 users.

[samikeijonen]

So it seems focusable="false" in SVG would fix this. From my understanding all the SVG markup can be updated in one place. I can find out.

[samikeijonen]

If I'm correct the SVG markup happens in here.

[youknowriad]

This seems already fixed for me. Am I missing something?

[afercia]

I think it was just waiting for the fixes to be ported to the dashicon repo too.

[jasmussen]

I think it was just waiting for the fixes to be ported to the dashicon repo too.

I'll take a look.

[samikeijonen]

They should be in dashicon repo too, at least I have reported in there also.

[youknowriad]

I just checked and I see the "focusable=false" in the dashicon repo

https://github.com/WordPress/dashicons/blob/master/react/index.jsx#L841

[jasmussen]

Cool, this sounds closable then!