diff --git a/packages/terra-alert/CHANGELOG.md b/packages/terra-alert/CHANGELOG.md index e274943100b..04b767af86a 100644 --- a/packages/terra-alert/CHANGELOG.md +++ b/packages/terra-alert/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added `id` prop. + ## 4.90.0 - (February 27, 2024) * Changed diff --git a/packages/terra-alert/src/Alert.jsx b/packages/terra-alert/src/Alert.jsx index fbb445df05f..ff6f1fd01bb 100644 --- a/packages/terra-alert/src/Alert.jsx +++ b/packages/terra-alert/src/Alert.jsx @@ -63,6 +63,12 @@ const propTypes = { * Callback function triggered when Dismiss button is clicked. The presence of this prop will cause the Dismiss button to be included on the notification banner. */ onDismiss: PropTypes.func, + /** + * The unique ID of the alert that is used to identify the alert title and message content. + * These IDs can be used to associate action elements with the alert via aria-describedby, in the format + * `alert-title-${id}`. + * */ + id: PropTypes.string, /** * @private * intl object programmatically imported through injectIntl from react-intl. @@ -136,6 +142,7 @@ const Alert = ({ disableAlertActionFocus, onDismiss, intl, + id, role, title, type, @@ -169,7 +176,7 @@ const Alert = ({ const focusContainerClassName = cx('focus-container'); const contentContainerClassName = cx('content-container'); - const alertId = uuidv4(); + const alertId = id || uuidv4(); const alertTitleId = `alert-title-${alertId}`; const alertMessageId = `alert-message-${alertId}`; @@ -234,6 +241,7 @@ const Alert = ({ >
diff --git a/packages/terra-alert/tests/jest/Alert.test.jsx b/packages/terra-alert/tests/jest/Alert.test.jsx index 88b6c6fa2f8..9266f8bad0e 100644 --- a/packages/terra-alert/tests/jest/Alert.test.jsx +++ b/packages/terra-alert/tests/jest/Alert.test.jsx @@ -79,6 +79,13 @@ describe('Alert with props', () => { expect(alertTitle.text()).toEqual('Custom Title'); expect(wrapper).toMatchSnapshot(); }); + + it('should render an alert with provided id', () => { + const wrapper = enzymeIntl.shallowWithIntl().dive(); + + expect(wrapper.find('.title').prop('id')).toEqual('alert-title-alert-id'); + expect(wrapper.find('.section').prop('id')).toEqual('alert-message-alert-id'); + }); }); describe('Dismissible Alert that includes actions section', () => { diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 3b45131a8b3..7400e0d2224 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added documentation on using new `id` prop with action elements in `terra-alert`. + ## 1.61.0 - (February 28, 2024) * Updated diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/alert/AccessibilityGuide.2.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/alert/AccessibilityGuide.2.doc.mdx index 330326ca2ac..43c5426b5ae 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/alert/AccessibilityGuide.2.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/alert/AccessibilityGuide.2.doc.mdx @@ -4,6 +4,7 @@ import Whitespace from '../../common/layout-helpers/Whitespace'; import AlertActionFocusDemo from './example/AlertActionFocusDemo'; import CustomExample from './example/CustomExample?dev-site-example'; import CustomExampleNoTitle from './example/CustomExampleNoTitle?dev-site-example'; +import ActionExample from './example/ActionExample?dev-site-example'; import Hyperlink from 'terra-hyperlink'; @@ -116,5 +117,18 @@ In combination with the notification criticality, screen reader users should und +#### Actions + +- Interactable elements belonging to notification banners (such as dismiss buttons and action elements) must be associated with the banner. + This is handled by default for dismiss buttons, but not consumer-defined action elements. +- Terra provides an optional `id` prop to facilitate associating action elements to the notification banner. Action elements should set + `aria-describedby` to the title of the notification banner. + - `alert-title-${id}` - The ID of the title of the notification banner (e.g. "Alert", "Error", "Warning", custom titles, etc.) + + + ## Linked References: 1. ["Accessible Rich Internet Applications (WAI-ARIA) 1.3"](https://w3c.github.io/aria/). World Wide Web Consortium. Last updated 01 May 2023. Retrieved 2 May 2023. \ No newline at end of file diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/alert/example/ActionExample.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/alert/example/ActionExample.jsx index a7cee2da211..3c68ed7c6ee 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/alert/example/ActionExample.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/alert/example/ActionExample.jsx @@ -19,6 +19,7 @@ const AlertActionButton = () => { customIcon={} action={(