202408 skiplink ios keyboard

js/skip-link.js

@@ -0,0 +1,26 @@
+/**
+ * @file Handles IOS bug when trying to use skip link with keyboard.
+ */
+
+(function localgovSkiplink(Drupal) {
+  Drupal.behaviors.skiplink = {
+    attach: function (context) {
+      const [anchor] = once('maincontent', '[href="#main-content"]', context);
+      if (!anchor) {
+        return;
+      }
+      anchor.addEventListener('keydown', (e) => {
+        focusContent(e);
+      });
+
+      function focusContent(e) {
+        const { key } = e;
+        if (key === 'Enter') {
+          var mainContent = document.querySelector('#main-content');
+          mainContent.focus();
+          mainContent.setAttribute('tabindex', 0);
+        }
+      }
+    }
+  };
+}(Drupal));

localgov_base.libraries.yml

@@ -317,3 +317,10 @@ add-to-calendar:
   dependencies:
     - core/drupal
     - core/once
+
+skip-link:
+  js:
+    js/skip-link.js: {}
+  dependencies:
+    - core/drupal
+    - core/once

localgov_base.theme

@@ -197,3 +197,10 @@ function localgov_base_preprocess_container(&$variables) {
 function localgov_base_form_preview_link_entity_form_alter(&$form, $form_state, $form_id) {
   $form['#attached']['library'][''] = 'localgov_base/preview-link';
 }
+
+/**
+ * Implements hook_preprocess_html().
+ */
+function localgov_base_preprocess_html(&$variables) {
+  $variables['#attached']['library'][] = 'localgov_base/skip-link';
+}

templates/layout/page--moderngov-template.html.twig

@@ -6,7 +6,9 @@
   {breadcrumb}
 </div>
 
-<main class="main" id="main-content"> {# The "skip to content" link jumps to here. #}
+<main class="main">
+  {# The "skip to content" link jumps to here. #}
+  <a id="main-content" />
 
   <div class="lgd-container">
       <div class="lgd-row">

templates/layout/page.html.twig

@@ -98,7 +98,9 @@
 
 {{ page.messages }}
 
-<main class="main" id="main-content"> {# The "skip to content" link jumps to here. #}
+<main class="main">
+  {# The "skip to content" link jumps to here. #}
+  <a id="main-content" />
 
   {% if has_content_top %}
     {{ page.content_top }}