From e9ac23c7a894645aa26e154cf5378a206d78e400 Mon Sep 17 00:00:00 2001
From: Yaroslav Levchenko <yaroslavl@imagexmedia.com>
Date: Fri, 26 Jun 2026 18:21:27 +0200
Subject: [PATCH] Add <noscript> tag & hide map from screenreaders.

---
 config/install/openy_map.settings.yml |  3 +++
 config/schema/openy_map.schema.yml    | 11 +++++++++++
 css/map.css                           |  3 +++
 openy_map.install                     | 19 ++++++++++++++++---
 src/Element/OpenYMap.php              |  4 ++++
 src/Form/SettingsForm.php             | 10 ++++++++++
 templates/openy-map.html.twig         |  6 +++++-
 7 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/config/install/openy_map.settings.yml b/config/install/openy_map.settings.yml
index b0a2668..8f7b030 100644
--- a/config/install/openy_map.settings.yml
+++ b/config/install/openy_map.settings.yml
@@ -1,4 +1,7 @@
 map_engine: leaflet
+noscript_text:
+  value: 'This map shows location pins for nearby locations. To use it, please enable JavaScript in your browser.'
+  format: plain_text
 distance_limit_units: ml
 leaflet:
   base_layer: OpenStreetMap.Mapnik
diff --git a/config/schema/openy_map.schema.yml b/config/schema/openy_map.schema.yml
index d33e2d6..c9e226d 100644
--- a/config/schema/openy_map.schema.yml
+++ b/config/schema/openy_map.schema.yml
@@ -2,6 +2,17 @@ openy_map.settings:
   type: config_object
   label: 'Openy Map Settings'
   mapping:
+    noscript_text:
+      type: mapping
+      label: 'No-script message'
+      mapping:
+        value:
+          type: text
+          label: 'Text'
+          translatable: true
+        format:
+          type: string
+          label: 'Text format'
     default_tags:
       type: sequence
       label: 'Default Tags'
diff --git a/css/map.css b/css/map.css
index 3ec6e74..03150ef 100644
--- a/css/map.css
+++ b/css/map.css
@@ -1,4 +1,7 @@
 .openy-map-canvas {
     height: 300px;
     width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
diff --git a/openy_map.install b/openy_map.install
index f8242cb..aad9e06 100644
--- a/openy_map.install
+++ b/openy_map.install
@@ -126,12 +126,12 @@ function openy_map_update_8006() {
   $openy_map_config_leaflet_base_layer = $config_factory->getEditable('openy_map.settings')->get('leaflet.base_layer');
   if ($openy_map_config_leaflet_base_layer == 'Wikimedia'){
     $config_factory->getEditable('openy_map.settings')
-    ->set('leaflet.base_layer', 'OpenStreetMap.Mapnik')
-    ->save(TRUE);
+      ->set('leaflet.base_layer', 'OpenStreetMap.Mapnik')
+      ->save(TRUE);
   }
 }
 
- /**
+/**
  * Update path to icons.
  */
 function openy_map_update_8007() {
@@ -154,3 +154,16 @@ function openy_map_update_8008() {
 function openy_map_update_8009() {
   _openy_map_absolutize_config_icon_urls();
 }
+
+/**
+ * Add noscript_text configuration.
+ */
+function openy_map_update_8010() {
+  $config = \Drupal::configFactory()->getEditable('openy_map.settings');
+  if ($config->get('noscript_text') === NULL) {
+    $config->set('noscript_text', [
+      'value' => 'This map shows location pins for nearby locations. To use it, please enable JavaScript in your browser.',
+      'format' => 'plain_text',
+    ])->save(TRUE);
+  }
+}
diff --git a/src/Element/OpenYMap.php b/src/Element/OpenYMap.php
index b6c7bea..8e0168a 100644
--- a/src/Element/OpenYMap.php
+++ b/src/Element/OpenYMap.php
@@ -58,6 +58,10 @@ public static function processElement(array $element) {
         break;
     }
     $element['#attached']['drupalSettings']['openyMap'] = $element['#element_variables'];
+    $noscript = $settings->get('noscript_text');
+    if (!empty($noscript['value'])) {
+      $element['#noscript_text'] = check_markup($noscript['value'], $noscript['format'] ?? 'plain_text');
+    }
     $tags = $settings->get('default_tags');
     $element['#attached']['drupalSettings']['openyMapSettings']['default_tags'] = array_values(array_filter($tags));
     $element['#cache']['tags'][] = 'config:openy_map.settings';
diff --git a/src/Form/SettingsForm.php b/src/Form/SettingsForm.php
index f666c06..34cb045 100644
--- a/src/Form/SettingsForm.php
+++ b/src/Form/SettingsForm.php
@@ -68,6 +68,15 @@ public function buildForm(array $form, FormStateInterface $form_state) {
     $config = $this->config('openy_map.settings');
     $form_state->setCached(FALSE);
 
+    $noscript = $config->get('noscript_text');
+    $form['noscript_text'] = [
+      '#type' => 'text_format',
+      '#title' => $this->t('No-script message'),
+      '#description' => $this->t('Message shown inside a &lt;noscript&gt; tag when JavaScript is disabled. Displayed in place of the map canvas.'),
+      '#default_value' => $noscript['value'] ?? $this->t('This map shows location pins for nearby locations. To use it, please enable JavaScript in your browser.'),
+      '#format' => $noscript['format'] ?? 'plain_text',
+    ];
+
     $form['map_engine_title'] = [
       '#markup' => '<h2>' . $this->t('Map provider') . '</h2>',
     ];
@@ -348,6 +357,7 @@ public function submitForm(array &$form, FormStateInterface $form_state) {
       $type_icons[$id] = $form_state->getValue($id . '_icon');
     }
 
+    $config->set('noscript_text', $form_state->getValue('noscript_text'));
     $config->set('map_engine', $form_state->getValue('map_engine'));
     $config->set('distance_limit_units', $form_state->getValue('distance_limit_units'));
     $config->set('leaflet.location', $form_state->getValue('leaflet')['location']);
diff --git a/templates/openy-map.html.twig b/templates/openy-map.html.twig
index 892bf99..ae55f84 100644
--- a/templates/openy-map.html.twig
+++ b/templates/openy-map.html.twig
@@ -1,5 +1,9 @@
 <div class="openy-map-wrapper">
-  <div class="openy-map-canvas openy-map map"></div>
+  <div class="openy-map-canvas openy-map map" aria-hidden="true">
+    {% if element['#noscript_text'] %}
+      <noscript>{{ element['#noscript_text'] }}</noscript>
+    {% endif %}
+  </div>
   {% if element['#show_controls'] %}
   <div class="row">
     <div class="map_controls col-lg-12">