From 0b97d2bd303a5753f2f6988389256252b4234d8c Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Mon, 17 Jan 2022 15:17:51 +0000
Subject: [PATCH] Make map pan/zoom controls keyboard-accessible

Removes `aria-hidden` from `#map_box`, but adds it back onto the map
image tiles and pins, to allow keyboard and assistive device users to
tab through the map controls without having to wade through potentially
hundreds of map markers. After the map controls, keyboard focus passes
to the links, form filters, and list of reports in `#map_sidebar`.

Fixes mysociety/societyworks#2803.
---
 CHANGELOG.md                                       | 1 +
 templates/web/base/maps/noscript_map.html          | 4 ++--
 templates/web/base/maps/noscript_map_base_wmx.html | 4 ++--
 templates/web/base/maps/openlayers.html            | 2 +-
 templates/web/zurich/maps/noscript_map.html        | 8 ++++----
 web/js/map-OpenLayers.js                           | 9 +++++++++
 web/js/map-OpenStreetMap.js                        | 2 +-
 web/js/map-bing-ol.js                              | 2 +-
 web/js/map-cheshireeast.js                         | 2 +-
 9 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 85d00ce7f83..044225e845f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
     - Bugfixes:
         - Add ID attributes to change password form inputs.
         - Fix link deactivation for privacy policy link on privacy policy page. #3704
+        - Make map pan/zoom controls keyboard-accessible. #3751
     - Admin improvements:
         - Admin 'add user' form now always creates staff users
     - Development improvements:
diff --git a/templates/web/base/maps/noscript_map.html b/templates/web/base/maps/noscript_map.html
index 0b7431148d5..91e986c484b 100644
--- a/templates/web/base/maps/noscript_map.html
+++ b/templates/web/base/maps/noscript_map.html
@@ -1,6 +1,6 @@
 [% SET start = c.config.ADMIN_BASE_URL IF admin -%]
 <div class="noscript">
-    <div id="[% nsm_prefix %]drag">
+    <div id="[% nsm_prefix %]drag" aria-hidden="true">
         <[% map.img_type | safe %]
             alt="NW map tile" id="[% nsm_prefix %]t2.2"
             name="tile_[% map.x_tile - 1 %].[% map.y_tile - 1 %]"
@@ -23,6 +23,6 @@
             src="[% map.tiles.3 %]"
             style="top:256px; left:256px;">
     </div>
-    <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
+    <div id="[% nsm_prefix %]pins" aria-hidden="true">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
     [% INCLUDE 'maps/_compass.html' %]
 </div>
diff --git a/templates/web/base/maps/noscript_map_base_wmx.html b/templates/web/base/maps/noscript_map_base_wmx.html
index 45de9926e0b..19078ec9c5c 100644
--- a/templates/web/base/maps/noscript_map_base_wmx.html
+++ b/templates/web/base/maps/noscript_map_base_wmx.html
@@ -1,5 +1,5 @@
 <div class="noscript">
-    <div id="[% nsm_prefix %]drag">
+    <div id="[% nsm_prefix %]drag" aria-hidden="true">
         [%- FOR row IN map.tiles -%]
             [%- FOR tile IN row -%]
                 [%- top_px = tile.row_offset * map.tile_size -%]
@@ -13,6 +13,6 @@
             [%- END -%]
         [% END %]
     </div>
-    <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
+    <div id="[% nsm_prefix %]pins" aria-hidden="true">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
     [% INCLUDE 'maps/_compass.html' %]
 </div>
diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html
index 5f5a5ce4e8d..8699980bbf1 100644
--- a/templates/web/base/maps/openlayers.html
+++ b/templates/web/base/maps/openlayers.html
@@ -39,7 +39,7 @@
 [%- END -%]
 >
 </div>
-<div id="map_box" aria-hidden="true">
+<div id="map_box">
     [% pre_map %]
     <div id="map">
       [% IF noscript_map_template == 'maps/noscript_map_base_wmx.html' %]
diff --git a/templates/web/zurich/maps/noscript_map.html b/templates/web/zurich/maps/noscript_map.html
index 86cbdaec821..700e07b132b 100644
--- a/templates/web/zurich/maps/noscript_map.html
+++ b/templates/web/zurich/maps/noscript_map.html
@@ -1,7 +1,7 @@
 [% IF map.cols %]
 <div class="noscript square-map__outer">
     <div class="square-map__inner">
