Accessibility flag on the Map and Satellite buttons

Created on 20 February 2025, 17 days ago

Problem/Motivation

I'm not sure if this is something that can be fixed on Drupal's end, or if this is something Google Maps would have to fix on their end, so apologies if this is a Google problem. This issue can be closed if nothing can be done from the Drupal side of things.

Running an accessibility checker on a page containing a map, I received the following error: "ARIA required context role". Clicking through to the failing element, I was taken to the Map and Satellite buttons that occur in the top left corner of the rendered map. These buttons contain `role="menuitemradio"`, which requires a direct parent to have `role="menubar"`. While there is a parent of the button that container `menubar`, it's not the direct parent in the DOM or the accessibility tree, so the a11y checker doesn't recognize it as a valid context role.

I attached two images to the issue to show this.

Steps to reproduce

- Add a map to a page.
- Inspect the map in your browser, being sure to select the Map or Satellite button on the map.
- Look at the button tag and confirm that you see `role="menuitemradio"` on the button.
- Now look two divs above this, and notice `role="menubar"` on the div.
- Notice the extra div between the `menubar` and `menuitemradio` elements.
- Open the accessibility tree and notice that there is a `generic` element between the `menubar` and `menuitemradio` element.

Proposed resolution

- If possible, move `role="menubar"` to the direct parent of the `role="menuitemradio"` button element.
- If this isn't possible and this is an issue coming from Google Maps, close out this issue.

💬 Support request

Status

Active

Version

11.0

Component

Code

Created by

🇺🇸United States morganlyndel

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @morganlyndel
Comment 17 days ago →
🇺🇸United States morganlyndel
A related issue flagging in Google Maps is that the tags are missing alt attributes. Again, this may not be able to be fixed on the Drupal side, but I wanted to surface just in case.
Comment 17 days ago →
🇮🇹Italy itamair
thanks for reporting this @morganlyndel ... I quickly inspected this, but indeed this is not on the Drupal side.
It is all on the Google Maps way and how they are providing those map controls structure ...

Closing this as "works as designed".

Feel free to re-open if you better inspect and rather find that it is the opposite case (all due to Drupal)
Comment 16 days ago →
🇺🇸United States morganlyndel
That's what I suspected as well. I submitted reports to Google Maps for each of these issues - hopefully those kinds of requests are something they care to pay attention to and will fix. Thanks for checking into this @itamair !

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024