This issue aims to address accessibility deficiencies in our button component as per W3C guidelines.
The component currently does not meet the accessibility standards outlined in the W3C documentation.
The goal is to ensure the component is accessible to all users, including those using assistive technologies.
Ensure that all unchecked items in this checklist should be addressed.
menubutton
[ ] Optionally, the element with role button has a value specified for aria-controls that refers to the element with role menu.
menu
Enter:
[ ] When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
Otherwise, activates the item and closes the menu.
Down Arrow:
[ ] When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the first item in the submenu.
[ ] If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's menu element is:
[ ] Contained inside the same menu element as its parent menuitem.
[ ] Is the sibling element immediately following its parent menuitem.
[ ] If a menubar has a visible label, the element with role menubar has aria-labelledby set to a value that refers to the labelling element. Otherwise, the menubar element has a label provided by aria-label.
[ ] If a menubar is vertically oriented, it has aria-orientation set to vertical. The default value of aria-orientation for a menubar is horizontal.
[ ] An element with role menu either has:
[ ] aria-labelledby set to a value that refers to the menuitem or button that controls its display.
nakayan5
commented
4 months ago
Description
This issue aims to address accessibility deficiencies in our button component as per W3C guidelines. The component currently does not meet the accessibility standards outlined in the W3C documentation.
The goal is to ensure the component is accessible to all users, including those using assistive technologies. Ensure that all unchecked items in this checklist should be addressed.
menubutton
menu
Enter:
Down Arrow:
[ ] If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's menu element is:
[ ] When a menuitemcheckbox or menuitemradio is checked, aria-checked is set to true.
[ ] All separators should have aria-orientation consistent with the separator's orientation.
[ ] If a menubar has a visible label, the element with role menubar has aria-labelledby set to a value that refers to the labelling element. Otherwise, the menubar element has a label provided by aria-label.
[ ] If a menubar is vertically oriented, it has aria-orientation set to vertical. The default value of aria-orientation for a menubar is horizontal.
[ ] An element with role menu either has:
[ ] A label provided by aria-label.
[ ] If a menu is horizontally oriented, it has aria-orientation set to horizontal. The default value of aria-orientation for a menu is vertical.
Problem Statement/Justification
improve accessibility
Proposed Solution or API
No response
Alternatives
No response
Are you willing to participate in implementing this feature and create a pull request include the implementation?
None
Additional Information
No response