mi6
Code examples causing Accessibility Insights error due to not being focusable
Summary of the bug
Running Accessibility Insights' FastPass mode highlights an accessibility issue with the code examples on the website, to do with the fact that they are not focusable and therefore not scrollable using just the keyboard.
🪜 How to reproduce
- Go to a page on the ICDS website where there is a code snippet which has a scrollbar (i.e. where the text overflows on the right), such as for the icon button.
- Run the FastPass mode of the Accessibility Insights plug-in.
- It brings up an error about having a scrollable region (the
<pre>element) that isn't focusable.
The issue is that you cannot focus on the code snippet regions so there is no way of scrolling right and left using the arrow keys to see more of the text.
Other design systems allow you to focus on their code snippets so that you can use the arrow keys to scroll, e.g. those in the GDS docs have this behaviour. Ionic is another example (but it just shows the native focus indicator).
📸 Screenshots or code
🖥 📱 Device
- Type: Desktop
- Browser: Chrome
🧐 Expected behaviour
There should not be an error about this when running Accessibility Insights' FastPass mode.
Running Accessibility Insights FastPass will bring up a "duplicate-id-aria" error with the tabs on the Code pages as well. I think this is fine because the success criterion / rule which it is breaking is deprecated in WCAG 2.2 - so I think it shouldn't be long until FastPass no longer brings up this error (once Accessibility Insights changes to using WCAG 2.2).
Devs to implement their own inner focus indicator, as it is only a website change