[#2379] experimental Search feedback notification screenreader test

Author: jiromaykin

src/open_inwoner/components/templates/components/Form/Error.html

@@ -1,7 +1,7 @@
 {% load i18n button_tags icon_tags button_tags icon_tags notification_tags %}
 
 {% for message in messages %}
-    <div class="notifications notifications__errors">
+    <div class="notifications notifications__errors" role="alert" aria-live="assertive">
         <div class="notification notification--warning">
             {% icon icon="warning_amber" icon_position="before" outlined=True %}
             <div class="notification__content">

src/open_inwoner/components/templates/components/Notification/Notification.html

@@ -1,5 +1,5 @@
 {% 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 %}" role="alert" aria-live="assertive">
     {% if not icon == False %}
         <div class="notification__icon">
             {% icon icon outlined=True %}

src/open_inwoner/components/templates/components/Notification/Notifications.html

@@ -1,6 +1,6 @@
 {% load notification_tags string_tags %}
 
-<div class="notifications">
+<div class="notifications" role="alert" aria-live="assertive">
     {% for message in messages %}
         {% with as_markdown=message.extra_tags|is_substring:"as_markdown" %}
             {% with local_message=message.extra_tags|is_substring:"local_message" %}

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/master.html

@@ -110,7 +110,7 @@
         {% block header_image %}{% endblock header_image %}
 
         {% block notifications %}
-            <div class="container container--no-margin">
+            <div class="container container--no-margin" role="alert" aria-live="assertive">
                 {% notifications messages closable=True %}
             </div>
         {% endblock %}

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