[#356] WCAG 4.1.3 AA: Success message not announced by screen readers…

… (Issue 37)
civictheme · Nov 22, 2024 · 7885dd3 · 7885dd3
1 parent 6518c1c
commit 7885dd3
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/components/03-organisms/message/__snapshots__/message.test.js.snap b/components/03-organisms/message/__snapshots__/message.test.js.snap
@@ -9,6 +9,7 @@ exports[`Message Component does not render when description and title are empty
 
   <div
     aria-label="warning"
+    aria-live="assertive"
     class="ct-message ct-theme-light ct-message--warning "
     role="contentinfo"
   >
@@ -146,6 +147,7 @@ exports[`Message Component renders with default type and theme 1`] = `
 
   <div
     aria-label="information"
+    aria-live="assertive"
     class="ct-message ct-theme-light ct-message--information "
     role="contentinfo"
   >
@@ -214,6 +216,7 @@ exports[`Message Component renders without description 1`] = `
 
   <div
     aria-label="success"
+    aria-live="assertive"
     class="ct-message ct-theme-light ct-message--success additional-class"
     role="contentinfo"
   >

diff --git a/components/03-organisms/message/message.twig b/components/03-organisms/message/message.twig
@@ -27,7 +27,7 @@
   class="ct-message {{ modifier_class -}}"
   role="{% if type == 'error' %}alert{% else %}contentinfo{% endif %}"
   aria-label="{{ type }}"
-  {% if type == 'error' %}aria-live="polite"{% endif %}
+  {% if type == 'error' %}aria-live="polite"{% else %}aria-live="assertive"{% endif %}
   {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
 >
   {% if icons[type] is defined %}