Merge pull request #692 from City-of-Helsinki/UHF-8532_map_accessibil…

…ity_improvements UHF-8532: Map accessibility improvements
City-of-Helsinki · Jun 20, 2023 · 212faea · 212faea
2 parents dda9406 + d4c830b
commit 212faea
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 23 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/js/embedded-content-cookie-compliance.min.js b/dist/js/embedded-content-cookie-compliance.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/js/embedded-content-cookie-compliance.js b/src/js/embedded-content-cookie-compliance.js
@@ -21,18 +21,33 @@
         iframeElement.width = attributes.width;
         iframeElement.title = attributes.title;
 
+        const skipLinkBefore = document.createElement('a');
+        skipLinkBefore.classList.add('focusable', 'skip-link');
+        skipLinkBefore.href = `#${attributes.skipLinkAfterId}`;
+        skipLinkBefore.id = attributes.skipLinkBeforeId;
+
+
+        const skipLinkAfter = document.createElement('a');
+        skipLinkAfter.classList.add('focusable', 'skip-link');
+        skipLinkAfter.href = `#${attributes.skipLinkBeforeId}`;
+        skipLinkAfter.id = attributes.skipLinkAfterId;
+
         const containerElement = document.createElement('div');
         containerElement.appendChild(iframeElement);
         if (attributes.type === 'video') {
-          containerElement.classList.add('responsive-video-container'); 
+          containerElement.classList.add('responsive-video-container');
           $(`.embedded-content-cookie-compliance.media-${id}`)
             .empty()
             .append(containerElement)
             .removeClass(`media-${id}`);
         } else if (attributes.type === 'map') {
           containerElement.classList.add('responsive-map-container');
+          skipLinkAfter.classList.add('skip-link--map--after');
+          skipLinkBefore.classList.add('skip-link--map--before');
+          skipLinkAfter.text = Drupal.t('Continue above the map', {}, { context: 'Skip link after the map for the map paragraph' });
+          skipLinkBefore.text = Drupal.t('Continue below the map', {}, { context: 'Skip link before the map for the map paragraph' });
           $(`.embedded-content-cookie-compliance.media-${id}`)
-            .replaceWith(containerElement);
+            .replaceWith(skipLinkBefore, containerElement, skipLinkAfter);
         }
       }
 

diff --git a/src/scss/06_components/navigation/_skip-link.scss b/src/scss/06_components/navigation/_skip-link.scss
@@ -20,7 +20,7 @@
   transition: transform ease-out 0.2s;
   width: max-content; // This avoids pushing the content to two rows until absolutely necessary
   z-index: 2;
-  
+
   @media (prefers-reduced-motion) {
     transition: none;
   }

diff --git a/src/scss/06_components/paragraphs/_map.scss b/src/scss/06_components/paragraphs/_map.scss
@@ -64,8 +64,8 @@ $-map-aspect-ratio-mobile: 1;
     align-items: center;
     bottom: -40px;
     display: inline-flex;
+    left: 0;
     position: absolute;
-    right: 0;
     text-decoration: underline;
   }
 }

diff --git a/templates/media/media--hel-map.html.twig b/templates/media/media--hel-map.html.twig
@@ -38,10 +38,6 @@
 {% set after_map_id = 'map-' ~ media_id ~ random() ~ '-after'|clean_id %}
 {% set before_map_id = 'map-' ~ media_id ~ random() ~ '-before'|clean_id %}
 
-<a href="#{{ after_map_id }}" id="{{ before_map_id }}" class="focusable skip-link skip-link--map--before">
-  {{ 'Continue below the map'|t({}, {'context': 'Skip link before the map for the map paragraph'}) }}
-</a>
-
 {% include '@hdbt/misc/embedded-content-cookie-compliance.twig' with {
   media_url: media_url,
   media_id: media.id,
@@ -62,15 +58,13 @@
           'src': media_url,
           'title': media_attributes.value.0['title'],
           'type': 'map',
+          'skipLinkAfterId' : after_map_id,
+          'skipLinkBeforeId' : before_map_id,
         }
       }
     }
   }
 } %}
 {{ drupal_settings }}
 
-<a href="#{{ before_map_id }}" id="{{ after_map_id }}" class="focusable skip-link skip-link--map--after">
-  {{ 'Continue above the map'|t({}, {'context': 'Skip link after the map for the map paragraph'}) }}
-</a>
-
-{{ link(link['#title'], link['#url'], link['#attributes']|merge({'class': 'map__external-link'})) }}
+{{ link(iframe_title ~ ' - ' ~ link['#title'], link['#url'], link['#attributes']|merge({'class': 'map__external-link'})) }}
diff --git a/templates/module/helfi_tpr/field--service-map-embed.html.twig b/templates/module/helfi_tpr/field--service-map-embed.html.twig
@@ -4,9 +4,11 @@
     'map__external-link',
     'link'
   ],
-  'target': '_blank',
 } %}
 
+{% set after_map_id = 'map-' ~ media_id ~ random() ~ '-after'|clean_id %}
+{% set before_map_id = 'map-' ~ media_id ~ random() ~ '-before'|clean_id %}
+
 {% if alternative_language %}
   {% set link = link|merge({'#attributes': {'lang': lang_attributes.fallback_lang, 'dir': lang_attributes.fallback_dir }}) %}
 {% endif %}
@@ -28,10 +30,12 @@
           'src': iframe_attributes['src'],
           'title': iframe_attributes['title'],
           'type': 'map',
+          'skipLinkAfterId' : after_map_id,
+          'skipLinkBeforeId' : before_map_id,
         }
       }
     }
   }
 } %}
 {{ drupal_settings }}
-{{ link(element[0]['link']['#value'], link_url, link_attributes) }}
+{{ link(iframe_attributes['title'] ~ ' - ' ~ element[0]['link']['#value'], link_url, link_attributes) }}