-        <div id="[% nsm_prefix %]drag">
+        <div id="[% nsm_prefix %]drag" aria-hidden="true">
             [%- FOR row IN map.tiles -%]
                 [%- FOR tile IN row -%]
                     [%- top_px = tile.row_offset * map.tile_size -%]
@@ -16,13 +16,13 @@
                 [%- END -%]
             [% END %]
         </div>
-        <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
+        <div id="[% nsm_prefix %]pins" aria-hidden="true">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
         [% INCLUDE 'maps/_compass.html' %]
     </div>
 </div>
 [% ELSE %]
 <div class="noscript">
-    <div id="[% nsm_prefix %]drag">
+    <div id="[% nsm_prefix %]drag" aria-hidden="true">
         <[% map.img_type | safe %]
             alt="NW map tile" id="[% nsm_prefix %]t2.2"
             name="tile_[% map.x_tile - 1 %].[% map.y_tile - 1 %]"
@@ -45,7 +45,7 @@
             src="[% map.tiles.3 %]"
             style="top:256px; left:256px;">
     </div>
-    <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
+    <div id="[% nsm_prefix %]pins" aria-hidden="true">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
     [% INCLUDE 'maps/_compass.html' %]
 </div>
 [% END %]
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index a1f80339760..296876f6b01 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -830,6 +830,7 @@ $.extend(fixmystreet.utils, {
             });
         }
         fixmystreet.markers = new OpenLayers.Layer.Vector("Pins", pin_layer_options);
+        fixmystreet.markers.div.setAttribute('aria-hidden', 'true');
         fixmystreet.markers.events.register( 'loadstart', null, fixmystreet.maps.loading_spinner.show);
         fixmystreet.markers.events.register( 'loadend', null, fixmystreet.maps.loading_spinner.hide);
         OpenLayers.Request.XMLHttpRequest.onabort = function() {
@@ -989,6 +990,7 @@ $.extend(fixmystreet.utils, {
             } else {
                 layer = new fixmystreet.map_type(fixmystreet.layer_name, layer_options);
             }
+            layer.div.setAttribute('aria-hidden', 'true');
             fixmystreet.map.addLayer(layer);
         }
 
@@ -1035,6 +1037,13 @@ $.extend(fixmystreet.utils, {
 // End maps closure
 })();
 
+OpenLayers.Control.AttributionFMS = OpenLayers.Class(OpenLayers.Control.Attribution, {
+    draw: function(){
+        OpenLayers.Control.Attribution.prototype.draw.apply(this, arguments);
+        this.div.setAttribute('aria-hidden', 'true');
+        return this.div;
+    }
+});
 
 /* Overridding the buttonDown function of PanZoom so that it does
    zoomTo(0) rather than zoomToMaxExtent()
diff --git a/web/js/map-OpenStreetMap.js b/web/js/map-OpenStreetMap.js
index 46aba1c912e..f79f2739bfb 100644
--- a/web/js/map-OpenStreetMap.js
+++ b/web/js/map-OpenStreetMap.js
@@ -1,7 +1,7 @@
 fixmystreet.maps.config = function() {
     fixmystreet.controls = [
         new OpenLayers.Control.ArgParserFMS(),
-        new OpenLayers.Control.Attribution(),
+        new OpenLayers.Control.AttributionFMS(),
         //new OpenLayers.Control.LayerSwitcher(),
         new OpenLayers.Control.Navigation(),
         new OpenLayers.Control.PermalinkFMS('map'),
diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js
index 1289316fdf3..dc128494831 100644
--- a/web/js/map-bing-ol.js
+++ b/web/js/map-bing-ol.js
@@ -1,6 +1,6 @@
 fixmystreet.maps.config = function() {
     fixmystreet.controls = [
-        new OpenLayers.Control.Attribution(),
+        new OpenLayers.Control.AttributionFMS(),
         new OpenLayers.Control.ArgParserFMS(),
         new OpenLayers.Control.Navigation(),
         new OpenLayers.Control.PermalinkFMS('map'),
diff --git a/web/js/map-cheshireeast.js b/web/js/map-cheshireeast.js
index 07bf01a3c21..f682a808ab5 100644
--- a/web/js/map-cheshireeast.js
+++ b/web/js/map-cheshireeast.js
@@ -1,6 +1,6 @@
 fixmystreet.maps.config = function() {
     fixmystreet.controls = [
-        new OpenLayers.Control.Attribution(),
+        new OpenLayers.Control.AttributionFMS(),
         new OpenLayers.Control.ArgParserFMS(),
         new OpenLayers.Control.Navigation(),
         new OpenLayers.Control.PermalinkFMS('map'),