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

Fix issues with JS added to map code

Browse Source 
This addresses the following issues with the JS:
1. fix string listing the alert areas so their
  'remove' text isn't included
2. use `!==` instead of `>` for index comparison
3. put code for adding the label and description
into separate functions

Those issues are (matching the list above):
1. https://github.com/alphagov/notifications-admin/pull/3996#discussion_r699235376
2. https://github.com/alphagov/notifications-admin/pull/3996#discussion_r699220672
3. https://github.com/alphagov/notifications-admin/pull/3996#discussion_r699230038
This commit is contained in:
Tom Byers
2021-09-01 20:26:12 +01:00
parent 23f0bb096e
commit e2af2f63a4
1 changed files with 63 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,39 +29,13 @@
var mapElement = document.getElementById('area-list-map');
var mapContainer = mapElement.parentNode;
var grandparent = mapContainer.parentNode;
var isInDetails = grandparent.className.indexOf('govuk-details') > -1;
var grandparent = mapElement.parentNode.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
if (isInDetails) {
@@ -69,11 +43,69 @@
details.open = true;
}
label = labelPrefix + " " + getStringFromAreas(areas);
function addAriaLabel (mapElement) {
function getLabelPrefix (areas) {
var labelPrefix = ['Map of the United Kingdom, showing the ', ' for'];
if (areas.length === 1) {
return labelPrefix[0] + 'area' + labelPrefix[1];
} else {
return labelPrefix[0] + 'areas' + labelPrefix[1];
}
};
function getStringOfAreas (areas) {
var areasLen = areas.length;
var areaStrings = [];
var idx;
function getAreaName (area) {
var areaString = '';
var childNodesLen = area.childNodes.length;
var childNode;
while (childNodesLen--) {
childNode = area.childNodes[childNodesLen];
if (childNode.nodeType === 3) { areaString += childNode.nodeValue; } // only use text nodes
}
return areaString.replace(trimRegExp, '')
};
if (areasLen === 1) { return getAreaName(areas[0]); }
for (idx = 0; idx < areasLen; idx++) {
areaStrings.push(getAreaName(areas[idx]));
}
// always join last 2 areas with 'and', the rest with commas
return areaStrings.slice(0, areasLen - 1).join(', ') + ' and ' + areaStrings[areasLen - 1];
};
label = getLabelPrefix(areas) + " " + getStringOfAreas(areas);
mapElement.setAttribute('aria-label', label);
};
function addAriaDescription (mapElement) {
var mapContainer = mapElement.parentNode;
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';
description.appendChild(
document.createTextNode(descriptionText)
);
description.setAttribute('id', 'area-list-map__description');
description.className = 'govuk-visually-hidden';
mapContainer.insertBefore(description, mapElement.nextSibling);
mapElement.setAttribute('aria-describedby', 'area-list-map__description');
};
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');
addAriaLabel(mapElement);
addAriaDescription(mapElement);
var mymap = L.map(
'area-list-map',