feat(overlay-alert): add aria props

momentum-design · Sep 18, 2024 · b7f2d10 · b7f2d10
1 parent 9ec4e89
commit b7f2d10
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 5 deletions.
diff --git 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
@@ -29,6 +29,8 @@ const OverlayAlert: FC<Props> = (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: Props) => {
     [shouldCloseOnEsc]
   );
 
+  const ariaLabelledbyProp = ariaLabelledby ?? (title ? id.current : undefined);
+  const ariaDescribedbyProp =
+    ariaDescribedby ?? (details && !children ? detailsId.current : undefined);
+
   return (
     <Overlay
       className={classnames(className, STYLE.wrapper)}
@@ -56,8 +62,8 @@ const OverlayAlert: FC<Props> = (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}
       >
         <div>

diff --git 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
@@ -143,13 +143,23 @@ describe('<OverlayAlert />', () => {
       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(<OverlayAlert ariaLabel={ariaLabel}>{children}</OverlayAlert>);
+      const container = mount(
+        <OverlayAlert
+          ariaLabel={ariaLabel}
+          ariaLabelledby={ariaLabelledby}
+          ariaDescribedby={ariaDescribedby}
+        >
+          {children}
+        </OverlayAlert>
+      );
 
       expect(container).toMatchSnapshot();
     });

diff --git a/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap b/src/components/OverlayAlert/OverlayAlert.unit.test.tsx.snap
@@ -173,9 +173,11 @@ exports[`<OverlayAlert /> snapshot should match snapshot with actions 1`] = `
 </OverlayAlert>
 `;
 
-exports[`<OverlayAlert /> snapshot should match snapshot with ariaLabel 1`] = `
+exports[`<OverlayAlert /> snapshot should match snapshot with aria props 1`] = `
 <OverlayAlert
+  ariaDescribedby="test-aria-describedby"
   ariaLabel="test-aria-label"
+  ariaLabelledby="test-aria-labelledby"
 >
   <Overlay
     className="md-overlay-alert-wrapper"
@@ -189,7 +191,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with ariaLabel 1`] = `
       onKeyDown={[Function]}
     >
       <ModalContainer
+        aria-describedby="test-aria-describedby"
         aria-label="test-aria-label"
+        aria-labelledby="test-aria-labelledby"
         className="md-overlay-alert-modal-container"
         focusLockProps={
           Object {
@@ -208,7 +212,9 @@ exports[`<OverlayAlert /> snapshot should match snapshot with ariaLabel 1`] = `
             hidden={true}
           />
           <div
+            aria-describedby="test-aria-describedby"
             aria-label="test-aria-label"
+            aria-labelledby="test-aria-labelledby"
             aria-modal={true}
             className="md-overlay-alert-modal-container md-modal-container-wrapper"
             data-color="primary"