SVG elements receiving focus on IE11

[kaycee45]

SVG images on IE11 are focusable by default, so this means that when a keyboard user navigates the NHS sites on IE11, all SVG images receive focus automatically. This should not be the case because it is an accessibility fail and it also could confuse users who depend on keyboard for navigation and assistive technologies.

Below is more details on the issue and my resolution

Steps to recreate:

1. Open any nhs.uk site e.g https://www.nhs.uk/better-health/ on IE11
2. Use Tab to navigate through SVG images and icons
3. Observe the hidden selection on SVGs

Environment where this issue occurred: Operating system - Windows 10 Browser: Internet Explorer 11 NHS.UK frontend package version: 3.1.0

Resolution: All SVG images/icons should have an attribute focusable="false" assigned to them. e.g

<svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false">
  <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
</svg>

Below is a live GIF capture of the issue

[chrimesdev]

Hey @kaycee45 thanks for opening this issue. This is something we'll need to look into further as a blanket focusable="false" applied to all SVGs might not be the best solution for some components that utilise SVGs. We'll also need to check the behaviour in other browsers.

[nakotami]

I'm not getting this issue on IE11. It may have been fixed in one of the pull requests from may until now as "focusable=false" is present on the NHS website.