Merge pull request #79 from essexcountycouncil/202408_tab_order_LP_126

202408 tab order lp 126
essexcountycouncil · Aug 19, 2024 · 5fd44ea · 5fd44ea
2 parents d682c2e + aa5cffa
commit 5fd44ea
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 4 deletions.
diff --git a/ecc_theme_intranet/css/search.css b/ecc_theme_intranet/css/search.css
@@ -1,7 +1,4 @@
 /* Search */
-.lgd-header .region-primary-menu {
-  order: 1;
-}
 
 .lgd-header .lgd-region--search {
   width: 100%;

diff --git a/ecc_theme_intranet/templates/layout/header.html.twig b/ecc_theme_intranet/templates/layout/header.html.twig
@@ -0,0 +1,73 @@
+{# Attach libraries #}
+{% if not localgov_base_remove_js %}
+  {{ attach_library('localgov_base/header-js') }}
+{% endif %}
+
+<header class="lgd-header">
+  <div class="lgd-container">
+    <div class="lgd-row">
+      <div class="lgd-row__full">
+        <div class="lgd-header__inner">
+
+          {{ page.header }}
+
+          {% if has_primary_menu or has_search or has_secondary_menu %}
+            {#
+              The "Header Toggles" section sets a number of buttons to activate
+              - the primary menu/search regions on small screens, and
+              - the secondary region on all screen sizes (region where we expect
+                the services menu will be positioned).
+            #}
+            <div class="lgd-header__toggles">
+              {% if has_secondary_menu %}
+                <button
+                  class="lgd-header__toggle lgd-header__toggle--secondary"
+                  data-target="lgd-header__nav--secondary"
+                  aria-controls="lgd-header__nav--secondary"
+                  aria-expanded="false"
+                  aria-label="{{ 'Services: expand and jump to services menu'|t }}"
+                >
+                  <span class="lgd-header__toggle-text lgd-header__toggle-text--secondary">{{ 'Services'|t }}</span>
+                  <span class="lgd-header__toggle-icon lgd-header__toggle-icon--secondary"></span>
+                </button>
+              {% endif %}
+
+              {% if has_primary_menu or has_search %}
+                <button
+                  class="lgd-header__toggle lgd-header__toggle--primary"
+                  data-target="lgd-header__nav--primary"
+                  aria-controls="lgd-header__nav--primary"
+                  aria-expanded="false"
+                >
+                  <span class="lgd-header__toggle-text lgd-header__toggle-text--primary">{{ 'Menu'|t }}</span>
+                  <span class="lgd-header__toggle-icon lgd-header__toggle-icon--primary"></span>
+                </button>
+              {% endif %}
+            </div>
+
+            {% if has_primary_menu or has_search %}
+              <div id="lgd-header__nav--primary" class="lgd-header__nav lgd-header__nav--primary">
+                {% if has_search %}
+                  {{ page.search }}
+                {% endif %}
+
+                {% if has_primary_menu %}
+                  {{ page.primary_menu }}
+                {% endif %}
+
+              </div>
+            {% endif %}
+
+          {% endif %}
+
+          {% if has_secondary_menu %}
+            <div id="lgd-header__nav--secondary" class="lgd-header__nav lgd-header__nav--secondary">
+              {{ page.secondary_menu }}
+            </div>
+          {% endif %}
+
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
diff --git a/ecc_theme_intranet/templates/layout/page.html.twig b/ecc_theme_intranet/templates/layout/page.html.twig
@@ -86,7 +86,7 @@ tabs region on all localgov_drupal websites. Yay!
 {% endif %}
 
 {% block header %}
-  {% include '@localgov_base/layout/header.html.twig' with {'page': page} %}
+  {% include '@ecc_theme_intranet/layout/header.html.twig' with {'page': page} %}
 {% endblock %}
 
 {% if has_banner %}