darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-06-06 06:20:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add accessible name and description to map

Browse Source 
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.
This commit is contained in:
Tom Byers
2021-08-27 11:18:56 +01:00
parent a3854e49b6
commit 23f0bb096e
1 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/templates/views/broadcast/partials/area-map-javascripts.html
View File

@@ -29,16 +29,51 @@
var mapElement = document.getElementById('area-list-map');
var mapContainer = mapElement.parentNode;
var grandparent = mapContainer.parentNode;
var isInDetails = grandparent.className.indexOf('govuk-details') > -1;
var areas = document.querySelectorAll('.area-list > .area-list-item');
var description = document.createElement('p');
var descriptionText = 'Use the arrow keys to move the map. Use the buttons to zoom the map in or out';
var labelPrefix = 'Map of the United Kingdom, showing the areas for';
var trimRegExp = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
var details;
var label;
function getStringFromAreas (areas) {
var areasLen = areas.length;
var areaStrings = [];
var idx;
if (areasLen === 1) { return areas[0].textContent.replace(trimRegExp, ''); }
for (idx = 0; idx < areasLen; idx++) {
areaStrings.push(areas[idx].textContent.replace(trimRegExp, ''));
}
// always join last 2 areas with 'and', the rest with commas
return areaStrings.slice(0, areasLen - 1).join(', ') + ' and ' + areaStrings[areasLen - 1];
};
description.appendChild(
document.createTextNode(descriptionText)
);
description.setAttribute('id', 'area-list-map__description');
description.className = 'govuk-visually-hidden';
mapContainer.insertBefore(description, mapElement.nextSibling);
// if element is inside a details element then to make the map render correctly we open the details element
// and set up the map before closing the details map after
grandparent = mapElement.parentElement.parentElement;
if (grandparent.className.split(/\s+/).indexOf('govuk-details') > -1) {
if (isInDetails) {
details = grandparent;
details.open = true;
}
label = labelPrefix + " " + getStringFromAreas(areas);
mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
mapElement.setAttribute('role', 'region');
mapElement.setAttribute('aria-label', label);
mapElement.setAttribute('aria-describedby', 'area-list-map__description');
var mymap = L.map(
'area-list-map',
@@ -58,7 +93,7 @@
);
// if element is inside a details element then close the details element
if (details) {
if (isInDetails) {
details.open = false;
}