Fix Accessibility on Background Containers

src/components/bottomSheet/BottomSheet.tsx

@@ -1919,8 +1919,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   backgroundStyle={_providedBackgroundStyle}
                 />
                 <Animated.View
-                  pointerEvents="box-none"
+                  // pointerEvents="box-none"
                   style={contentMaskContainerStyle}
+                  accessible={false}
+                  // accessibilityRole={_providedAccessibilityRole ?? undefined}
+                  // accessibilityLabel={_providedAccessibilityLabel ?? undefined}
                   accessible={_providedAccessible ?? undefined}
                   accessibilityRole={_providedAccessibilityRole ?? undefined}
                   accessibilityLabel={_providedAccessibilityLabel ?? undefined}

src/components/bottomSheetBackground/BottomSheetBackground.tsx

@@ -9,7 +9,7 @@ const BottomSheetBackgroundComponent = ({
 }: BottomSheetBackgroundProps) => (
   <View
     pointerEvents={pointerEvents}
-    accessible={true}
+    accessible={false}
     accessibilityRole="adjustable"
     accessibilityLabel="Bottom Sheet"
     style={[styles.container, style]}

src/components/bottomSheetFooter/types.d.ts

@@ -33,5 +33,5 @@ export interface BottomSheetDefaultFooterProps extends BottomSheetFooterProps {
    *
    * @type {ReactNode|ReactNode[]}
    */
-  children?: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[] | (() => ReactElement);
 }

src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx

@@ -138,6 +138,12 @@ function BottomSheetHandleContainerComponent({
     <GestureDetector gesture={panGesture}>
       <Animated.View
         key="BottomSheetHandleContainer"
+        accessible={false}
+        importantForAccessibility={"no"}
+        accessibilityRole="adjustable"
+        accessibilityLabel="Bottom Sheet handle"
+        accessibilityHint="Drag up or down to extend or minimize the Bottom Sheet"
+        style={styles.container}
         onLayout={handleContainerLayout}
         style={styles.container}
       >

src/components/bottomSheetTextInput/BottomSheetTextInput.tsx

@@ -13,6 +13,13 @@ const BottomSheetTextInputComponent = forwardRef<
 >(({ onFocus, onBlur, ...rest }, ref) => {
   //#region hooks
   const { shouldHandleKeyboardEvents } = useBottomSheetInternal();
+
+  useEffect(() => {
+    return () => {
+      // Reset the flag on unmount
+      shouldHandleKeyboardEvents.value = false;
+    };
+  }, [shouldHandleKeyboardEvents]);
   //#endregion
 
   //#region callbacks