Merge pull request #641 from City-of-Helsinki/UHF-7853-notification-c…

…omponents-accessibility

UHF-7853: Notification components accessibility

hdbt.theme

@@ -1547,3 +1547,21 @@ function hdbt_preprocess_paragraph__school_search(array &$variables): void {
     $variables['#attached']['drupalSettings']['helfi_school_search']['cookie_privacy_url'] = $privacyUrl->toString();
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function hdbt_preprocess_node__announcement(array &$variables) {
+  $type = $variables['node']->get('field_announcement_type')->value;
+
+  $type_label = match($type) {
+    'alert' => t('Alert'),
+    'attention' => t('Attention'),
+    default => t('Notification')
+  };
+
+  $close_label = t('Close');
+
+  $variables['type_label'] = $type_label;
+  $variables['close_label'] = $close_label;
+}

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

@@ -8,7 +8,7 @@
 
 {% set link = content.field_announcement_link[0] %}
 
-<div class="announcement js-announcement {{ block_modifier }} container" data-uuid="{{ node.uuid.value }}">
+<section aria-label={{ type_label }} class="announcement js-announcement {{ block_modifier }} container" data-uuid="{{ node.uuid.value }}">
   <div class="announcement__container">
     <div class="announcement__content">
       {% if content.body|render != null %}
@@ -23,7 +23,7 @@
       {% endif %}
     </div>
     <button type="button" class="announcement__close js-announcement__close--disabled" aria-labelledby="announcement__close__aria-label">
-      <span id="announcement__close__aria-label" class="is-hidden">{{ "Close announcement"|t }}</span>
+      <span id="announcement__close__aria-label" class="is-hidden">{{ [close_label, type_label|lower]|join(" ") }}</span>
     </button>
   </div>
-</div>
+</section>

templates/misc/status-messages.html.twig

@@ -50,7 +50,7 @@
   <section data-drupal-messages aria-label="{{ 'Notification'|t }}" class="{{ section_classes|without('messages-list')|join(' ') }}" {{ alternative_language ? create_attribute(({ 'lang': lang_attributes.fallback_lang, 'dir': lang_attributes.fallback_dir })) }}>
     {% set is_message_with_title = status_headings[type] %}
     {% set is_message_with_icon = type in ['error', 'default', 'warning', 'success'] %}
-    <div role="contentinfo" aria-labelledby="{{ title_ids[type] }}" class="{{ classes|without('messages-list__item')|join(' ') }}">
+    <div class="{{ classes|without('messages-list__item')|join(' ') }}">
       {% if is_message_with_title or is_message_with_icon %}
         {% if is_message_with_title %}
           <div class="hds-notification__label" role="heading" aria-level="2">