[v4][v5]: BottomSheetModal content not accessible by screen reader on iOS

[obasille]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

Thanks for making this great library!

Contents of the BottomSheetModal component are not accessible by screen reader on iOS.
For some reason, passing the property "accessible={false}" seems to fix the issue.

See same issue on V4 here.

Reproduction steps

Run the given Snack on iOS.

Reproduction sample

https://snack.expo.dev/@zilhk/bottom-sheet-accessibility

Relevant log output

No response

[VadymBezsmertnyi]

@obasille

I agree, it's the same for me. The modal window behaves terribly or doesn't show up at all.
version: "^5.0.4"

[thespacemanatee]

I've been needing to do this patch since forever:

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
index cd6ea6b..fa5dab2 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
@@ -167,9 +167,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       // accessibility
       accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
       accessibilityLabel:
-        _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+        _providedAccessibilityLabel = _providedAccessible ? DEFAULT_ACCESSIBILITY_LABEL : null,
       accessibilityRole:
-        _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+        _providedAccessibilityRole = _providedAccessible ? DEFAULT_ACCESSIBILITY_ROLE : null,
     } = props;
     //#endregion
 
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/constants.ts b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/constants.ts
index 07a8367..08ce167 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/constants.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/constants.ts
@@ -34,7 +34,7 @@ const INITIAL_HANDLE_HEIGHT = -999;
 const INITIAL_POSITION = SCREEN_HEIGHT;
 
 // accessibility
-const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBLE = false;
 const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom Sheet';
 const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
 const DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT = true;
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/BottomSheetBackground.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/BottomSheetBackground.tsx
index 71ce0c3..5924854 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/BottomSheetBackground.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/BottomSheetBackground.tsx
@@ -7,13 +7,7 @@ const BottomSheetBackgroundComponent = ({
   pointerEvents,
   style,
 }: BottomSheetBackgroundProps) => (
-  <View
-    pointerEvents={pointerEvents}
-    accessible={true}
-    accessibilityRole="adjustable"
-    accessibilityLabel="Bottom Sheet"
-    style={[styles.container, style]}
-  />
+  <View pointerEvents={pointerEvents} style={[styles.container, style]} />
 );
 
 const BottomSheetBackground = memo(BottomSheetBackgroundComponent);
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx
index 80a859e..4e741fe 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx
@@ -20,7 +20,7 @@ const BottomSheetBackgroundContainerComponent = ({
 
   return _providedBackgroundComponent === null ? null : (
     <BackgroundComponent
-      pointerEvents="none"
+      pointerEvents="box-none"
       animatedIndex={animatedIndex}
       animatedPosition={animatedPosition}
       style={backgroundStyle}
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
index 275ce50..faee41e 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -34,6 +34,8 @@ const BottomSheetModalComponent = forwardRef<
   BottomSheetModalProps
 >(function BottomSheetModal(props, ref) {
   const {
+    // Override default accessibility prop to ensure their content can be read by Voice Over (iOS screen reader)
+    accessible = false,
     // modal props
     name,
     stackBehavior = DEFAULT_STACK_BEHAVIOR,
@@ -384,6 +386,7 @@ const BottomSheetModalComponent = forwardRef<
           index={index}
           snapPoints={snapPoints}
           enablePanDownToClose={enablePanDownToClose}
+          accessible={accessible}
           animateOnMount={animateOnMount}
           containerHeight={containerHeight}
           containerOffset={containerOffset}

@gorhom there are many similar reports for the past few months, please revert this PR until a better solution is found.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[sarahhamdi]

Can we re-open this? I had to apply this patch because the Talkback/Voiceover gets trapped in the bottom sheet without it, making the entire sheet unusable.

[dirkpostma]

@sarahhamdi have you tried setting accessible={false} to BottomSheet? With v5, the elements inside content become accessible with VoiceOver active.

That said, would be great if this is dealt with by default, if voiceover is active, also for the handle.