-
Notifications
You must be signed in to change notification settings - Fork 2.2k
fix(a11y): identify menu ID to breadcrumbs collapsed button #7662
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
base: develop
Are you sure you want to change the base?
Conversation
Generate changelog in
|
c825575 to
a907df6
Compare
fix(a11y): identify menu ID to breadcrumbs collapsed buttonBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
| > | ||
| <span | ||
| aria-label="collapsed breadcrumbs" | ||
| aria-labelledby={this.collapsedBreadcrumbsMenuId} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On first inspection, it seems a bit odd to me to label the collapse button based on the contents of the menu. Shouldn't the collapse menu button indicate the action that the user will take to expand the menu?
I would expect the Button test to read something like an action like "expand breadcrumbs" or "show paths"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah it's a bit strange. I used the ... button from GitHub project dashboards as a reference here:
![]()
The button above has an aria-labelledby attribute that references the ID of the "More actions" tooltip. Since in this case we don't have such a tooltip shown on hover I found that the closest thing referencing the contents of the button was the menu itself, but yes that's not exactly what we want to communicate here.
a907df6 to
1d89f83
Compare
fix(a11y): identify menu ID to breadcrumbs collapsed buttonBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
Changes proposed in this pull request:
Replacing the
aria-labelattribute of the collapsed button of the breadcrumbs component to usearia-labelledbyinstead. This way the button references the popover's content as the element providing an accessible name.The problem with the current
aria-labelis that it doesn't describe the state information of the button.