UHF-8930: Announcement accessibility changes

src/js/closable-announcements.js

@@ -29,9 +29,41 @@
 
       function closeAnnouncement(announcement) {
         addToAnnouncementStorage(announcement);
-        announcement.style = `--js-announcement-height: ${announcement.offsetHeight}px`; // Set fixed height to allow CSS animation
+        // Set fixed height to allow CSS animation
+        announcement.style = `--js-announcement-height: ${announcement.offsetHeight}px`;
         window.setTimeout(() => {
+          let focused = false;
+          const allAnnouncements = document.querySelectorAll('.announcement:not(.js-announcement--hide)');
           announcement.classList.add(ANNOUCEMENT_HIDE);
+          // Moving focus to correct place after closing the announcement.
+          // NOTICE: This is very dependent on the html-structure of the header and its components.
+          // Go through all announcements and use the uuid to determine which focusable announcement is before
+          // the closed announcement.
+          for (let i = 0, max = allAnnouncements.length; i < max; i++) {
+            if (allAnnouncements[i].dataset.uuid === announcement.dataset.uuid && i > 0) {
+              const focusableAnnouncement = allAnnouncements[i - 1].querySelectorAll('.announcement__close, .announcement__link a');
+              focusableAnnouncement[focusableAnnouncement.length - 1].focus();
+              focused = true;
+              break;
+            }
+          }
+          // If there is no more announcements to focus to we need to figure out if we are viewing the page with mobile
+          // or desktop navigation. We check if the header-bottom menu is visible to determine this.
+          if (focused === false) {
+            const desktopMenu = document.querySelector('.header-bottom .desktop-menu > .menu');
+            const desktopMenuHidden = window.getComputedStyle(desktopMenu).display === 'none';
+            // Depending on the visible menu we move the focus straight to nav-toggle buttons or the menu links if no
+            // breadcrumb is set.
+            if (desktopMenuHidden === true) {
+              // Move the focus on mobile:
+              const focusableElements = document.querySelectorAll('.nav-toggle__button, .breadcrumb a:last-of-type');
+              focusableElements[focusableElements.length - 1].focus();
+            } else {
+              // Move the focus on desktop:
+              const focusableElements = document.querySelectorAll('.nav-toggle__button, .header-bottom .menu--level-0 > .menu__item:last-child > .menu__link-wrapper :where(a, button), .breadcrumb a:last-of-type');
+              focusableElements[focusableElements.length - 1].focus();
+            }
+          }
         }, 1); // Delay setting class a bit to allow css accept fixed height before animating
       }
 

src/scss/06_components/messages/_announcement.scss

@@ -13,6 +13,7 @@
   background-color: var(--announcement-bg-color);
   box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
   display: flex;
+  flex-direction: row-reverse;
   justify-content: space-between;
   min-height: var(--announcement-bg-size);
   padding-bottom: $spacing;

templates/content/node--announcement--default.html.twig

@@ -19,10 +19,18 @@
   %}
 {% endif %}
 
+{% if content.field_announcement_title.0['#context'].value %}
+  {% set announcement_title = content.field_announcement_title.0['#context'].value ~ ' -' %}
+{% endif %}
+
 {% set link = content.field_announcement_link[0] %}
 
 <section aria-label="{{ type_label }}" class="announcement js-announcement {{ block_modifier }} container" data-uuid="{{ node.uuid.value }}">
   <div {{ create_attribute(announcement_attributes) }}>
+    {% set announcement_close_labelled_by = "announcement__close__aria-label--" ~ random() %}
+    <button type="button" class="announcement__close js-announcement__close--disabled" aria-labelledby="{{announcement_close_labelled_by}}">
+      <span id="{{announcement_close_labelled_by}}" class="is-hidden">{{ [announcement_title, close_label, type_label|lower]|join(" ") }}</span>
+    </button>
     <div class="announcement__content">
       {% if content.body|render != null %}
         <div class="announcenemnt__content-body">
@@ -35,9 +43,5 @@
         </div>
       {% endif %}
     </div>
-    {% set announcement_close_labelled_by = "announcement__close__aria-label--" ~ random() %}
-    <button type="button" class="announcement__close js-announcement__close--disabled" aria-labelledby="{{announcement_close_labelled_by}}">
-      <span id="{{announcement_close_labelled_by}}" class="is-hidden">{{ [close_label, type_label|lower]|join(" ") }}</span>
-    </button>
   </div>
 </section>