[#2625] Made A11Y functionality available on mobile, improved skiplink

maykinmedia · Nov 5, 2024 · dc64266 · dc64266
1 parent 5aba3cc
commit dc64266
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@joeattardi/emoji-button": "^4.6.4",
-    "@open-inwoner/design-tokens": "^0.0.6-alpha.1",
+    "@open-inwoner/design-tokens": "^0.0.7-alpha.2",
     "@tarekraafat/autocomplete.js": "^10.2.6",
     "bem.js": "^1.0.10",
     "emojibase-data": "^7.0.1",

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 %}
             {% trans "Pauzeer" as alt_link_text %}

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,9 @@
+{% load i18n link_tags %}
+
+<p class="utrecht-paragraph">
+    {% trans "Doorgaan naar hoofdinhoud" as link_text %}
+ <a href="#content" class="utrecht-skip-link utrecht-skip-link--visible-on-focus utrecht-skip-link--focus-visible" aria-label="{{ link_text }}" title="{{ link_text }}">
+    <span class="skip-link__text">{{ link_text }}</span>
+    <span aria-hidden="true" class="material-icons ">south</span>
+    </a>
+</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">
@@ -87,21 +79,39 @@
                     <div class="header__text-actions">
 
                         {% if request.user.is_authenticated %}
-                            <p class="utrecht-paragraph">
-                                {% icon icon="person" icon_position="before" outlined=True %}{% trans "Ingelogd als" %} {{ request.user.display_name }}
-                            </p>
                             <ul class="header__list">
                                 <li class="header__list-item">
                                     {% trans "Logout" as logout %}
-                                    {% link text=logout href=request.user.get_logout_url icon="arrow_forward" icon_position="before" secondary=True %}
+                                    {% link text=logout href=request.user.get_logout_url icon="login" icon_position="before" secondary=True %}
                                 </li>
+                                {% if cms_apps.products and request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
+                                    <li class="header__list-item">
+                                        {% trans "Zoeken" as search %}
+                                        {% link text=search href="/search" icon="search" icon_position="before" secondary=True %}
+                                    </li>
+                                {% endif %}
                             </ul>
                         {% elif config.login_show %}
-                            <p></p>
+                            <ul class="header__list">
+                                <li class="header__list-item">
+                                    {% url 'login' as login_url %}
+                                    {% trans "Log in" as loginmobile %}
+                                    {% button text=loginmobile title=loginmobile href=login_url icon="account_circle" icon_position="before" transparent=True icon_outlined=True %}
+                                </li>
+                                <li class="header__list-item">
+                                    {% trans "Zoeken" as search %}
+                                    {% link text=search href="/search" icon="search" icon_position="before" secondary=True %}
+                                </li>
+                            </ul>
                         {% 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/components/tests/test_header.py b/src/open_inwoner/components/tests/test_header.py
@@ -161,23 +161,41 @@ def test_search_bar_hidden_from_anonymous_users(self):
         config.save()
 
         response = self.client.get("/")
-
         doc = PyQuery(response.content)
 
-        search_buttons = doc.find("[title='Zoeken']")
+        search_forms = [
+            form
+            for form in doc.find("form").items()
+            if form.find("button[title='Zoeken']")
+        ]
 
-        self.assertEqual(len(search_buttons), 0)
+        self.assertEqual(
+            len(search_forms), 0, "Search form should be hidden for anonymous users."
+        )
 
     def test_search_bar_not_hidden_from_anonymous_users(self):
         config = SiteConfiguration.get_solo()
         config.hide_search_from_anonymous_users = False
         config.save()
 
         response = self.client.get("/")
-
         doc = PyQuery(response.content)
 
-        search_buttons = doc.find("[title='Zoeken']")
+        search_forms = [
+            form
+            for form in doc.find("form").items()
+            if form.find("button[title='Zoeken']")
+        ]
+
+        self.assertGreater(
+            len(search_forms), 0, "Search form should be visible for anonymous users."
+        )
 
-        for button in search_buttons:
-            self.assertEqual(button.tag, "button")
+        # Check each search form for the expected input element
+        for search_form in search_forms:
+            search_input = search_form.find("input[type='text'][name='query']")
+            self.assertEqual(
+                len(search_input),
+                1,
+                "Each search form should have a single text input named 'query'.",
+            )
diff --git a/src/open_inwoner/js/components/siteimprove/tracking.js b/src/open_inwoner/js/components/siteimprove/tracking.js
@@ -187,14 +187,6 @@ let isEventTrackerInitialized = false
           'Icon click',
           'Zoeken',
         ],
-        '#search-form-mobile-open > .form__actions > button': [
-          'event',
-          'Header mobiel-open Zoeken',
-          'Icon click',
-          'Zoeken',
-        ],
-        '#search-form-mobile-open > .form__actions > button > .material-icons':
-          ['event', 'Header mobiel-open Zoeken', 'Icon click', 'Zoeken'],
         // End of search submits
         // Start Communicatievoorkeuren
         // Can get contaminated with uncheck changes

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-gray-lightest);
+    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,16 @@
+@import '~@utrecht/components/dist/skip-link/css/index.css';
+
+.utrecht-skip-link {
+  text-decoration: none;
+
+  &--visible-on-focus {
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  .skip-link__text {
+    margin-right: var(--spacing-large);
+    text-decoration: var(--utrecht-skip-link-focus-text-decoration);
+  }
+}
diff --git a/src/open_inwoner/scss/components/Header/Header.scss b/src/open_inwoner/scss/components/Header/Header.scss
@@ -211,13 +211,14 @@ $vm: var(--spacing-large);
     background-color: white;
   }
 
+  // header--mobile
   &__submenu {
     border-top: 1px solid var(--color-gray-light);
     border-bottom: 1px solid var(--color-gray-light);
     border-left: none;
     border-right: none;
     bottom: 0;
-    background-color: var(--color-white);
+    background-color: var(--color-gray-lightest);
     box-sizing: border-box;
     display: none;
     height: 100vh;
@@ -312,10 +313,9 @@ $vm: var(--spacing-large);
   &__actions {
     border-left: none;
     border-right: none;
+    border-bottom: 1px solid var(--color-gray-light);
     bottom: 0;
-    background-color: var(--color-white);
     box-sizing: border-box;
-    height: calc(2 * var(--row-height));
     left: 0;
     margin: 0;
     max-width: 100%;
@@ -376,15 +376,14 @@ $vm: var(--spacing-large);
   }
 
   &__actions &__list {
-    display: flex;
+    display: block;
     list-style: none;
     margin: 0;
     padding: 0;
   }
 
   &__actions &__list-item {
-    display: inline;
-    margin-left: var(--spacing-extra-large);
+    display: list-item;
   }
 
   .form {
@@ -483,7 +482,6 @@ $vm: var(--spacing-large);
       .header {
         &__actions {
           box-sizing: border-box;
-          padding: 0;
           margin: 0;
 
           .header__text-actions {

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/search/tests/test_page.py b/src/open_inwoner/search/tests/test_page.py
@@ -181,7 +181,6 @@ class SearchPagePlaywrightTests(
     form_delegates = [
         ("search-form-desktop", 1280, False),
         ("search-form-mobile-closed", 480, False),
-        ("search-form-mobile-open", 480, True),
     ]
 
     def iter_delegate_ids(self):

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