Improve Media Bubble Menu accessible labels
What does this MR do and why?
Improve Media Bubble Menu accessible labels
The media_bubble_menu uses a div[role="group"] to contain two label + input groups. This was identified as a possible accessibility issue because the inputs' native roles might be ignored. MR adds an accessible container label and an autofocus on the first input after confirming the native roles were announced properly to the big three screen readers.
Changelog: changed
References
MR closes https://gitlab.com/gitlab-org/gitlab/-/issues/511623
Screenshots or screen recordings
Attached video shows the accessible label behavior in MacOS VoiceOver + Safari. This behavior and the child autofocus was tested with the following pairings:
- MacOS: VO + Safari
- Win11: Chrome + JAWS | NVDA
- Win11: Firefox + NVDA
How to set up and validate locally
Edited by Trevor Pierce