IE11, svg with tabindex=0 does not have tabIndex property

[straker]

In IE11, a SVG with tabindex="0" does not have a tabIndex property so gets added to the orderedTabbables array no matter where it is in the DOM.

candidateIndex = parseInt(candidate.getAttribute('tabindex'), 10) || candidate.tabIndex;

Always triggers the OR condition if tabindex="0", which then assumes tabIndex is a valid property. SVGs return undefined for the tabIndex property.

[davidtheclark]

Yep, looks like a typical forgot-to-remember-that-zero-is-falsy accident. Thanks for pointing this out.

[davidtheclark]

🤔 In theory I see that there should be a possible bug here. And we should change the code regardless. But I want to make sure I'm fixing the problem you're reporting ... and I'm actually having trouble reproducing it, @straker.

I added a new test case with the following HTML:

<svg id="svg-1" height="100" width="100" tabindex="0">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<svg id="svg-2" height="100" width="100" tabindex="-1">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
<svg id="svg-3" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
</svg>

As expected, running tabbable on this case returns an array with only the first SVG — both in Chrome and in IE11. So, things actually seem to be working ok?

Could you please explain more about what the difference between expected and actual behavior is?

(Also: IE11 and maybe some Edge versions through everything off by making <svg> elements focusable by default, and you need to turn that off with focusable="false" if you want behavior to match other browsers. Maybe should document this caveat in the README, since I don't know a way around it.)

[straker]

So the problem is that the svg is always added to the front of the array. So if there are other tabble elements before the svg, the svg will still be first on the list. <button>1st</button> <svg id="svg-1" height="100" width="100" tabindex="0"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> Returns [svg, button]

…

On Sun, Apr 29, 2018, 7:56 AM David Clark ***@***.***> wrote: 🤔 In theory I see that there should be a possible bug here. And we should change the code regardless. But I want to make sure I'm fixing the problem you're reporting ... and I'm actually having trouble reproducing it, @straker <https://github.com/straker>. I added a new test case with the following HTML: <svg id="svg-1" height="100" width="100" tabindex="0"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> <svg id="svg-2" height="100" width="100" tabindex="-1"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" /> </svg> <svg id="svg-3" height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" /> </svg> As expected, running tabbable on this case returns an array with only the first SVG — both in Chrome *and in IE11*. So, things actually seem to be working ok? Could you please explain more about what the difference between expected and actual behavior is? (Also: IE11 and maybe some Edge versions through everything off by making <svg> elements focusable by default, and you need to turn that off with focusable="false" if you want behavior to match other browsers. Maybe should document this caveat in the README, since I don't know a way around it.) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#24 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACUgwy-DaFXJJL3zbnZZ7hVvXdXGoDSWks5ttdSZgaJpZM4TkQmc> .

[davidtheclark]

Ah, I see. Will fix up my test case to confirm the fix to that problem.