fix: added close accessibility tap area

react-navigation · Feb 1, 2023 · c48f2f0 · c48f2f0
1 parent f935766
commit c48f2f0
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 6 deletions.
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -230,6 +230,7 @@ export default function App() {
               <Drawer.Navigator
                 screenOptions={{
                   drawerType: isLargeScreen ? 'permanent' : undefined,
+                  overlayAccessibilityLabel: 'Close drawer',
                 }}
               >
                 <Drawer.Screen

diff --git a/packages/drawer/src/types.tsx b/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;
 };
diff --git a/packages/drawer/src/views/DrawerView.tsx b/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={[
           {

diff --git a/packages/drawer/src/views/legacy/Drawer.tsx b/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={[

diff --git a/packages/drawer/src/views/legacy/Overlay.tsx b/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>
   );
 });

diff --git a/packages/drawer/src/views/modern/Drawer.tsx b/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,

diff --git a/packages/drawer/src/views/modern/Overlay.tsx b/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>
   );
 });