diff --git a/src/components/OverlayAlert/OverlayAlert.stories.args.ts b/src/components/OverlayAlert/OverlayAlert.stories.args.ts index 0a88499b32..8c60ad2baa 100644 --- a/src/components/OverlayAlert/OverlayAlert.stories.args.ts +++ b/src/components/OverlayAlert/OverlayAlert.stories.args.ts @@ -107,6 +107,30 @@ const overlayAlertArgTypes = { }, }, }, + ariaLabelledby: { + description: 'Provides the ariaLabelledby within this component as a `string`.', + control: { type: 'text' }, + table: { + type: { + summary: 'string', + }, + defaultValue: { + summary: 'undefined', + }, + }, + }, + ariaDescribedby: { + description: 'Provides the ariaDescribedby within this component as a `string`.', + control: { type: 'text' }, + table: { + type: { + summary: 'string', + }, + defaultValue: { + summary: 'undefined', + }, + }, + }, }; export { overlayAlertArgTypes }; diff --git a/src/components/OverlayAlert/OverlayAlert.tsx b/src/components/OverlayAlert/OverlayAlert.tsx index 41c4dcb3bf..68419268c2 100644 --- a/src/components/OverlayAlert/OverlayAlert.tsx +++ b/src/components/OverlayAlert/OverlayAlert.tsx @@ -29,6 +29,8 @@ const OverlayAlert: FC = (props: Props) => { focusLockProps = DEFAULTS.FOCUS_LOCK_PROPS, onClose, ariaLabel, + ariaLabelledby, + ariaDescribedby, ...other } = props; const id = useRef(uuidV4()); @@ -44,6 +46,10 @@ const OverlayAlert: FC = (props: Props) => { [shouldCloseOnEsc] ); + const ariaLabelledbyProp = ariaLabelledby ?? (title ? id.current : undefined); + const ariaDescribedbyProp = + ariaDescribedby ?? (details && !children ? detailsId.current : undefined); + return ( = (props: Props) => { round={75} color={modalColor} aria-label={ariaLabel} - aria-labelledby={title ? id.current : undefined} - aria-describedby={details && !children ? detailsId.current : undefined} + aria-labelledby={ariaLabelledbyProp} + aria-describedby={ariaDescribedbyProp} focusLockProps={focusLockProps} >
diff --git a/src/components/OverlayAlert/OverlayAlert.types.ts b/src/components/OverlayAlert/OverlayAlert.types.ts index 8ecb32b19d..86c24a2b21 100644 --- a/src/components/OverlayAlert/OverlayAlert.types.ts +++ b/src/components/OverlayAlert/OverlayAlert.types.ts @@ -75,4 +75,14 @@ export interface Props extends OverlayProps { * ariaLabel for this OverlayAlert which will be passed onto ModalContainer. */ ariaLabel?: string; + + /** + * ariaLabeledby for this OverlayAlert which will be passed onto ModalContainer. + */ + ariaLabelledby?: string; + + /** + * ariaDescribedby for this OverlayAlert which will be passed onto ModalContainer. + */ + ariaDescribedby?: string; } diff --git a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx index a340aa7940..6c08dd6f30 100644 --- a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx +++ b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx @@ -143,13 +143,23 @@ describe('', () => { expect(container).toMatchSnapshot(); }); - it('should match snapshot with ariaLabel', () => { + it('should match snapshot with aria props', () => { expect.assertions(1); const ariaLabel = 'test-aria-label'; + const ariaLabelledby = 'test-aria-labelledby'; + const ariaDescribedby = 'test-aria-describedby'; const children = 'example-children'; - const container = mount({children}); + const container = mount( + + {children} + + ); expect(container).toMatchSnapshot(); }); diff --git a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap index 396c824f8d..e9e0b12435 100644 --- a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap +++ b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap @@ -173,9 +173,11 @@ exports[` snapshot should match snapshot with actions 1`] = ` `; -exports[` snapshot should match snapshot with ariaLabel 1`] = ` +exports[` snapshot should match snapshot with aria props 1`] = ` snapshot should match snapshot with ariaLabel 1`] = ` onKeyDown={[Function]} > snapshot should match snapshot with ariaLabel 1`] = ` hidden={true} />