From 3a9f26e09fde207b423a53ed21c0a37c115f935a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20=C4=8Curda?= Date: Mon, 6 May 2024 11:02:48 +0200 Subject: [PATCH] BREAKING CHANGE(web-react): The alert role has been removed for Alert component #DS-1175 --- docs/migrations/web-react/MIGRATION-v2.md | 20 +++++++++++++++++++ .../web-react/src/components/Alert/Alert.tsx | 2 +- .../web-react/src/components/Alert/README.md | 3 +++ .../components/Alert/__tests__/Alert.test.tsx | 7 ------- 4 files changed, 24 insertions(+), 8 deletions(-) diff --git a/docs/migrations/web-react/MIGRATION-v2.md b/docs/migrations/web-react/MIGRATION-v2.md index 24ac4068b0..3e60116a5a 100644 --- a/docs/migrations/web-react/MIGRATION-v2.md +++ b/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 diff --git a/packages/web-react/src/components/Alert/Alert.tsx b/packages/web-react/src/components/Alert/Alert.tsx index 1be8f43657..173ae4eb7c 100644 --- a/packages/web-react/src/components/Alert/Alert.tsx +++ b/packages/web-react/src/components/Alert/Alert.tsx @@ -26,7 +26,7 @@ export const Alert = (props: SpiritAler const alertIconName = useAlertIcon({ color, iconName, ...otherProps }); return ( - +
{children}
 diff --git a/packages/web-react/src/components/Alert/README.md b/packages/web-react/src/components/Alert/README.md index 9c83f047b1..15e2d6e73c 100644 --- a/packages/web-react/src/components/Alert/README.md +++ b/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 diff --git a/packages/web-react/src/components/Alert/__tests__/Alert.test.tsx b/packages/web-react/src/components/Alert/__tests__/Alert.test.tsx index f18f89e799..b8cff6b87b 100644 --- a/packages/web-react/src/components/Alert/__tests__/Alert.test.tsx +++ b/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(Hello World); - - const element = dom.getByRole('alert') as HTMLElement; - expect(element).toBeInTheDocument(); - }); - it('should have icon', () => { const dom = render(Hello World);