Add <noscript> tag & hide map from screenreaders.

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

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'

css/map.css

@@ -1,4 +1,7 @@
 .openy-map-canvas {
     height: 300px;
     width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

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);
+  }
+}

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';

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 <noscript> 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']);

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">