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

[BITV] 9.4.1.2/2.3 - The "Open settings menu" menu - The aria-expanded attribute was correctly applied to the menu button, but the attribute always has the value "true" which is incorrect. (9) #37095

Closed
13 tasks done
AndyScherzinger opened this issue Mar 7, 2023 · 4 comments
Assignees
Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility

Comments

@AndyScherzinger
Copy link
Member

AndyScherzinger commented Mar 7, 2023

Also, the use of the "nav" element only for the list of menu items is not correct. The "nav" element should also contain the menu button itself. See https://inclusive-components.design/menus-menu-buttons/ for more information.

Additionally, it is recommended not to use the status (open/close) of the menu as part of the accessible name. This status is communicated through the aria-expanded attribute.

The user's online status ("online", "do not disturb" etc.) should be reflected in the accessible name (e. g. instead of "open settings menu" the name should be something like "settings menu - BB - do not disturb" or "BB, do not disturb - settings").

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-bfbf07e5c3-v2-n3

@AndyScherzinger AndyScherzinger added 1. to develop Accepted and waiting to be taken care of accessibility labels Mar 7, 2023
@Pytal Pytal self-assigned this Aug 29, 2023
@Pytal Pytal added 2. developing Work in progress and removed 1. to develop Accepted and waiting to be taken care of labels Aug 29, 2023
@Pytal Pytal added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Aug 30, 2023
@AndyScherzinger AndyScherzinger changed the title [BITV] 9.4.1.2/2.3 - The "Open settings menu" menu - The aria-expanded attribute was correctly applied to the menu button, but the attribute always has the value "true" which is incorrect. Also, the use of the "nav" element only for the list of menu items is not correct. The "nav" element should also contain the menu button itself. See https://inclusive-components.design/menus-menu-buttons/ for more information. (9) [BITV] 9.4.1.2/2.3 - The "Open settings menu" menu - The aria-expanded attribute was correctly applied to the menu button, but the attribute always has the value "true" which is incorrect. (9) Sep 7, 2023
@Pytal
Copy link
Member

Pytal commented Sep 7, 2023

The implementation from https://inclusive-components.design/menus-menu-buttons/ suggests markup like
image
explicitly without menu semantics due to:
image

while W3C (https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links/#sc1_label) does suggest using menu semantics
image

How shall we proceed and determine which approach to use @michaelnissenbaum ?

@michaelnissenbaum
Copy link

The "Open settings menu" refers to a FlyOut menu, and you can find guidance on how to implement it at https://www.w3.org/WAI/tutorials/menus/flyout/. ARIA roles "menu" and "menuitem" are typically used for application menus, which we do not have in this context. You can refer to https://www.w3.org/TR/wai-aria-1.2/#menu, which states, "The menu role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application." Additionally, it's important to note that in application menus, navigation is typically done using arrow keys rather than the TAB key.

@Pytal
Copy link
Member

Pytal commented Sep 14, 2023

Thanks @michaelnissenbaum

Would you consider the global search, notifications, and contacts search menus application menus?
image

@michaelnissenbaum
Copy link

All three elements are not application menus. All three should be implemented as buttons (not as links) with the "aria-expanded" attribute.

@Pytal Pytal added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Oct 16, 2023
@Pytal Pytal closed this as completed Oct 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility
Projects
None yet
Development

No branches or pull requests

3 participants