-
Notifications
You must be signed in to change notification settings - Fork 156
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
feat: Provide accessible name to menu in button-dropdown #1403
Conversation
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## main #1403 +/- ##
=======================================
Coverage 93.79% 93.79%
=======================================
Files 639 639
Lines 17228 17230 +2
Branches 5664 5665 +1
=======================================
+ Hits 16159 16161 +2
Misses 996 996
Partials 73 73
☔ View full report in Codecov by Sentry. |
85600c7
to
1336d3d
Compare
@@ -259,7 +263,8 @@ const InternalButtonDropdown = React.forwardRef( | |||
position="static" | |||
role="menu" | |||
decreaseTopMargin={true} | |||
ariaLabelledby={hasHeader ? headerId : undefined} | |||
ariaLabel={ariaLabel} | |||
ariaLabelledby={hasHeader ? headerId : shouldLabelWithTrigger ? triggerId : undefined} |
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.
What is header and why trigger ARIA label is preferred over the header?
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.
header
is a combination of title
and description
, these properties are available only internally and can be used with variant: 'navigation'
inside TopNavigation.
Priorities are the following:
- if there is a header inside dropdown, than it is used to label menu list
- else if we have aria-label - use it
- else if the variant is not
icon
orinline-icon
- label by trigger text
In case of a split button variant I assume there will be an aria-label, because trigger itself is an icon and we can't auto-label dropdown with it
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.
I would add a few unit tests to ensure the labels are assigned correctly for icon and non-icon variants
1336d3d
to
3cc113e
Compare
3cc113e
to
8205d48
Compare
8205d48
to
50d9bdd
Compare
Description
Items with role="menu" need an accessible name. We will re-use trigger button label for normal and primary variants or aria-label if it is provided.
Related links, issue #, if available: AWSUI-21666
How has this been tested?
New unit tests added
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md
.CONTRIBUTING.md
.Security
checkSafeUrl
function.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.