From 4ad33d290df2eab56538d49cb999b9210c7dc4c6 Mon Sep 17 00:00:00 2001 From: Parsa Date: Fri, 19 Sep 2025 11:59:35 -0700 Subject: [PATCH 1/3] feat: add ariaLabel prop --- react-responsive-modal/__tests__/index.test.tsx | 14 ++++++++++++++ react-responsive-modal/src/index.tsx | 6 ++++++ website/src/docs/index.mdx | 3 ++- 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/react-responsive-modal/__tests__/index.test.tsx b/react-responsive-modal/__tests__/index.test.tsx index 2cc47191..ed2cbe89 100644 --- a/react-responsive-modal/__tests__/index.test.tsx +++ b/react-responsive-modal/__tests__/index.test.tsx @@ -533,4 +533,18 @@ describe('modal', () => { expect(document.getElementById(modalId)).toBeInTheDocument(); }); }); + + describe('prop: ariaLabel', () => { + it('should render modal with aria-label attribute', async () => { + const ariaLabel = 'Custom modal label'; + const { getByTestId } = render( + null} ariaLabel={ariaLabel}> +
modal content
+ , + ); + + const modal = getByTestId('modal'); + expect(modal.getAttribute('aria-label')).toBe(ariaLabel); + }); + }); }); diff --git a/react-responsive-modal/src/index.tsx b/react-responsive-modal/src/index.tsx index 8429b2fd..0f9e3cde 100644 --- a/react-responsive-modal/src/index.tsx +++ b/react-responsive-modal/src/index.tsx @@ -120,6 +120,10 @@ export interface ModalProps { * Default to 'dialog'. */ role?: string; + /** + * ARIA label for modal + */ + ariaLabel?: string; /** * ARIA label for modal */ @@ -179,6 +183,7 @@ export const Modal = React.forwardRef( classNames, styles, role = 'dialog', + ariaLabel, ariaDescribedby, ariaLabelledby, containerId, @@ -351,6 +356,7 @@ export const Modal = React.forwardRef( id={modalId} role={role} aria-modal="true" + aria-label={ariaLabel} aria-labelledby={ariaLabelledby} aria-describedby={ariaDescribedby} data-testid="modal" diff --git a/website/src/docs/index.mdx b/website/src/docs/index.mdx index 27e64753..c681629a 100644 --- a/website/src/docs/index.mdx +++ b/website/src/docs/index.mdx @@ -197,7 +197,8 @@ By default, the Modal will be rendered at the end of the html body tag. If you w | **animationDuration** | `number` | 300 | Animation duration in milliseconds. | | **role** | `string` | "dialog" | ARIA role for modal | | **ref** | `React.RefElement` | undefined | Ref for modal dialog element | -| **ariaLabelledby** | `string` | | ARIA label for modal | +| **ariaLabel** | `string` | | ARIA label for modal | +| **ariaLabelledby** | `string` | | ARIA labelledby for modal | | **ariaDescribedby** | `string` | | ARIA description for modal | | **containerId** | `string` | | id attribute for modal container | | **modalId** | `string` | | id attribute for modal | | From 23946b4813a5b8337cdbe87f54b415cd93645dfa Mon Sep 17 00:00:00 2001 From: Parsa Date: Fri, 19 Sep 2025 12:31:20 -0700 Subject: [PATCH 2/3] update docs --- website/src/docs/index.mdx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/website/src/docs/index.mdx b/website/src/docs/index.mdx index c681629a..d845e6cc 100644 --- a/website/src/docs/index.mdx +++ b/website/src/docs/index.mdx @@ -155,18 +155,31 @@ By default, the Modal will be rendered at the end of the html body tag. If you w ## Accessibility -- Use the `aria-labelledby` and `aria-describedby` props to follow the [ARIA best practices](https://www.w3.org/TR/wai-aria-practices/#dialog_modal). +- Follow the [ARIA best practices](https://www.w3.org/TR/wai-aria-practices/#dialog_modal) by using either: + - `ariaLabelledby` and `ariaDescribedby` props to reference visible content, OR + - `ariaLabel` prop for a simple accessible label ```javascript +// Option 1: Using ariaLabelledby and ariaDescribedby for complex modals

My Title

My Description

 + +// Option 2: Using ariaLabel for simple modals + +

Preferences

+

Update your settings below

+ ``` - `aria-modal` is set to true automatically. From 6dfbe5906127fadc5baf2de62cf892f9925b07ff Mon Sep 17 00:00:00 2001 From: Parsa Date: Fri, 19 Sep 2025 12:34:15 -0700 Subject: [PATCH 3/3] Update docs --- website/src/docs/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/src/docs/index.mdx b/website/src/docs/index.mdx index d845e6cc..042ab3da 100644 --- a/website/src/docs/index.mdx +++ b/website/src/docs/index.mdx @@ -160,7 +160,7 @@ By default, the Modal will be rendered at the end of the html body tag. If you w - `ariaLabel` prop for a simple accessible label ```javascript -// Option 1: Using ariaLabelledby and ariaDescribedby for complex modals +// Option 1: Using ariaLabelledby and ariaDescribedby My Description

 -// Option 2: Using ariaLabel for simple modals +// Option 2: Using ariaLabel