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

Revise menu button examples to declare aria-expanded="false" when collapsed #2834

Closed
mcking65 opened this issue Oct 10, 2023 · 3 comments
Closed

Revise menu button examples to declare aria-expanded="false" when collapsed #2834

mcking65 opened this issue Oct 10, 2023 · 3 comments
Assignees
@andreancardona
Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern
Milestone
H2/2023 Content U...

Comments

@mcking65
Copy link
Contributor

mcking65 commented Oct 10, 2023 •
edited
Loading

Update the JavaScript, documentation, and regression tests for the three menubutton examples to support declaring aria-expanded=false when the menus are not visible.

Related to #2808 and #697.
@mcking65 mcking65 added enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern labels Oct 10, 2023
@mcking65 mcking65 added this to the H2/2023 Content Updates milestone Oct 10, 2023
This was referenced Oct 10, 2023
Closed
Closed
@andreancardona andreancardona mentioned this issue Oct 17, 2023
Merged
4 tasks
@Wildebrew
Copy link

Why do menu buttons need an aria-expanded attribute? There is never a state where you can expand/collapse the menu or view the menu while browsing the page. If you activate them menu button you are stuck in the menu until you take action or close it (by pressing escape), so if a button has an aria-haspopup attribute you know that activating it shos a menu and unless you are in that menu it's obviously collapsed.
I find that using aria-expanded on top of aria-haspopup just adds to verbosity/cognitive load without communicating new info.
For an expandable menu item element inside another menu obviously this is another matter altogether, an aria-expanded attribute is vital, my comment only pertains to standalone buttons that, when clicked, trigger the display of a menu widget.

@mcking65
Copy link
Contributor Author

@Wildebrew

We are making the change based on discussion in #697, which is also explained in #2808.

Esentially, all your points are valid for screen reader users who are using a keyboard but not when using touch.

mcking65 added a commit that referenced this issue Dec 17, 2023
@andreancardona @mcking65
Menu button pattern and 4 examples: Set aria-expanded to false when m…
9be3825 
…enus are closed (pull #2839)

Closes issues #697 and #2834 with the following changes:
* Revise menu button pattern to specify that aria-expanded is set to false when the menu is not displayed.
* Revise JS and documentation for 3 menu button examples and the toolbar example to set aria-expanded false when their menus are closed.
* Adjusts corresponding regression tests to ensure the state of expanded is true when the menus are open and false when the menus are closed.

---------

Co-authored-by: Matt King <[email protected]>
@mcking65
Copy link
Contributor Author

Closed via #2839. Publication is scheduled for Dec 19, 2023.

@howard-e howard-e mentioned this issue Dec 18, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andreancardona andreancardona

Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern
Projects
Menu, Menubar, and Menu Button patterns and examples development project
Status: Complete
Milestone
H2/2023 Content Updates
Development

No branches or pull requests
3 participants
@Wildebrew @mcking65 @andreancardona