From 450e43db73c5b2d7818b412d7bbc7c9cf649f216 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 25 Jun 2024 17:40:55 +0200
Subject: [PATCH] [#2379] Made Search feedback notification focusable for
 screenreaders

---
 src/open_inwoner/cms/cases/tests/test_htmx.py             | 2 +-
 .../components/templates/components/Form/Error.html       | 2 +-
 .../templates/components/Notification/Notification.html   | 4 ++--
 src/open_inwoner/js/components/notifications/index.js     | 8 ++++++--
 src/open_inwoner/scss/components/Grid/Grid.scss           | 6 ++++++
 .../scss/components/Notification/_Notification.scss       | 6 ++++++
 src/open_inwoner/templates/pages/search.html              | 2 +-
 7 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/open_inwoner/cms/cases/tests/test_htmx.py b/src/open_inwoner/cms/cases/tests/test_htmx.py
index 6afa96ccc6..f01eec0f88 100644
--- a/src/open_inwoner/cms/cases/tests/test_htmx.py
+++ b/src/open_inwoner/cms/cases/tests/test_htmx.py
@@ -586,7 +586,7 @@ def mock_upload(request, context):
         upload_form = page.locator("#document-upload")
         file_input = upload_form.get_by_label("Sleep of selecteer bestanden")
         submit_button = upload_form.get_by_role("button", name=_("Upload documenten"))
-        notification_list = page.get_by_role("alert").get_by_role("list")
+        notification_list = page.locator(".notification").get_by_role("list")
         notification_list_items = notification_list.get_by_role("listitem")
         file_list = page.get_by_role("list").last
         file_list_items = file_list.get_by_role("listitem")
diff --git a/src/open_inwoner/components/templates/components/Form/Error.html b/src/open_inwoner/components/templates/components/Form/Error.html
index 8d90046f0d..6542a11f9a 100644
--- a/src/open_inwoner/components/templates/components/Form/Error.html
+++ b/src/open_inwoner/components/templates/components/Form/Error.html
@@ -4,7 +4,7 @@
     <div class="notifications notifications__errors">
         <div class="notification notification--warning">
             {% icon icon="warning_amber" icon_position="before" outlined=True %}
-            <div class="notification__content">
+            <div class="notification__content" tabindex="-1">
                 <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ message.message }}</p>
             </div>
         </div>
diff --git a/src/open_inwoner/components/templates/components/Notification/Notification.html b/src/open_inwoner/components/templates/components/Notification/Notification.html
index cea1fa2d00..ecb6d30c75 100644
--- a/src/open_inwoner/components/templates/components/Notification/Notification.html
+++ b/src/open_inwoner/components/templates/components/Notification/Notification.html
@@ -1,12 +1,12 @@
 {% load i18n utils button_tags icon_tags button_tags icon_tags %}
-<div class="notification{% if contents %} notification--contents{% endif %}{% if type %} notification--{{ type }}{% endif %}{% if compact %} notification--compact{% endif %} {% if ctx %}notification--{{ ctx }}{% endif %}" role="alert">
+<div class="notification{% if contents %} notification--contents{% endif %}{% if type %} notification--{{ type }}{% endif %}{% if compact %} notification--compact{% endif %} {% if ctx %}notification--{{ ctx }}{% endif %}">
     {% if not icon == False %}
         <div class="notification__icon">
             {% icon icon outlined=True %}
         </div>
     {% endif %}
 
-    <div class="notification__content">
+    <div class="notification__content" tabindex="-1">
         {% if title %}<h2 class="utrecht-heading-2">{{ title }}</h2>{% endif %}
         {% if notification %}<p class="utrecht-paragraph">{{ notification }}</p>{% endif %}
         {% if action %}{% button href=action text=action_text %}{% endif %}
diff --git a/src/open_inwoner/js/components/notifications/index.js b/src/open_inwoner/js/components/notifications/index.js
index b56267d960..1c213cb68c 100644
--- a/src/open_inwoner/js/components/notifications/index.js
+++ b/src/open_inwoner/js/components/notifications/index.js
@@ -25,10 +25,12 @@ export class Notification {
   }
 
   /**
-   * Scrolls to the notification content.
+   * Scrolls to the notification content and sets focus.
    */
   scrollToNotification() {
-    const notificationContent = document.querySelector('.notification__content')
+    const notificationContent = this.node.querySelector(
+      '.notification__content'
+    )
 
     if (notificationContent) {
       // If errors are present, scroll and trigger the opened state
@@ -36,6 +38,8 @@ export class Notification {
         block: 'center',
         behavior: 'smooth',
       })
+      // Set focus for screen readers
+      notificationContent.focus()
     }
   }
 
diff --git a/src/open_inwoner/scss/components/Grid/Grid.scss b/src/open_inwoner/scss/components/Grid/Grid.scss
index 75032c9d49..c84a2fda01 100644
--- a/src/open_inwoner/scss/components/Grid/Grid.scss
+++ b/src/open_inwoner/scss/components/Grid/Grid.scss
@@ -35,6 +35,12 @@
         }
       }
     }
+
+    /// Search grid
+    &--search {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   &--limit &__sidebar,
diff --git a/src/open_inwoner/scss/components/Notification/_Notification.scss b/src/open_inwoner/scss/components/Notification/_Notification.scss
index 89f5e3212a..27d879bc8c 100644
--- a/src/open_inwoner/scss/components/Notification/_Notification.scss
+++ b/src/open_inwoner/scss/components/Notification/_Notification.scss
@@ -101,6 +101,12 @@
   & &__content {
     margin-top: var(--spacing-tiny);
 
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      border: none;
+    }
+
     & * {
       margin: 0;
     }
diff --git a/src/open_inwoner/templates/pages/search.html b/src/open_inwoner/templates/pages/search.html
index 08db380435..70ef7b8f5c 100644
--- a/src/open_inwoner/templates/pages/search.html
+++ b/src/open_inwoner/templates/pages/search.html
@@ -28,7 +28,7 @@ <h2 class="utrecht-heading-2">{% trans "Zoekfilters" %}</h2>
         {#  end search filters #}
         </aside>
 
-        <div class="grid__main">
+        <div class="grid__main grid__main--search">
             {% if paginator.count %}
                 <div class="search-results">
                     <h2 class="utrecht-heading-2 search-results__title">