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

feat: Provide accessible name to menu in button-dropdown #1403

Merged
merged 5 commits into from
Aug 24, 2023

Conversation

Al-Dani
Copy link
Member

@Al-Dani Al-Dani commented Aug 2, 2023

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

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov
Copy link

codecov bot commented Aug 2, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (e032e30) 93.79% compared to head (5141cc6) 93.79%.

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           
Files Changed Coverage Δ
src/internal/components/options-list/index.tsx 97.14% <ø> (ø)
src/button-dropdown/internal.tsx 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@Al-Dani Al-Dani marked this pull request as ready for review August 2, 2023 17:28
@Al-Dani Al-Dani requested a review from a team as a code owner August 2, 2023 17:28
@Al-Dani Al-Dani requested review from pan-kot and removed request for a team August 2, 2023 17:28
@@ -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}
Copy link
Member

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?

Copy link
Member Author

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 or inline-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

Copy link
Member

@pan-kot pan-kot left a 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

@Al-Dani Al-Dani merged commit 79daf73 into main Aug 24, 2023
24 checks passed
@Al-Dani Al-Dani deleted the dropdown-auto-label branch August 24, 2023 11:50
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.

2 participants