From b42614612527c524683affd43af034c3968e328e Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Thu, 4 Jul 2024 16:44:59 +0200
Subject: [PATCH] [#2583] Clean up

---
 .../components/templates/components/Form/Error.html    |  2 +-
 .../components/Notification/Notification.html          |  9 ++++++++-
 .../components/Notification/Notifications.html         |  4 ++--
 .../js/components/notifications/NotificationsList.js   | 10 +---------
 .../scss/components/Notification/_Notification.scss    |  2 +-
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/open_inwoner/components/templates/components/Form/Error.html b/src/open_inwoner/components/templates/components/Form/Error.html
index 6542a11f9a..d426cee805 100644
--- a/src/open_inwoner/components/templates/components/Form/Error.html
+++ b/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>
diff --git a/src/open_inwoner/components/templates/components/Notification/Notification.html b/src/open_inwoner/components/templates/components/Notification/Notification.html
index da65277091..0955a3508f 100644
--- a/src/open_inwoner/components/templates/components/Notification/Notification.html
+++ b/src/open_inwoner/components/templates/components/Notification/Notification.html
@@ -6,7 +6,14 @@
         </div>
     {% endif %}
 
-    <div class="notification__content" role="region" 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 %}
diff --git a/src/open_inwoner/components/templates/components/Notification/Notifications.html b/src/open_inwoner/components/templates/components/Notification/Notifications.html
index 7e497df784..5965d73b82 100644
--- 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">
+<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>
diff --git a/src/open_inwoner/js/components/notifications/NotificationsList.js b/src/open_inwoner/js/components/notifications/NotificationsList.js
index 16ed28190b..85000adb8e 100644
--- a/src/open_inwoner/js/components/notifications/NotificationsList.js
+++ b/src/open_inwoner/js/components/notifications/NotificationsList.js
@@ -10,12 +10,7 @@ export class NotificationsList {
 
   scrollToFirstNotification() {
     if (this.notificationContents.length > 0) {
-      // Log before the timeout starts
-      console.log(
-        'Scrolling to first notification and setting a timeout to focus.'
-      )
-
-      // Scroll to the first notification
+      // Scroll to the first notification, since there could be multiple
       this.notificationContents[0].scrollIntoView({
         block: 'center',
         behavior: 'smooth',
@@ -25,9 +20,6 @@ export class NotificationsList {
       setTimeout(() => {
         // Set focus on the first notification content
         this.notificationContents[0].focus()
-
-        // Log after the timeout completes
-        console.log('Focus set on the first notification content.')
       }, 100) // Adjust the delay as necessary
     }
   }
diff --git a/src/open_inwoner/scss/components/Notification/_Notification.scss b/src/open_inwoner/scss/components/Notification/_Notification.scss
index 75e83189e9..c483a25777 100644
--- a/src/open_inwoner/scss/components/Notification/_Notification.scss
+++ b/src/open_inwoner/scss/components/Notification/_Notification.scss
@@ -103,7 +103,7 @@
 
     &:focus,
     &:focus-visible {
-      outline: 3px solid red;
+      outline: none;
       border: none;
     }