DP-31798: A11y: Hide the map from keyboard and AT users (#1881)

* DP-31798: A11y: Hide the map from keyboard and AT users

* DP-31798: A11y: Hide the map from keyboard and AT users

* Add skip link

* style skip link and its target

---------

Co-authored-by: Yukiko Gannett <yukikogannett@gmail.com>

changelogs/DP-31798.yml

@@ -0,0 +1,6 @@
+Changed:
+  - project: Patternlab
+    component: MappedLocations
+    description: A11y - Hide the map from keyboard and AT users. (#1881)
+    issue: DP-31798
+    impact: Patch

packages/assets/scss/03-organisms/_mapped-locations.scss

@@ -32,6 +32,22 @@
         height: 500px;
       }
     }
+
+    // skip link
+
+    @include ma-skip-link;
+
+    &__skip-link {
+      // override mixin to take advantage of flexbox on map.
+      margin-top: 0;
+      float: none;
+
+      flex: 0 1 auto;
+    }
+
+    &__skip-link_target {
+      flex: 0 1 auto;
+    }
   }
 
   &__aside {

packages/patternlab/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.twig

@@ -24,9 +24,14 @@
     </div>
   {% endif %}
   {% if mappedLocations.leafletMap %}
-    <div class="ma__mapped-locations__map">
+    <div class="ma__mapped-locations__map" aria-hidden="true">
+      {% set id = 'dataviz-' ~ random(9999) %}
+      <a class="ma__mapped-locations__map__skip-link js-skiplink" href="#map_{{ id }}">Skip this map.</a>
       {% set leafletMap = mappedLocations.leafletMap %}
       {% include "@molecules/map-leaflet.twig" %}
+      <div class="ma__mapped-locations__map__skip-link_target js-skiplink-target">
+        <a id="map_{{ id }}" tabindex="-1">You skipped the map.</a>
+      </div>
     </div>
   {% endif %}
 </section>