fix: add some a11y props to drawer overlay

react-navigation · Nov 27, 2022 · 0890895 · 0890895
1 parent b03f39e
commit 0890895
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/drawer/src/views/legacy/Drawer.tsx b/packages/drawer/src/views/legacy/Drawer.tsx
@@ -575,10 +575,13 @@ export default class DrawerView extends React.Component<DrawerProps> {
                 // Disable overlay if sidebar is permanent
                 drawerType === 'permanent' ? null : (
                   <Overlay
-                    pointerEvents={isOpen ? 'auto' : 'none'}
                     progress={progress}
                     onPress={() => this.toggleDrawer(false)}
                     style={overlayStyle as any}
+                    accessibilityElementsHidden={!isOpen}
+                    importantForAccessibility={
+                      isOpen ? 'auto' : 'no-hide-descendants'
+                    }
                   />
                 )
               }

diff --git a/packages/drawer/src/views/modern/Overlay.tsx b/packages/drawer/src/views/modern/Overlay.tsx
@@ -26,8 +26,12 @@ const Overlay = React.forwardRef(function Overlay(
   });
 
   const animatedProps = useAnimatedProps(() => {
+    const active = progress.value > PROGRESS_EPSILON;
+
     return {
-      pointerEvents: progress.value > PROGRESS_EPSILON ? 'auto' : 'none',
+      pointerEvents: active ? 'auto' : 'none',
+      accessibilityElementsHidden: !active,
+      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
     } as const;
   });