diff --git a/docs/migrations/web-twig/MIGRATION-v3.md b/docs/migrations/web-twig/MIGRATION-v3.md index 72168ffa70..a9ee194d51 100644 --- 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 index 40455eecba..1ec446b1b5 100644 --- 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) }}>
{%- 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 index c7ea391557..2a3e10421a 100644 --- a/packages/web-twig/src/Resources/components/Alert/README.md +++ b/packages/web-twig/src/Resources/components/Alert/README.md @@ -54,6 +54,9 @@ 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 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 index 09f2306fdb..ec0589d729 100644 --- 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 @@ Message + + Message + diff --git a/packages/web-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html index 0a9967ca02..c83b5c46e5 100644 --- a/packages/web-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html @@ -5,7 +5,7 @@ - - - - - - + +