You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Action menu items are not reading for screen readers.
Description
Action menu should be using a roving tabindex not aria-activedescendant because of cross-root ARIA limitations as well as lack of iOS support.
The sp-menu that action menu uses was refactored to use a roving tabindex, and the numpad keys fix that was made in action menu are now applied to the focus group controller which the roving tabindex controller uses.
VoiceOver could not read the menu items when navigated via keyboard because of the cross-root aria issues above. Using the same roving tabindex controller that other components in our repo use, allows us to ensure roving tabindex and keyboard navigation is accessible and consistent across all components.
Menus with selects and menu groups should function like the menu groups in the Editor Menubar Example from the WAI ARIA APG
Please note that there will be VRT differences where open menus that didn't used to have focus now do. Menus that are opened via keyboard are supposed to set focus on a menu item.
Does screenreader read menuitems? (resolves#4556 and without regression on #3751)
Notice that the menu opens and focus is on the first item.
Press Down Arrow.
Notice that the focus is on the second item.
Types of changes
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
[] Breaking change (fix or feature that would cause existing functionality to change) _This change will affect combobox, but combobox was already inaccessible. See RFC for Accessible Menu navigation for more information. _
Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)
If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.
If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.
Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.
In the Picker > Matching value and Picker > Matching itemText examples, when the Picker opens with a value selected for the first time, focus is going to the first menuitem rather than the selected value. On subsequent opening, the selected value will receive focus. It seems like the selected value for the menu does not initialize until it is rendered.
With MenuItem > Submenu, Space key scrolls (per @jnurthen comment above), and with Enter key, the submenu opens, but focus does not move to the submenu. Subsequent keyboard navigation using arrow keys, navigates the current menu rather than the opened submenu. Similarly, activating a submenu parent item using the VoiceOver cursor fails to focus the submenu.
Using the VoiceOver on iOS to test the ActionMenu > Submenu story, after opening the menu in a tray, double tapping "Select some items" to activate the submenu closes the tray rather than opening the submenu. The submenu story is similarly broken without VoiceOver on.
Using VoiceOver on iOS to test any of the examples that open the menu in a tray like ActionMenu >Default story, double tapping to open fails to focus an item in the menu, and double tapping to select an item or to dismiss the menu using the visually hidden dismiss button fails to restore focus to the button element that opened the menu.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
nikkimk
requested review from
jnurthen,
majornista and
Rajdeepc
and removed request for
Rajdeepc
Action menu items are not reading for screen readers.
Description
Action menu should be using a roving tabindex not
aria-activedescendantbecause of cross-root ARIA limitations as well as lack of iOS support.The
sp-menuthat action menu uses was refactored to use a roving tabindex, and the numpad keys fix that was made in action menu are now applied to the focus group controller which the roving tabindex controller uses.Related issue(s)
Motivation and context
VoiceOver could not read the menu items when navigated via keyboard because of the cross-root aria issues above. Using the same roving tabindex controller that other components in our repo use, allows us to ensure roving tabindex and keyboard navigation is accessible and consistent across all components.
How has this been tested?
selectsand menu groups should function like the menu groups in the Editor Menubar Example from the WAI ARIA APGDoes screenreader read menuitems? (resolves #4556 and without regression on #3751)
Can you use a screenreader to click a menuitem? (resolves #4997)
Does keyboard navigation of menuitems work as it should? (closes #4557)
Types of changes
Checklist
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against
main.