Fix Axe accessibility issues with tabs #721
Assignees
Labels
a11y
This addresses accessibility needs and/or concerns
tabs component
The generic component, includes both the web component and the React component
Milestone
Comments
GCHQ-Developer-847
added
a11y
GCHQ-Developer-530
added a commit
that referenced
this issue
Jul 14, 2023
…p axe issue Add role tab to divs in horizontal scroll to stop axe issue . #721
GCHQ-Developer-530
added a commit
that referenced
this issue
Jul 14, 2023
…p axe issue Add role tab to divs in horizontal scroll to stop axe issue . #721
3 tasks
GCHQ-Developer-530
added a commit
that referenced
this issue
Jul 17, 2023
…p axe issue Add role tab to divs in horizontal scroll to stop axe issue . #721
GCHQ-Developer-530
added a commit
that referenced
this issue
Jul 17, 2023
…p axe issue Add role tab to divs in horizontal scroll to stop axe issue . #721
GCHQ-Developer-530
added a commit
that referenced
this issue
Jul 20, 2023
…p axe issue Add role tab to divs in horizontal scroll to stop axe issue . #721
GCHQ-Developer-530
added a commit
that referenced
this issue
Jul 21, 2023
…p axe issue Add role tab to divs in horizontal scroll to stop axe issue . #721
jd239
pushed a commit
that referenced
this issue
Jul 24, 2023
…p axe issue Add role tab to divs in horizontal scroll to stop axe issue . #721
jd239
pushed a commit
that referenced
this issue
Jul 24, 2023
…p axe issue Add role tab to divs in horizontal scroll to stop axe issue . #721
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
There is an Axe accessibility issue with the tabs component regarding ARIA roles.
💬 Description
When you run the Axe DevTools plug-in on the tabs component, you get the following accessibility issue:
It seems to be something to do with the tab group having
role="tablist"and the<div>s containing the horizontal scroll buttons not being valid children of a components with thetablistrole.💰 Use value
Resolving this will reduce the amount of issues customers will get when running accessibility plug-ins on an app which uses ICDS components.
Additional info
I have tried adding
role="tab"to the<div>s which does stop the error from appearing. Doing this doesn't seem to affect screen reader behaviour (probably because of the aria-hidden) but it is not an ideal solution as they are not actually tabs so it would be best to see if there is another solution first.The text was updated successfully, but these errors were encountered: