From 7346fd4ad66783e6ac9cb05f615108263a7cf317 Mon Sep 17 00:00:00 2001 From: "Jeferson S. Brito" Date: Mon, 5 Jun 2023 10:29:42 -0300 Subject: [PATCH 1/2] feat: add overlayAccessibilityLabel prop to Dialog --- src/components/Dialog/Dialog.tsx | 6 ++++++ 1 file changed, 6 insertions(+) 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, From 3f45a1632e017b29db0d16c58dafd6934c63d101 Mon Sep 17 00:00:00 2001 From: Jeferson Brito Date: Sun, 16 Aug 2026 18:04:18 -0300 Subject: [PATCH 2/2] feat: add a regression test for Dialog overlayA11yLabel prop --- src/components/__tests__/Dialog.test.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) 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(