[#2379] Reordered notifications order + forced focus on 1st element

Author: jiromaykin

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" tabindex="-1">
+            <div class="notification__content" role="alert" 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

@@ -6,7 +6,14 @@
         </div>
     {% endif %}
 
-    <div class="notification__content" tabindex="-1">
+    <div class="notification__content"
+         {% if type == "error" %}
+            role="alert"
+         {% elif type == "warning" %}
+            role="alert"
+         {% else %}
+            role="status"
+         {% endif %} 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/components/templates/components/Notification/Notifications.html

@@ -1,6 +1,6 @@
 {% load notification_tags string_tags %}
 
-<div class="notifications">
+<section 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" %}
@@ -14,4 +14,4 @@
             {% endwith %}
         {% endwith %}
     {% endfor %}
-</div>
+</section>

src/open_inwoner/conf/locale/nl/LC_MESSAGES/django.po

@@ -6552,9 +6552,9 @@ msgstr "Zoekindex opnieuw opbouwen"
 #: open_inwoner/search/tests/test_feedback.py:192
 #: open_inwoner/search/views.py:158
 msgid ""
-"Thank you for your feedback. It will help us to improve our search engine"
+"Thank you for your feedback, it will help us improve our search engine."
 msgstr ""
-"Dank u voor uw feedback, hiermee kunnen wij de omgeving verder verbeteren"
+"Dank u voor uw feedback, hiermee kunnen wij de omgeving verder verbeteren."
 
 #: open_inwoner/search/tests/test_logging.py:33 open_inwoner/search/views.py:63
 #, python-brace-format

src/open_inwoner/js/components/index.js

@@ -22,6 +22,7 @@ import './header'
 import './map'
 import './message-file'
 import { Notification } from './notifications'
+import { NotificationsList } from './notifications/NotificationsList'
 import './plans'
 import './plan-preview'
 import './questionnaire'
@@ -55,6 +56,7 @@ const elementWrappers = [
     (elt) => new DisableContactFormButton(elt),
   ],
   [Notification.selector, (elt) => new Notification(elt)],
+  [NotificationsList.selector, (elt) => new NotificationsList(elt)],
   [AnchorMobile.selector, (elt) => new AnchorMobile(elt)],
   [StatusAccordion.selector, (elt) => new StatusAccordion(elt)],
   [FileInput.selector, (elt) => new FileInput(elt)],

src/open_inwoner/js/components/notifications/NotificationsList.js

@@ -0,0 +1,39 @@
+/**
+ * Surrounding Notifications class.
+ * @class
+ */
+export class NotificationsList {
+  static selector = '.notifications'
+  constructor(notificationContents) {
+    this.notificationContents = notificationContents
+  }
+
+  scrollToFirstNotification() {
+    if (this.notificationContents.length > 0) {
+      // Scroll to the first notification, since there could be multiple
+      this.notificationContents[0].scrollIntoView({
+        block: 'center',
+        behavior: 'smooth',
+      })
+
+      // Add a delay before setting focus for screen readers
+      setTimeout(() => {
+        // Set focus on the first notification content
+        this.notificationContents[0].focus()
+      }, 100)
+    }
+  }
+}
+
+// Start!
+
+const notificationContents = document.querySelectorAll('.notification__content')
+
+// Instantiate notifications section
+document
+  .querySelectorAll(NotificationsList.selector)
+  .forEach((notifications) => new NotificationsList(notifications))
+
+// Focus only the first notification content
+const scrollManager = new NotificationsList(notificationContents)
+scrollManager.scrollToFirstNotification()

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

@@ -1,5 +1,32 @@
+const typeOrder = ['error', 'warning', 'success', 'info']
+
+/**
+ * Helper function to determine the order index of a notification type.
+ * @param {HTMLElement} notification - The notification element.
+ * @returns {number} - Order index of the notification type.
+ */
+const getTypeOrderIndex = (notification) => {
+  const type = getTypeFromNotification(notification)
+  return typeOrder.indexOf(type)
+}
+
+/**
+ * Helper function to get the type of a notification.
+ * @param {HTMLElement} notification - The notification element.
+ * @returns {string} - Type of the notification.
+ */
+const getTypeFromNotification = (notification) => {
+  let notificationType = ''
+  notification.classList.forEach((cls) => {
+    if (cls.startsWith('notification--')) {
+      notificationType = cls.replace('notification--', '')
+    }
+  })
+  return notificationType
+}
+
 /**
- * Notification class.
+ * Single Notification class.
  * @class
  */
 export class Notification {
@@ -14,6 +41,7 @@ export class Notification {
     this.node = node
 
     this.bindEvents()
+    this.reorderNotifications()
   }
 
   /**
@@ -28,18 +56,23 @@ export class Notification {
    * Scrolls to the notification content and sets focus.
    */
   scrollToNotification() {
-    const notificationContent = this.node.querySelector(
-      '.notification__content'
+    const notificationContents = Array.from(
+      this.node.querySelectorAll('.notification__content')
     )
 
-    if (notificationContent) {
-      // If errors are present, scroll and trigger the opened state
-      notificationContent.scrollIntoView({
-        block: 'center',
-        behavior: 'smooth',
+    if (notificationContents) {
+      notificationContents.forEach((content) => {
+        // If errors are present, scroll and trigger the opened state
+        content.scrollIntoView({
+          block: 'center',
+          behavior: 'smooth',
+        })
+
+        // Add a pause before setting focus for screen readers after DOM load
+        setTimeout(() => {
+          content.focus()
+        }, 100)
       })
-      // Set focus for screen readers
-      notificationContent.focus()
     }
   }
 
@@ -51,8 +84,6 @@ export class Notification {
       e.preventDefault()
       this.close()
     })
-
-    this.scrollToNotification()
   }
 
   /**
@@ -61,6 +92,29 @@ export class Notification {
   close() {
     this.node.parentElement.removeChild(this.node)
   }
+
+  /**
+   * Reorders notifications based on type.
+   */
+  reorderNotifications() {
+    // Get all notifications in the parent container
+    const notificationsContainer = document.querySelector('.notifications')
+    const notifications = Array.from(
+      notificationsContainer.querySelectorAll(Notification.selector)
+    )
+
+    // Sort notifications based on type order
+    notifications.sort((a, b) => {
+      const typeA = getTypeOrderIndex(a)
+      const typeB = getTypeOrderIndex(b)
+      return typeA - typeB
+    })
+
+    // Re-append sorted notifications to parent container
+    notifications.forEach((notification) =>
+      notificationsContainer.appendChild(notification)
+    )
+  }
 }
 
 // Start!
@@ -69,3 +123,12 @@ export class Notification {
 document
   .querySelectorAll(Notification.selector)
   .forEach((notification) => new Notification(notification))
+
+// Scroll to the notifications after reordering
+setTimeout(() => {
+  const firstNotification = document.querySelector(Notification.selector)
+  if (firstNotification) {
+    const instance = new Notification(firstNotification)
+    instance.scrollToNotification()
+  }
+}, 0)

src/open_inwoner/scss/components/Notification/_Notifications.scss

@@ -3,7 +3,7 @@
   top: var(--spacing-extra-large);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-extra-large);
+  gap: var(--spacing-medium);
   z-index: 1002;
 
   /// Multiple errors.

src/open_inwoner/search/tests/test_feedback.py

@@ -189,6 +189,6 @@ def test_feedback_form_not_displayed_after_submit(self):
         self.assertEqual(
             message.message,
             _(
-                "Thank you for your feedback. It will help us to improve our search engine"
+                "Thank you for your feedback, it will help us improve our search engine."
             ),
         )

src/open_inwoner/search/views.py

@@ -155,7 +155,7 @@ def form_valid(self, form):
             self.request,
             messages.SUCCESS,
             _(
-                "Thank you for your feedback. It will help us to improve our search engine"
+                "Thank you for your feedback, it will help us improve our search engine."
             ),
         )
         redirect = furl(reverse("search:search"))