mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-06 14:30:57 -04:00
23f0bb096e
The map is already in the tabbing order, so can be moved to by tabbing and by programs like screen readers or speech recognition, but it doesn't have an accessible name so when assistive tech' that requires this for identification gets the contents read out instead, which is confusing. This adds an accessible name, via aria-label, made out of the areas the alert targets. This also adds some help text, explaining how to use the map via aria-describedby. This is a pretty common pattern and is used in native UI like selectboxes where a range of commands are available to control the UI 'widget'. Using aria-describedby means the help text is not used every time the widget is focused but is available if the user gets stuck. For example, Voiceover announces it if the widget is focused but not interacted with for a period of time, or when a shortcut key is pressed. Finally, I also added a role of 'region' because when I tested with the NVDA screen reader, the accessible name wasn't announced but this fixed that. I think it's because the div isn't being recognised as having a role without it being set explicitly and is therefore ignored.