Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EES-3022 improve tabs accessibility #3317

Merged
merged 1 commit into from Jun 9, 2022
Merged

EES-3022 improve tabs accessibility #3317

merged 1 commit into from Jun 9, 2022

Conversation

amyb-hiveit
Copy link
Collaborator

@amyb-hiveit amyb-hiveit commented May 30, 2022

Accessibility improvements for tabs:

  • when there's only one tab, for instance when datablocks with just a table are embedded in release content, the tab list is aria-hidden to prevent screen readers from seeing it.
  • added screen reader only text to the tabs so they make sense when read out of context. This is via a new tabLabel field as the title is used in GA events so had to remain just a string
  • changed it so the up and down keys move between tabs and prevented being able to loop over the tabs with the keyboard, this makes it more consistent with expected tabs behaviour and the GDS design system

Related changes

  • changed user clicks link to use xpath so that data block tab links can be clicked now that there is adjacent visually hidden text
  • I noticed that the Headlines Key Stats block on releases has the title 'Headlines' in the admin and 'Summary' in the frontend, so have changed the admin one to be consistent with the frontend

Comment on lines 478 to 476
user clicks link by visible text
[Arguments] ${text} ${parent}=css:body
user clicks element xpath:.//a[text()="${text}"] ${parent}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm surprised that the xpath selector is working compared to the link selector used by user clicks link. Would have thought these are basically identical in what they're doing.

If there is actually a difference here, would suggest scrapping this new keyword and change user clicks link to use the xpath selector instead. It's simpler and if it also covers cases that link can't, then it'd be more beneficial to be there instead.

@ntsim ntsim merged commit b8cbdbb into dev Jun 9, 2022
@ntsim ntsim deleted the EES-3022 branch September 14, 2022 11:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants