[#2583] Clean up

maykinmedia · Jul 4, 2024 · b426146 · b426146
1 parent 018744c
commit b426146
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -103,7 +103,7 @@
 
     &:focus,
     &:focus-visible {
-      outline: 3px solid red;
+      outline: none;
       border: none;
     }