feat(accessibility): forward importantForAccessibility prop

src/components/bottomSheet/BottomSheet.tsx

@@ -75,6 +75,7 @@ import {
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
   DEFAULT_ENABLE_OVER_DRAG,
   DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
+  DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
   DEFAULT_KEYBOARD_BEHAVIOR,
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
   DEFAULT_KEYBOARD_INDEX,
@@ -167,6 +168,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
       accessibilityRole:
         _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+      importantForAccessibility:
+        _providedImportantForAccessibility = DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
     } = props;
     //#endregion
 
@@ -1829,6 +1832,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   accessible={_providedAccessible ?? undefined}
                   accessibilityRole={_providedAccessibilityRole ?? undefined}
                   accessibilityLabel={_providedAccessibilityLabel ?? undefined}
+                  importantForAccessibility={
+                    _providedImportantForAccessibility ?? undefined
+                  }
                   keyboardBehavior={keyboardBehavior}
                   detached={detached}
                 >

src/components/bottomSheet/BottomSheetContent.tsx

@@ -38,6 +38,7 @@ function BottomSheetContentComponent({
   accessibilityLabel,
   accessibilityHint,
   accessibilityRole,
+  importantForAccessibility,
   children,
 }: BottomSheetContent) {
   //#region hooks
@@ -242,6 +243,7 @@ function BottomSheetContentComponent({
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       accessibilityRole={accessibilityRole}
+      importantForAccessibility={importantForAccessibility}
       style={contentContainerStyle}
     >
       {children}

src/components/bottomSheet/constants.ts

@@ -29,6 +29,7 @@ const INITIAL_SNAP_POINT = -999;
 const DEFAULT_ACCESSIBLE = true;
 const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom Sheet';
 const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
+const DEFAULT_IMPORTANT_FOR_ACCESSIBILITY = 'auto';
 
 export {
   DEFAULT_ACCESSIBILITY_LABEL,
@@ -42,6 +43,7 @@ export {
   DEFAULT_ENABLE_OVER_DRAG,
   DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
   DEFAULT_HANDLE_HEIGHT,
+  DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
   DEFAULT_KEYBOARD_BEHAVIOR,
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
   DEFAULT_KEYBOARD_INDEX,

src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx

@@ -24,6 +24,7 @@ import {
   DEFAULT_APPEARS_ON_INDEX,
   DEFAULT_DISAPPEARS_ON_INDEX,
   DEFAULT_ENABLE_TOUCH_THROUGH,
+  DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
   DEFAULT_OPACITY,
   DEFAULT_PRESS_BEHAVIOR,
 } from './constants';
@@ -44,6 +45,8 @@ const BottomSheetBackdropComponent = ({
   accessibilityRole: _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
   accessibilityLabel: _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
   accessibilityHint: _providedAccessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
+  importantForAccessibility:
+    _providedImportantForAccessibility = DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
 }: BottomSheetDefaultBackdropProps) => {
   //#region hooks
   const { snapToIndex, close } = useBottomSheet();
@@ -154,6 +157,9 @@ const BottomSheetBackdropComponent = ({
               typeof pressBehavior === 'string' ? pressBehavior : 'move'
             } the Bottom Sheet`
       }
+      importantForAccessibility={
+        _providedImportantForAccessibility ?? undefined
+      }
     >
       {children}
     </Animated.View>

src/components/bottomSheetBackdrop/constants.ts

@@ -8,6 +8,7 @@ const DEFAULT_ACCESSIBLE = true;
 const DEFAULT_ACCESSIBILITY_ROLE = 'button';
 const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet backdrop';
 const DEFAULT_ACCESSIBILITY_HINT = 'Tap to close the bottom sheet';
+const DEFAULT_IMPORTANT_FOR_ACCESSIBILITY = 'auto';
 
 export {
   DEFAULT_ACCESSIBILITY_HINT,
@@ -17,6 +18,7 @@ export {
   DEFAULT_APPEARS_ON_INDEX,
   DEFAULT_DISAPPEARS_ON_INDEX,
   DEFAULT_ENABLE_TOUCH_THROUGH,
+  DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
   DEFAULT_OPACITY,
   DEFAULT_PRESS_BEHAVIOR,
 };

src/components/bottomSheetHandle/BottomSheetHandle.tsx

@@ -5,6 +5,7 @@ import {
   DEFAULT_ACCESSIBILITY_LABEL,
   DEFAULT_ACCESSIBILITY_ROLE,
   DEFAULT_ACCESSIBLE,
+  DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
 } from './constants';
 import { styles } from './styles';
 import type { BottomSheetDefaultHandleProps } from './types';
@@ -16,6 +17,7 @@ function BottomSheetHandleComponent({
   accessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
   accessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
   accessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
+  importantForAccessibility = DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
   children,
 }: BottomSheetDefaultHandleProps) {
   //#region styles
@@ -37,6 +39,7 @@ function BottomSheetHandleComponent({
       accessibilityRole={accessibilityRole ?? undefined}
       accessibilityLabel={accessibilityLabel ?? undefined}
       accessibilityHint={accessibilityHint ?? undefined}
+      importantForAccessibility={importantForAccessibility ?? undefined}
       collapsable={true}
     >
       <View style={indicatorStyle} />

src/components/bottomSheetHandle/constants.ts

@@ -3,10 +3,12 @@ const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
 const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet handle';
 const DEFAULT_ACCESSIBILITY_HINT =
   'Drag up or down to extend or minimize the bottom sheet';
+const DEFAULT_IMPORTANT_FOR_ACCESSIBILITY = 'auto';
 
 export {
   DEFAULT_ACCESSIBILITY_HINT,
   DEFAULT_ACCESSIBILITY_LABEL,
   DEFAULT_ACCESSIBILITY_ROLE,
   DEFAULT_ACCESSIBLE,
+  DEFAULT_IMPORTANT_FOR_ACCESSIBILITY,
 };

src/types.d.ts

@@ -242,6 +242,9 @@ export interface NullableAccessibilityProps extends AccessibilityProps {
   accessibilityLabel?: AccessibilityProps['accessibilityLabel'] | null;
   accessibilityHint?: AccessibilityProps['accessibilityHint'] | null;
   accessibilityRole?: AccessibilityProps['accessibilityRole'] | null;
+  importantForAccessibility?:
+    | AccessibilityProps['importantForAccessibility']
+    | null;
 }
 //#endregion