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.

Sign up for GitHub

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

Jump to bottom

Associate Dialog Header with Dialog Title via aria-labelledby #1259

Closed
scurker opened this issue Oct 20, 2023 · 0 comments · Fixed by #1260
Closed

Associate Dialog Header with Dialog Title via aria-labelledby #1259

scurker opened this issue Oct 20, 2023 · 0 comments · Fixed by #1260
Assignees
@scurker
Labels
accessibility
Milestone
Q4 2023

Comments

@scurker
Copy link
Member

scurker commented Oct 20, 2023

Current aria practices suggest that we should be using aria-labelledby to associate the accessible name of the dialog with the title of the dialog. This is currently raised in axe-core as a serious best practice issue via aria-dialog-name.

All of our dialogs currently have a heading, so the needed changes to satisfy this are:

  • Auto-generate an id with react-id-generator and set the id on the heading element
  • Associate the role="dialog" container with an aria-label with the id reference of the heading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@scurker scurker

Labels
accessibility
Projects
None yet
Milestone
Q4 2023
Development

Successfully merging a pull request may close this issue.

feat(Dialog): ensure that dialogs are labelled by their heading dequelabs/cauldron
1 participant
@scurker