[docs] Fix a11y in Menu demos #30378
Conversation
ZeeshanTamboli
added
accessibility
There was a problem hiding this comment.
The a11y of this demo https://deploy-preview-30378--material-ui.netlify.app/components/menus/#account-menu seems wrong too.
oliviertassinari
changed the title
aria-controls in Basic Menu demo. aria-controls in menu demo
oliviertassinari
changed the title
aria-controls in menu demo
I improved a11y in the Menu demos which had low score and the score of each of them got better. |
ZeeshanTamboli
changed the title
ZeeshanTamboli
requested review from
oliviertassinari,
michaldudak and
mnajdova
| @@ -17,7 +17,7 @@ export default function BasicMenu() { | |||
| <div> | |||
| <Button | |||
| id="basic-button" | |||
| aria-controls="basic-menu" | |||
| aria-controls={open ? 'basic-menu' : undefined} | |||
There was a problem hiding this comment.
👍 Looks correct based on https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls
A combobox element has aria-controls set to a value that refers to the element that serves as the popup. The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.
There was a problem hiding this comment.
I guess that in our case, it's even more than non-visible => non-existent.
On a different note, the thread in w3c/aria#995 (comment) suggests that the attribute is close to poop.
|
@ZeeshanTamboli Great, well done, thanks! |
|
Thank you for submitting this 🙏🏼 |
Closes #30125
Improves the Lighthouse accessibility score from 84 to 94 of this demo.
https://deploy-preview-30378--material-ui.netlify.app/components/menus/