diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index fd5baada08..08dad1ee85 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -30,6 +30,10 @@ export type Props = { * Callback that is called when the user dismisses the dialog. */ onDismiss?: () => void; + /** + * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the dialog. + */ + overlayAccessibilityLabel?: string; /** * Determines Whether the dialog is visible. */ @@ -101,6 +105,7 @@ const Dialog = ({ dismissable = true, dismissableBackButton = dismissable, onDismiss, + overlayAccessibilityLabel, visible = false, style, theme: themeOverrides, @@ -124,6 +129,7 @@ const Dialog = ({ dismissableBackButton={dismissableBackButton} onDismiss={onDismiss} visible={visible} + overlayAccessibilityLabel={overlayAccessibilityLabel} contentContainerStyle={[ { borderRadius, diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index eef2dd9fea..eb30c0b8e0 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -38,6 +38,22 @@ describe('Dialog', () => { expect(getByTestId('dialog')).toHaveTextContent('This is simple dialog'); }); + it('should apply overlayAccessibilityLabel to the backdrop', () => { + const { getByTestId } = render( + + This is simple dialog + + ); + + expect(getByTestId('dialog-backdrop').props.accessibilityLabel).toBe( + 'Close dialog' + ); + }); + it('should call onDismiss when dismissable', () => { const onDismiss = jest.fn(); const { getByTestId } = render(