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

Menu: A11y add option to change default role of menuitem to additionally support menuitemradio and menuitemcheckbox #14163

Closed
bsteffl opened this issue Nov 15, 2018 · 1 comment · Fixed by #14165
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@bsteffl
Copy link

bsteffl commented Nov 15, 2018

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

According to the WCAG guide practices you can have a menu item have any of the following roles: menuitem, menuitemradio, or menuitemcheckbox.

What is the current behavior?

Currently you can only have the default role of menuitem which makes it difficult to support a single selected option. See Editor Menubar Example of a menu with menuitemradio's.

For example if you wanted to create a menu that was used for sorting and shows the currently selected sorted option you need to make the menuitems behave like radios in order to be WCAG compliant.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://stackblitz.com/edit/angular-d75nv1

image

What is the use-case or motivation for changing an existing behavior?

Allow greater support for different types of menus. This will allow you to have a menu that behaves with radios and checkboxes. This is also included in the WCAG Aria Practices examples.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7.0.0

Is there anything else we should know?

Would be nice to also then set the selected option which would add aria-checked="true".

@bsteffl bsteffl changed the title Menu A11y add option to change default role of menuitem to additionally support menuitemradio and menuitemcheckbox Menu: A11y add option to change default role of menuitem to additionally support menuitemradio and menuitemcheckbox Nov 15, 2018
@crisbeto crisbeto self-assigned this Nov 15, 2018
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Nov 15, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 15, 2018
Based on the a11y guidelines, the menu items can have the `menuitemradio` and `menuitemcheckbox` roles, instead of `menuitem`. These changes allow for the consumer to set an alternate role.

Fixes angular#14163.
jelbourn pushed a commit that referenced this issue Nov 27, 2018
Based on the a11y guidelines, the menu items can have the `menuitemradio` and `menuitemcheckbox` roles, instead of `menuitem`. These changes allow for the consumer to set an alternate role.

Fixes #14163.
jelbourn pushed a commit that referenced this issue Dec 3, 2018
Based on the a11y guidelines, the menu items can have the `menuitemradio` and `menuitemcheckbox` roles, instead of `menuitem`. These changes allow for the consumer to set an alternate role.

Fixes #14163.
josephperrott pushed a commit to josephperrott/components that referenced this issue Jan 14, 2019
Based on the a11y guidelines, the menu items can have the `menuitemradio` and `menuitemcheckbox` roles, instead of `menuitem`. These changes allow for the consumer to set an alternate role.

Fixes angular#14163.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants