[#2379] Made Search feedback notification focusable for screenreaders

Author: jiromaykin

src/open_inwoner/cms/cases/tests/test_htmx.py

@@ -594,7 +594,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")

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>

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

src/open_inwoner/js/components/notifications/index.js

@@ -25,17 +25,21 @@ 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
       notificationContent.scrollIntoView({
         block: 'center',
         behavior: 'smooth',
       })
+      // Set focus for screen readers
+      notificationContent.focus()
     }
   }
 

src/open_inwoner/scss/components/Grid/Grid.scss

@@ -35,6 +35,12 @@
         }
       }
     }
+
+    /// Search grid
+    &--search {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   &--limit &__sidebar,

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;
     }

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