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

… component #DS-1175

docs/migrations/web-react/MIGRATION-v2.md

@@ -12,6 +12,7 @@ Introducing version 2 of the _spirit-web-react_ package
   - [The `id` Prop in Dropdown and Collapse](#the-id-prop-in-dropdown-and-collapse)
 - [Component Changes](#component-changes)
   - [Alert: `danger` Icon](#alert-danger-icon)
+  - [Alert: `role="alert"`](#alert-rolealert)
   - [FileUploader: FileUploaderAttachment `buttonLabel` and `editButtonLabel` Props](#fileuploader-fileuploaderattachment-buttonlabel-and-editbuttonlabel-props)
   - [Dropdown: Refactored](#dropdown-refactored)
   - [Grid: Breakpoint Props](#grid-breakpoint-props)
@@ -98,6 +99,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 cases where you need to use the component as an information that requires the user's immediate attention,
+you can use `role="alert"` as an [additional attributes][readme-additional-attributes].
+
 ### FileUploader: FileUploaderAttachment `buttonLabel` and `editButtonLabel` Props
 
 The `buttonLabel` and `editButtonLabel` props were removed from the `FileUploaderAttachment` component.
@@ -314,6 +332,8 @@ Use:
 
 Please refer back to these instructions 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
+[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
 [readme-codemods]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/README.md
 [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-react/src/components/Dropdown/README.md

packages/web-react/src/components/Alert/Alert.tsx

@@ -26,7 +26,7 @@ export const Alert = <T extends ElementType = 'div', E = void>(props: SpiritAler
   const alertIconName = useAlertIcon({ color, iconName, ...otherProps });
 
   return (
-    <ElementTag {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)} role="alert">
+    <ElementTag {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)}>
       <Icon name={alertIconName} />
       <div>{children}</div>
     </ElementTag>

packages/web-react/src/components/Alert/README.md

@@ -44,6 +44,9 @@ and [escape hatches][readme-escape-hatches].
 
 For detailed information see [Alert][alert] component.
 
+⚠️ 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/blob/main/packages/web/src/scss/components/Alert/README.md
 [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

packages/web-react/src/components/Alert/__tests__/Alert.test.tsx

@@ -30,13 +30,6 @@ describe('Alert', () => {
     expect(element.textContent).toBe('Hello World');
   });
 
-  it('should have alert role', () => {
-    const dom = render(<Alert>Hello World</Alert>);
-
-    const element = dom.getByRole('alert') as HTMLElement;
-    expect(element).toBeInTheDocument();
-  });
-
   it('should have icon', () => {
     const dom = render(<Alert>Hello World</Alert>);