Improve/Assess Map Accessibility

[jcfilben]

We should explore what accessibility changes we can make to map to improve the experience. In a previous ticket (#33) the following accessibility notes were gathered.

VoiceOver was used as the screenreader.

Assess the following functionalities (for keyboard and screen reader):

• Accessing pin information (coordinates, other aspects of the data that might be helpful)
  • Can be reached with "Tab" key
  • By default, reads aria-label from icon and any other content within
  • If a custom aria-label is added to the pin, that will be read. If specific information is needed, provide that via a custom aria-label.
• Accessing cluster information (coordinates, number of items, status if applicable, etc.)
  • Can be reached with "Tab" key
  • By default, reads aria-label from icon and count of cluster
  • If a custom aria-label is added to the cluster, that will be read. If specific information is needed, provide that via a custom aria-label.
• Accessing popup info for pin + cluster, association of the popup with that cluster/pin
  • Popup can be reached with Tab key but it's at the end of the tab order (since it's the last added layer) as opposed to associated with the cluster/pin it opened next to.
  • Clicking on a cluster/pin opens the popup but doesn't give any indication that anything happened.
  • TO DO: Is there any way we can ensure screen reader users know the popup has opened/what info is in it?
• Zoom in to a cluster
  • Because we have disabled the "zoomToBoundsOnClick" on the cluster, the only way to zoom in is by tabbing to the zoom in/out controls. This is a bit tedious.
  • TO DO: Check if there is any standardized keyboard shortcut from leaflet to zoom in
• Zoom in/zoom out/jump to bounds controls on map
  • These controls can be accessed with "Tab" key.
  • You have to tab through all pins/clusters on the Map first though.
  • After interacting with the zoom controls with ctrl+option+space focus is unexpectedly moved back to the map container. TO DO: Look into ways to avoid this or alert the user of where the focus has shifted. Otherwise, this might be a WCAG violation.
• Quick way to "leave" map once tab focus is in the map and continue onto rest of page content
  • You have to Tab through the entire Map if a keyboard user, or you can use screen reader quick commands if you're a screen reader user to jump to a new page section
• Announce when you enter the Map:
  • By default, when focus is moved to the map container the screenreader reads out all the clusters/pins that are on the map. There is no indication that the user is on a map container.
  • TO DO: Explore Grommet's announce context?
• Add to docs: Map should be a secondary visualization, but a data table view should also be provided for a more comprehensive accessible experience: Add accessibility note to README #60
• Demo app should demonstrate toggling from DataTable to Map view: Map - GLCP MVP - Number of devices by location (no status), data provided in GeoJSON, most granular level = city. hpe-design-system#3457
• Check any screen reader behavior differences of a map with just pins vs a map with clusers

Leaflet's accessibility guide: https://leafletjs.com/examples/accessibility/