[#2625] Mobile design keeping A11Y header on small screens

maykinmedia · Nov 4, 2024 · ac1e40f · ac1e40f
1 parent a7ce5c9
commit ac1e40f
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 14 deletions.
diff --git a/src/open_inwoner/components/templates/components/Header/AccessibilityHeader.html b/src/open_inwoner/components/templates/components/Header/AccessibilityHeader.html
@@ -2,11 +2,6 @@
 
 <div class="accessibility-header" role="complementary">
     <ul class="accessibility-header__list" aria-label="{% trans "Toegankelijkheidshulp" %}">
-        <li class="accessibility-header__list-item">
-            {% trans "Doorgaan naar hoofdinhoud" as link_text %}
-            {% link href="#content" icon="south" text=link_text extra_classes="skip-link" %}
-        </li>
-
         <li class="accessibility-header__list-item">
             {% trans "Lees voor" as link_text %}
             {% link href="#" icon="volume_up" text=link_text extra_classes="accessibility--read" %}

diff --git a/src/open_inwoner/components/templates/components/Header/AccessibilitySkipLink.html b/src/open_inwoner/components/templates/components/Header/AccessibilitySkipLink.html
@@ -0,0 +1,6 @@
+{% load i18n link_tags %}
+
+<p class="utrecht-paragraph">
+    {% trans "Doorgaan naar hoofdinhoud" as link_text %}
+    {% link href="#content" icon="south" text=link_text extra_classes="utrecht-skip-link utrecht-skip-link--visible-on-focus utrecht-skip-link--focus-visible" %}
+</p>
diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html
@@ -33,14 +33,6 @@
         {# end of mobile header-menu with logo #}
 
         <div class="header--mobile header__submenu">
-            {% if cms_apps.products and request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
-                <nav class="header__actions header__actions--open" aria-label="Zoek navigatie mobiel">
-                    <form id="search-form-mobile-open" class="search-form-delegate form form--inline">
-                        {% input search_form.query no_label=True %}
-                        {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
-                    </form>
-                </nav>
-            {% endif %}
 
                 <nav class="primary-navigation primary-navigation--mobile" aria-label="Hoofd navigatie">
                     <ul class="primary-navigation__list">
@@ -101,6 +93,11 @@
                         {% endif %}
                     </div>
                 </section>
+
+                <section class="accessibility-header__mobilenav">
+                    <p class="utrecht-paragraph">Toegankelijkheid:</p>
+                    {% accessibility_header request=request %}
+                </section>
 
             </div>
             {# end of submenu items #}

diff --git a/src/open_inwoner/scss/components/AccessibilityHeader/AccessibilityHeader.scss b/src/open_inwoner/scss/components/AccessibilityHeader/AccessibilityHeader.scss
@@ -69,3 +69,36 @@
     }
   }
 }
+
+// Accessibility header within different components
+.accessibility-header__mobilenav {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  padding: 0 var(--spacing-large);
+  margin-bottom: var(--row-height);
+
+  .accessibility-header {
+    display: block;
+    background-color: var(--color-white);
+    padding: 0;
+
+    &__list {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 30px;
+    }
+
+    .link {
+      color: var(--oip-color-red-notification);
+      font-size: var(--font-size-body);
+      padding: 0;
+      @media (max-width: 767px) {
+        &:not(:focus):not(:hover) {
+          font-size: var(--font-size-body);
+        }
+      }
+    }
+  }
+}
diff --git a/src/open_inwoner/scss/components/AccessibilitySkipLink/AccessibilitySkipLink.scss b/src/open_inwoner/scss/components/AccessibilitySkipLink/AccessibilitySkipLink.scss
@@ -0,0 +1,46 @@
+.utrecht-skip-link {
+  background-color: var(--utrecht-skip-link-background-color, #f0f0f0);
+  color: var(--utrecht-skip-link-color, #000);
+  min-block-size: var(--utrecht-skip-link-min-block-size, 0);
+  min-inline-size: var(--utrecht-skip-link-min-inline-size, 0);
+  padding-block-start: var(--utrecht-skip-link-padding-block-start, 0.5rem);
+  padding-block-end: var(--utrecht-skip-link-padding-block-end, 0.5rem);
+  padding-inline-start: var(--utrecht-skip-link-padding-inline-start, 1rem);
+  padding-inline-end: var(--utrecht-skip-link-padding-inline-end, 1rem);
+  text-decoration: var(--utrecht-skip-link-text-decoration, underline);
+  z-index: var(--utrecht-skip-link-z-index, 5000);
+
+  &--visible-on-focus {
+    inset-block-start: -200%;
+    position: fixed;
+    &:focus {
+      inset-block-start: 0;
+      background-color: var(
+        --utrecht-skip-link-focus-background-color,
+        var(--color-accent)
+      );
+      color: var(--utrecht-skip-link-focus-color, #fff);
+      text-decoration: var(
+        --utrecht-skip-link-focus-text-decoration,
+        underline
+      );
+    }
+  }
+
+  &--focus-visible {
+    inset-block-start: -200%;
+    position: fixed;
+    &:focus-visible {
+      inset-block-start: 0;
+      background-color: var(
+        --utrecht-skip-link-focus-visible-background-color,
+        var(--color-accent)
+      );
+      color: var(--utrecht-skip-link-focus-visible-color, #fff);
+      text-decoration: var(
+        --utrecht-skip-link-focus-visible-text-decoration,
+        underline
+      );
+    }
+  }
+}
diff --git a/src/open_inwoner/scss/components/_index.scss b/src/open_inwoner/scss/components/_index.scss
@@ -1,4 +1,5 @@
 @import './AccessibilityHeader/AccessibilityHeader.scss';
+@import './AccessibilitySkipLink/AccessibilitySkipLink.scss';
 @import './Actions/Actions.scss';
 @import './Appointments/Appointments.scss';
 @import './Autocomplete/Autocomplete.scss';

diff --git a/src/open_inwoner/templates/master.html b/src/open_inwoner/templates/master.html
@@ -63,7 +63,7 @@
     </head>
 
     <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="utrecht-page">
-
+    
         {% if cookiebanner_enabled %}
         {# render cookiebanner first #}
         <div class="cookie-banner" id="cookie-banner" aria-labelledby="cookie-banner__title" aria-describedby="cookie-banner__text">
@@ -79,6 +79,8 @@
             </div>
         </div>
         {% endif %}
+
+        {% include "components/Header/AccessibilitySkipLink.html" %}
 
         {% if warning_banner_enabled %}
           {% include "components/Header/WarningHeader.html" %}