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..042ab3da 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

My Title

My Description

+ +// Option 2: Using ariaLabel + +

Preferences

+

Update your settings below

+
``` - `aria-modal` is set to true automatically. @@ -197,7 +210,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 | |