[#2379] Made Search feedback notification focusable for screenreaders

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,22 @@ 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
+      console.log('there is notificationContent: ', notificationContent)
+      // If errors are present, scroll, set focus, and trigger the opened state
       notificationContent.scrollIntoView({
         block: 'center',
         behavior: 'smooth',
       })
+      // Set focus to the notification content 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/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">