[#2379] Clean up

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

@@ -1,3 +1,30 @@
+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
+}
+
 /**
  * Single Notification class.
  * @class
@@ -33,20 +60,20 @@ export class Notification {
       this.node.querySelectorAll('.notification__content')
     )
 
-    // Scroll to each notification content
-    notificationContents.forEach((content) => {
-      // If errors are present, scroll and trigger the opened state
-      content.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)
       })
-
-      // Add a delay before setting focus for screen readers
-      setTimeout(() => {
-        // Set focus for screen readers
-        content.focus()
-      }, 100)
-    })
+    }
   }
 
   /**
@@ -70,8 +97,6 @@ export class Notification {
    * Reorders notifications based on type.
    */
   reorderNotifications() {
-    const typeOrder = ['error', 'warning', 'success', 'info']
-
     // Get all notifications in the parent container
     const notificationsContainer = document.querySelector('.notifications')
     const notifications = Array.from(
@@ -92,32 +117,6 @@ export class Notification {
   }
 }
 
-/**
- * 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.
- */
-function getTypeOrderIndex(notification) {
-  const type = getTypeFromNotification(notification)
-  const typeOrder = ['error', 'warning', 'success', 'info']
-  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.
- */
-function getTypeFromNotification(notification) {
-  let notificationType = ''
-  notification.classList.forEach((cls) => {
-    if (cls.startsWith('notification--')) {
-      notificationType = cls.replace('notification--', '')
-    }
-  })
-  return notificationType
-}
-
 // Start!
 
 // Create a new Notification instance for each matching element in the NodeList

src/open_inwoner/scss/components/Notification/_Notification.scss

@@ -103,8 +103,8 @@
 
     &:focus,
     &:focus-visible {
-      outline: 5px solid pink !important;
-      border: 5px solid pink !important;
+      outline: none;
+      border: none;
     }
 
     & * {