[#2379] Fix

maykinmedia · Jul 1, 2024 · 468209c · 468209c
1 parent 381aadd
commit 468209c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/src/open_inwoner/components/templates/components/Form/Error.html b/src/open_inwoner/components/templates/components/Form/Error.html
@@ -1,10 +1,10 @@
 {% load i18n button_tags icon_tags button_tags icon_tags notification_tags %}
 
 {% for message in messages %}
-    <div class="notifications notifications__errors" role="alert" aria-live="assertive">
+    <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
@@ -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" aria-live="assertive">
+<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/components/templates/components/Notification/Notifications.html b/src/open_inwoner/components/templates/components/Notification/Notifications.html
@@ -1,6 +1,6 @@
 {% load notification_tags string_tags %}
 
-<div class="notifications" role="alert" aria-live="assertive">
+<div class="notifications">
     {% for message in messages %}
         {% with as_markdown=message.extra_tags|is_substring:"as_markdown" %}
             {% with local_message=message.extra_tags|is_substring:"local_message" %}

diff --git a/src/open_inwoner/js/components/notifications/index.js b/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()
     }
   }
 

diff --git a/src/open_inwoner/templates/master.html b/src/open_inwoner/templates/master.html
@@ -110,7 +110,7 @@
         {% block header_image %}{% endblock header_image %}
 
         {% block notifications %}
-            <div class="container container--no-margin" role="alert" aria-live="assertive">
+            <div class="container container--no-margin">
                 {% notifications messages closable=True %}
             </div>
         {% endblock %}