[Menu] Fix menu being focused instead of item when opening #17506
Conversation
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
eps1lon
added
accessibility
eps1lon
commented
Sep 21, 2019
| @@ -35,7 +35,7 @@ chai.use((chaiAPI, utils) => { | |||
| currentNode !== document.documentElement && | |||
| ariaHidden === false | |||
| ) { | |||
| ariaHidden = element.getAttribute('aria-hidden') === 'true'; | |||
| ariaHidden = currentNode.getAttribute('aria-hidden') === 'true'; | |||
There was a problem hiding this comment.
🤦♂️
Good news is that this functionality will be moved into testing-library. We'll probably expose some isAccessible utility which we can use.
eps1lon
commented
Sep 21, 2019
| button.focus(); | ||
| fireEvent.click(button); | ||
| button.click(); |
There was a problem hiding this comment.
This is safer because jsodm only checks disabled on click not when dispatching a click event. See jsdom/jsdom#2665
Details of bundle changes.Comparing: 9c4c8ae...78f3143
|
|
Visual diff is expected: https://www.argos-ci.com/mui-org/material-ui/builds/54490 |
joshwooding
reviewed
Sep 22, 2019
| @@ -25,10 +25,10 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | |||
| | Name | Type | Default | Description | | |||
| |:-----|:-----|:--------|:------------| | |||
| | <span class="prop-name">anchorEl</span> | <span class="prop-type">object<br>| func</span> | | The DOM element used to set the position of the menu. | | |||
| | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> | | If `true` (default), the menu list (possibly a particular item depending on the menu variant) will receive focus on open. | | |||
| | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">true</span> | If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled children are not focusable. If you set this prop to `false` focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise. | | |||
There was a problem hiding this comment.
Hmm, I would change the last part but I can't think of an alternative right now :P
There was a problem hiding this comment.
The problem is that these "disable focus managment" props were outside contributions without a test or use case. There's probably a good reason to have them but my guess is that 99% of the time you shouldn't touch these.
oliviertassinari
approved these changes
Sep 22, 2019
| @@ -217,6 +229,7 @@ describe('<Menu /> integration', () => { | |||
| const { getAllByRole } = render( | |||
| <OpenMenu variant="selectedMenu"> | |||
| <MenuItem /> | |||
| getByRole | |||
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Closes #16644
The first (selected) item is now focused when opening instead of the
[role="menu"]itself following https://www.w3.org/TR/wai-aria-practices/#menu.As far as I can tell the the roving tabIndex is not necessary for an open/close menu. It might make more sense to move this logic into the
MenuListthat could act as the listbox implementation. This would make this component useful for composition. Right now the composition demo we have makes the menu inaccessible.I'll make a follow-up PR refactoring the Menu(List) unit test to use testing library to have enough confidence in moving a11y into MenuList.