fix: added close drawer accessibility tap area (#11184)

**Motivation**

Currently, a user can tap the `Overlay` next to an open drawer to close
the drawer. This is useful in an Accessibility setting when swipe
actions are not obvious to the user. Unfortunately, it is not obvious to
someone with a visual deficit that this area can be tapped to close the
drawer, as this overlay does not have an accessibilityLabel prop
exposed.

This PR exposes an `accessibilityLabel` prop on this overlay component
and modifies existing accessibility props to allow for accessibility tap
permissions on the overlay component. It then surfaces this prop at the
`Drawer` level as `closeAccessibilityLabel`.
 
**Test plan**

Open up the example app with TalkBack (Android) or VoiceOver (iOS)
enabled. Tap on the overlay next to the drawer and observe that it will
now read out as "Close drawer".

example/src/index.tsx

@@ -230,6 +230,7 @@ export default function App() {
               <Drawer.Navigator
                 screenOptions={{
                   drawerType: isLargeScreen ? 'permanent' : undefined,
+                  overlayAccessibilityLabel: 'Close drawer',
                 }}
               >
                 <Drawer.Screen

packages/drawer/src/types.tsx

@@ -171,6 +171,11 @@ export type DrawerNavigationOptions = HeaderOptions & {
    */
   overlayColor?: string;
 
+  /**
+   * Screen readers will read this string when the user presses on the overlay adjacent to an opened drawer. Defaults to "Close drawer".
+   * **/
+  overlayAccessibilityLabel?: string;
+
   /**
    * Style object for the component wrapping the screen content.
    */
@@ -310,4 +315,5 @@ export type DrawerProps = {
   swipeEdgeWidth: number;
   swipeEnabled: boolean;
   swipeVelocityThreshold: number;
+  overlayAccessibilityLabel?: string;
 };

packages/drawer/src/views/DrawerView.tsx

@@ -113,6 +113,7 @@ function DrawerViewBase({
       Platform.OS !== 'windows' &&
       Platform.OS !== 'macos',
     swipeMinDistance = 60,
+    overlayAccessibilityLabel,
   } = descriptors[focusedRouteKey].options;
 
   const [loaded, setLoaded] = React.useState([focusedRouteKey]);
@@ -296,6 +297,7 @@ function DrawerViewBase({
         statusBarAnimation={drawerStatusBarAnimation}
         keyboardDismissMode={keyboardDismissMode}
         drawerType={drawerType}
+        overlayAccessibilityLabel={overlayAccessibilityLabel}
         drawerPosition={drawerPosition}
         drawerStyle={[
           {

packages/drawer/src/views/legacy/Drawer.tsx

@@ -492,6 +492,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
       renderDrawerContent,
       renderSceneContent,
       gestureHandlerProps,
+      overlayAccessibilityLabel,
     } = this.props;
 
     const isOpen = drawerType === 'permanent' ? true : open;
@@ -582,6 +583,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
                   <Overlay
                     progress={progress}
                     onPress={() => this.toggleDrawer(false)}
+                    accessibilityLabel={overlayAccessibilityLabel}
                     style={overlayStyle as any}
                     accessibilityElementsHidden={!isOpen}
                     importantForAccessibility={
@@ -609,7 +611,6 @@ export default class DrawerView extends React.Component<DrawerProps> {
               />
             )}
             <Animated.View
-              accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}
               removeClippedSubviews={Platform.OS !== 'ios'}
               onLayout={this.handleDrawerLayout}
               style={[

packages/drawer/src/views/legacy/Overlay.tsx

@@ -18,10 +18,17 @@ const PROGRESS_EPSILON = 0.05;
 type Props = React.ComponentProps<typeof Animated.View> & {
   progress: Animated.Node<number>;
   onPress: () => void;
+  accessibilityLabel?: string;
 };
 
 const Overlay = React.forwardRef(function Overlay(
-  { progress, onPress, style, ...props }: Props,
+  {
+    progress,
+    onPress,
+    style,
+    accessibilityLabel = 'Close drawer',
+    ...props
+  }: Props,
   ref: React.Ref<Animated.View>
 ) {
   const animatedStyle = {
@@ -48,7 +55,12 @@ const Overlay = React.forwardRef(function Overlay(
       ref={ref}
       style={[styles.overlay, overlayStyle, animatedStyle, style]}
     >
-      <Pressable onPress={onPress} style={styles.pressable} />
+      <Pressable
+        onPress={onPress}
+        style={styles.pressable}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      />
     </Animated.View>
   );
 });

packages/drawer/src/views/modern/Drawer.tsx

@@ -61,6 +61,7 @@ export default function Drawer({
   swipeEdgeWidth,
   swipeEnabled,
   swipeVelocityThreshold,
+  overlayAccessibilityLabel,
 }: DrawerProps) {
   const getDrawerWidth = (): number => {
     const { width = DEFAULT_DRAWER_WIDTH } =
@@ -378,11 +379,11 @@ export default function Drawer({
                   toggleDrawer({ open: false, isUserInitiated: true })
                 }
                 style={overlayStyle}
+                accessibilityLabel={overlayAccessibilityLabel}
               />
             ) : null}
           </Animated.View>
           <Animated.View
-            accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}
             removeClippedSubviews={Platform.OS !== 'ios'}
             style={[
               styles.container,

packages/drawer/src/views/modern/Overlay.tsx

@@ -10,10 +10,17 @@ const PROGRESS_EPSILON = 0.05;
 type Props = React.ComponentProps<typeof Animated.View> & {
   progress: Animated.SharedValue<number>;
   onPress: () => void;
+  accessibilityLabel?: string;
 };
 
 const Overlay = React.forwardRef(function Overlay(
-  { progress, onPress, style, ...props }: Props,
+  {
+    progress,
+    onPress,
+    style,
+    accessibilityLabel = 'Close drawer',
+    ...props
+  }: Props,
   ref: React.Ref<Animated.View>
 ) {
   const animatedStyle = useAnimatedStyle(() => {
@@ -42,7 +49,12 @@ const Overlay = React.forwardRef(function Overlay(
       style={[styles.overlay, overlayStyle, animatedStyle, style]}
       animatedProps={animatedProps}
     >
-      <Pressable onPress={onPress} style={styles.pressable} />
+      <Pressable
+        onPress={onPress}
+        style={styles.pressable}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      />
     </Animated.View>
   );
 });