BREAKING CHANGE(web-twig): The alert role has been removed for Alert …

…component #DS-1175 See the Alert: role="alert" section in the web-twig package Migration Guide to version 3.
lmc-eu · Jun 10, 2024 · 3ae0524 · 3ae0524
1 parent 724c66a
commit 3ae0524
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 8 deletions.
diff --git a/docs/migrations/web-twig/MIGRATION-v3.md b/docs/migrations/web-twig/MIGRATION-v3.md
@@ -11,6 +11,7 @@ Introducing version 3 of the _spirit-web-twig_ package
   - [Placements in Tooltip and Dropdown](#placements-in-tooltip-and-dropdown)
 - [Component Changes](#component-changes)
   - [Alert: `danger` Icon](#alert-danger-icon)
+  - [Alert: `role="alert"`](#alert-rolealert)
   - [Breadcrumbs: `goBackTitle` Prop](#breadcrumbs-gobacktitle-prop)
   - [Dropdown: `id` Prop](#dropdown-id-prop)
   - [Grid: Breakpoint Props](#grid-breakpoint-props)
@@ -75,6 +76,23 @@ Please, add the `danger` icon to your project's assets.
 
 Either install newer version of the `spirit-icons` package or add `danger` named icon to your project's icons.
 
+### Alert: `role="alert"`
+
+The `role="alert"` has been removed from the default setting of the component.
+
+The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element,
+the browser will send out an accessible alert event to assistive technology products which can then notify the user.
+The alert role should only be used for information that requires the user's immediate attention, which is typically
+content that is dynamically displayed (such as form validation message etc.), not for content that appears on page load.
+It should not be used on HTML that the user hasn't interacted with.
+
+For more information see [ARIA: alert role][alert-role-documentation].
+
+#### Migration Guide
+
+In case you need to use the component as an information that requires the user's immediate attention,
+you can use `role="alert"` as an [additional attribute][readme-additional-attributes].
+
 ### Breadcrumbs: `goBackTitle` Prop
 
 The `goBackTitle` prop is required for the `Breadcrumbs` component.
@@ -210,7 +228,9 @@ See [`Tooltip` documentation][tooltip-readme] for more details and examples.
 
 Please refer back to this guide or reach out to our team if you encounter any issues during migration.
 
+[alert-role-documentation]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
 [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#placement
 [dropdown-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Dropdown/README.md
+[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes
 [readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#deprecations
 [tooltip-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Tooltip/README.md
diff --git a/packages/web-twig/src/Resources/components/Alert/Alert.twig b/packages/web-twig/src/Resources/components/Alert/Alert.twig
@@ -22,8 +22,9 @@
   {%- set _iconNameByColor = 'danger' -%}
 {% endif %}
 {%- set _iconNameValue = _iconName | default(_iconNameByColor) -%}
+{%- set _allowedAttributes = [ 'role' ] -%}
 
-<{{ _elementType }} {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }} role="alert">
+<{{ _elementType }} {{ mainProps(props, _allowedAttributes) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
   <Icon name="{{ _iconNameValue }}" />
   <div>
     {%- block content %}{% endblock -%}

diff --git a/packages/web-twig/src/Resources/components/Alert/README.md b/packages/web-twig/src/Resources/components/Alert/README.md
@@ -54,8 +54,10 @@ On top of the API options, the components accept [additional attributes][readme-
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
 and [escape hatches][readme-escape-hatches].
 
+⚠️ Please pay attention to the accessibility setting when Alert is dynamically displayed. In cases where you need to use the component as an information that requires the user's immediate attention,
+you can set `role="alert"` as an [additional attributes][readme-additional-attributes].
+
 [alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Alert
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
 [icon-package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes

diff --git a/packages/web-twig/src/Resources/components/Alert/__tests__/__fixtures__/alertDefault.twig b/packages/web-twig/src/Resources/components/Alert/__tests__/__fixtures__/alertDefault.twig
@@ -16,3 +16,6 @@
 <Alert color="informative" iconName="profile" isCentered>
     Message
 </Alert>
+<Alert color="informative" iconName="profile" role="alert">
+    Message
+</Alert>
diff --git a/...b-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html b/...b-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div class="Alert Alert--success" role="alert">
+    <div class="Alert Alert--success">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a96377f6ad8f3c0b60d6900c98ad9534" aria-hidden="true">
       <path d="M9.00012 16.5447L5.50012 13.0447C5.11012 12.6547 4.49012 12.6547 4.10012 13.0447C3.71012 13.4347 3.71012 14.0547 4.10012 14.4447L8.29012 18.6347C8.68012 19.0247 9.31012 19.0247 9.70012 18.6347L20.3001 8.04473C20.6901 7.65473 20.6901 7.03473 20.3001 6.64473C19.9101 6.25473 19.2901 6.25473 18.9001 6.64473L9.00012 16.5447Z" fill="currentColor">
       </path></svg>
@@ -14,7 +14,7 @@
       </div>
     </div>
 
-    <div class="Alert Alert--danger" role="alert">
+    <div class="Alert Alert--danger">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="b57548dc360a6ba49ba4a19a8d0c8ad8" aria-hidden="true">
       <path d="M2.72998 21.0001H21.26C22.03 21.0001 22.51 20.1701 22.13 19.5001L12.86 3.50006C12.47 2.83006 11.51 2.83006 11.13 3.50006L1.85998 19.5001C1.47998 20.1701 1.95998 21.0001 2.72998 21.0001ZM13 18.0001H11V16.0001H13V18.0001ZM12 14.0001C11.45 14.0001 11 13.5501 11 13.0001V11.0001C11 10.4501 11.45 10.0001 12 10.0001C12.55 10.0001 13 10.4501 13 11.0001V13.0001C13 13.5501 12.55 14.0001 12 14.0001Z" fill="currentColor">
       </path></svg>
@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div class="Alert Alert--informative" role="alert">
+    <div class="Alert Alert--informative">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="34d8b39e82bfe6914ca2f600e37c11cf" aria-hidden="true">
       <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" fill="currentColor">
       </path></svg>
@@ -32,7 +32,7 @@
       </div>
     </div>
 
-    <div class="Alert Alert--warning" role="alert">
+    <div class="Alert Alert--warning">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="f0c4c080075841bbc911dd74dc9df8be" aria-hidden="true">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.9991C17.5228 21.9991 22 17.522 22 11.9991C22 6.4763 17.5228 1.99915 12 1.99915C6.47715 1.99915 2 6.4763 2 11.9991C2 17.522 6.47715 21.9991 12 21.9991ZM12 12C11.45 12 11 11.55 11 11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11C13 11.55 12.55 12 12 12ZM13 14V16H11V14H13Z" fill="currentColor">
       </path></svg>
@@ -41,7 +41,7 @@
       </div>
     </div>
 
-    <div class="Alert Alert--informative Alert--center" role="alert">
+    <div class="Alert Alert--informative Alert--center">
       <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
       <use href="#34d8b39e82bfe6914ca2f600e37c11cf">
       </use></svg>
@@ -50,13 +50,22 @@
       </div>
     </div>
 
-    <div class="Alert Alert--informative Alert--center" role="alert">
+    <div class="Alert Alert--informative Alert--center">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="7d6a00dcae19dca54f8bb856d21618b6" aria-hidden="true">
       <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z" fill="currentColor">
       </path></svg>
       <div>
         Message
       </div>
     </div>
+
+    <div role="alert" class="Alert Alert--informative">
+      <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
+      <use href="#7d6a00dcae19dca54f8bb856d21618b6">
+      </use></svg>
+      <div>
+        Message
+      </div>
+    </div>
   </body>
 </html>