revert(modal): keep the scrim reachable by assistive technology

Author: Konstantin Marushchak

src/components/Modal.tsx

@@ -32,6 +32,10 @@ export type Props = {
    * Callback that is called when the user dismisses the modal.
    */
   onDismiss?: () => void;
+  /**
+   * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.
+   */
+  overlayAccessibilityLabel?: string;
   /**
    * Accessible name for the modal.
    */
@@ -131,6 +135,7 @@ function Modal({
   dismissable = true,
   dismissableBackButton = dismissable,
   visible = false,
+  overlayAccessibilityLabel = 'Close modal',
   'aria-label': ariaLabel,
   overlayTestID,
   onDismiss = () => {},
@@ -234,11 +239,14 @@ function Modal({
       testID={testID}
     >
       <AnimatedPressable
+        aria-label={overlayAccessibilityLabel}
+        role="button"
         disabled={!dismissable}
-        aria-hidden
         onPress={dismissable ? onDismissCallback : undefined}
         style={[styles.backdrop, backdropStyle, backdropTransitionStyle]}
         testID={overlayTestID}
+        importantForAccessibility={dismissable ? 'auto' : 'no'}
+        accessible={dismissable}
       />
       <View
         style={[

src/components/__tests__/Dialog.test.tsx

@@ -23,7 +23,7 @@ const BackHandler = RNBackHandler as BackHandlerStatic;
 describe('Dialog', () => {
   it('should render passed children', async () => {
     await render(
-      <Dialog visible testID="dialog" overlayTestID="backdrop">
+      <Dialog visible testID="dialog">
         <Text>This is simple dialog</Text>
       </Dialog>
     );
@@ -36,20 +36,12 @@ describe('Dialog', () => {
   it('should call onDismiss when dismissable', async () => {
     const onDismiss = jest.fn();
     await render(
-      <Dialog
-        visible
-        onDismiss={onDismiss}
-        dismissable
-        testID="dialog"
-        overlayTestID="backdrop"
-      >
+      <Dialog visible onDismiss={onDismiss} dismissable testID="dialog">
         <Text>This is simple dialog</Text>
       </Dialog>
     );
 
-    await userEvent.press(
-      screen.getByTestId('backdrop', { includeHiddenElements: true })
-    );
+    await userEvent.press(screen.getByLabelText('Close modal'));
 
     await act(() => {
       jest.runAllTimers();
@@ -60,20 +52,12 @@ describe('Dialog', () => {
   it('should not call onDismiss when dismissable is false', async () => {
     const onDismiss = jest.fn();
     await render(
-      <Dialog
-        visible
-        onDismiss={onDismiss}
-        dismissable={false}
-        testID="dialog"
-        overlayTestID="backdrop"
-      >
+      <Dialog visible onDismiss={onDismiss} dismissable={false} testID="dialog">
         <Text>This is simple dialog</Text>
       </Dialog>
     );
 
-    await userEvent.press(
-      screen.getByTestId('backdrop', { includeHiddenElements: true })
-    );
+    await userEvent.press(screen.getByLabelText('Close modal'));
 
     await act(() => {
       jest.runAllTimers();
@@ -91,15 +75,12 @@ describe('Dialog', () => {
         dismissable={false}
         dismissableBackButton
         testID="dialog"
-        overlayTestID="backdrop"
       >
         <Text>This is simple dialog</Text>
       </Dialog>
     );
 
-    await userEvent.press(
-      screen.getByTestId('backdrop', { includeHiddenElements: true })
-    );
+    await userEvent.press(screen.getByLabelText('Close modal'));
 
     await act(() => {
       jest.runAllTimers();