feat: add overlayAccessibilityLabel prop to Dialog

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,

src/components/__tests__/Dialog.test.tsx

@@ -31,13 +31,29 @@
   it('should render passed children', () => {
     const { getByTestId } = render(
       <Dialog visible testID="dialog">
         <Text>This is simple dialog</Text>
       </Dialog>
     );
 
     expect(getByTestId('dialog')).toHaveTextContent('This is simple dialog');
   });
 
+  it('should apply overlayAccessibilityLabel to the backdrop', () => {
+    const { getByTestId } = render(
+      <Dialog
+        visible
+        overlayAccessibilityLabel="Close dialog"
+        testID="dialog"
+      >
+        <Text>This is simple dialog</Text>
+      </Dialog>
+    );
+
+    expect(getByTestId('dialog-backdrop').props.accessibilityLabel).toBe(
+      'Close dialog'
+    );
+  });
+
   it('should call onDismiss when dismissable', () => {
     const onDismiss = jest.fn();
     const { getByTestId } = render(