svg element needs focusable="false" to fix keyboard navigation for IE users

[thibaudcolas]

Internet Explorer makes SVGs inside focusable content also focusable themselves – meaning IE users will have to hit tab twice to get past the corner, and it’s unclear where the focus is during this time. The solution is to simply add focusable="false" to the svg element:

<svg
      width="80"
      height="80"
      viewBox="0 0 250 250"
      style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
      aria-hidden="true"
      focusable="false"
    >

Here is a screen recording showing the issue for reference – you can see I have to press Tab three times to move from one textarea to the next, instead of the expected two.

[tholman]

Ahh great catch, will try to fix this up this weekend!