fix(modal): use modal description as aria-described-by

launchdarkly · Jul 31, 2023 · bbcccc6 · bbcccc6
1 parent 6559d6b
commit bbcccc6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/modal/src/ModalContainer.tsx b/packages/modal/src/ModalContainer.tsx
@@ -9,7 +9,7 @@ import { cx } from 'classix';
 import { LazyMotion, m } from 'framer-motion';
 import { useState, useEffect, useRef } from 'react';
 
-import { MODAL_LABELLED_BY } from './constants';
+import { MODAL_DESCRIBED_BY, MODAL_LABELLED_BY } from './constants';
 import styles from './styles/Modal.module.css';
 import { useMediaQuery } from './utils';
 
@@ -147,7 +147,7 @@ const ModalContainer = ({
               variants={isDesktopViewport ? transitions.desktopPop : transitions.mobileSlideUp}
               role="dialog"
               aria-labelledby={MODAL_LABELLED_BY}
-              aria-describedby={MODAL_LABELLED_BY}
+              aria-describedby={MODAL_DESCRIBED_BY}
               aria-modal
               data-test-id={testId}
               className={cx(styles.modal, styles[size], className)}

diff --git a/packages/modal/src/constants.ts b/packages/modal/src/constants.ts
@@ -1 +1,4 @@
-export const MODAL_LABELLED_BY = 'modal-title';
+const MODAL_LABELLED_BY = 'modal-title';
+const MODAL_DESCRIBED_BY = 'modal-description';
+
+export { MODAL_DESCRIBED_BY, MODAL_LABELLED_BY };