feat(a11y): transfer accessible property to BottomSheet's children

gorhom · Mar 7, 2025 · 022822d · 022822d
1 parent 2898ada
commit 022822d
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 14 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -1883,6 +1883,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             />
             <BottomSheetContainer
               key="BottomSheetContainer"
+              accessible={_providedAccessible ?? undefined}
               shouldCalculateHeight={!$modal}
               containerHeight={_animatedContainerHeight}
               containerOffset={animatedContainerOffset}
@@ -1891,9 +1892,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               detached={detached}
               style={_providedContainerStyle}
             >
-              <Animated.View style={containerStyle}>
+              <Animated.View
+                accessible={_providedAccessible ?? undefined}
+                style={containerStyle}
+              >
                 <BottomSheetBackgroundContainer
                   key="BottomSheetBackgroundContainer"
+                  accessible={_providedAccessible ?? undefined}
                   animatedIndex={animatedIndex}
                   animatedPosition={animatedPosition}
                   backgroundComponent={backgroundComponent}
@@ -1907,19 +1912,22 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   accessibilityLabel={_providedAccessibilityLabel ?? undefined}
                 >
                   <DraggableView
+                    accessible={_providedAccessible ?? undefined}
                     key="BottomSheetRootDraggableView"
                     style={contentContainerStyle}
                   >
                     {children}
                   </DraggableView>
                   {footerComponent && (
                     <BottomSheetFooterContainer
+                      accessible={_providedAccessible ?? undefined}
                       footerComponent={footerComponent}
                     />
                   )}
                 </Animated.View>
                 <BottomSheetHandleContainer
                   key="BottomSheetHandleContainer"
+                  accessible={_providedAccessible ?? undefined}
                   animatedIndex={animatedIndex}
                   animatedPosition={animatedPosition}
                   handleHeight={animatedHandleHeight}

diff --git a/src/components/bottomSheetBackground/BottomSheetBackground.tsx b/src/components/bottomSheetBackground/BottomSheetBackground.tsx
@@ -1,15 +1,17 @@
 import React, { memo } from 'react';
 import { View } from 'react-native';
+import { DEFAULT_ACCESSIBLE } from '../bottomSheet/constants';
 import { styles } from './styles';
 import type { BottomSheetBackgroundProps } from './types';
 
 const BottomSheetBackgroundComponent = ({
+  accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
   pointerEvents,
   style,
 }: BottomSheetBackgroundProps) => (
   <View
     pointerEvents={pointerEvents}
-    accessible={true}
+    accessible={_providedAccessible ?? undefined}
     accessibilityRole="adjustable"
     accessibilityLabel="Bottom Sheet"
     style={[styles.container, style]}

diff --git a/src/components/bottomSheetBackground/types.d.ts b/src/components/bottomSheetBackground/types.d.ts
@@ -1,6 +1,10 @@
 import type { ViewProps } from 'react-native';
-import type { BottomSheetVariables } from '../../types';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
 
 export interface BottomSheetBackgroundProps
   extends Pick<ViewProps, 'pointerEvents' | 'style'>,
-    BottomSheetVariables {}
+    BottomSheetVariables,
+    Pick<NullableAccessibilityProps, 'accessible'> {}
diff --git a/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx b/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx
@@ -1,10 +1,12 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
+import { DEFAULT_ACCESSIBLE } from '../bottomSheet/constants';
 import BottomSheetBackground from '../bottomSheetBackground';
 import { styles } from './styles';
 import type { BottomSheetBackgroundContainerProps } from './types';
 
 const BottomSheetBackgroundContainerComponent = ({
+  accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
   animatedIndex,
   animatedPosition,
   backgroundComponent: _providedBackgroundComponent,
@@ -20,6 +22,7 @@ const BottomSheetBackgroundContainerComponent = ({
 
   return _providedBackgroundComponent === null ? null : (
     <BackgroundComponent
+      accessible={_providedAccessible ?? undefined}
       pointerEvents="none"
       animatedIndex={animatedIndex}
       animatedPosition={animatedPosition}

diff --git a/src/components/bottomSheetBackgroundContainer/types.d.ts b/src/components/bottomSheetBackgroundContainer/types.d.ts
@@ -1,6 +1,8 @@
+import type { NullableAccessibilityProps } from '../../types';
 import type { BottomSheetProps } from '../bottomSheet';
 import type { BottomSheetBackgroundProps } from '../bottomSheetBackground';
 
 export interface BottomSheetBackgroundContainerProps
   extends Pick<BottomSheetProps, 'backgroundComponent' | 'backgroundStyle'>,
-    BottomSheetBackgroundProps {}
+    BottomSheetBackgroundProps,
+    Pick<NullableAccessibilityProps, 'accessible'> {}
diff --git a/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -8,10 +8,12 @@ import {
 } from 'react-native';
 import { WINDOW_HEIGHT } from '../../constants';
 import { print } from '../../utilities';
+import { DEFAULT_ACCESSIBLE } from '../bottomSheet/constants';
 import { styles } from './styles';
 import type { BottomSheetContainerProps } from './types';
 
 function BottomSheetContainerComponent({
+  accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
   containerHeight,
   containerOffset,
   topInset = 0,
@@ -80,6 +82,7 @@ function BottomSheetContainerComponent({
   //#region render
   return (
     <View
+      accessible={_providedAccessible ?? undefined}
       ref={containerRef}
       pointerEvents="box-none"
       onLayout={shouldCalculateHeight ? handleContainerLayout : undefined}

diff --git a/src/components/bottomSheetContainer/types.d.ts b/src/components/bottomSheetContainer/types.d.ts
@@ -1,12 +1,14 @@
 import type { ReactNode } from 'react';
 import type { Insets, StyleProp, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
+import type { NullableAccessibilityProps } from '../../types';
 import type { BottomSheetProps } from '../bottomSheet/types';
 
 export interface BottomSheetContainerProps
   extends Partial<
-    Pick<BottomSheetProps, 'topInset' | 'bottomInset' | 'detached'>
-  > {
+      Pick<BottomSheetProps, 'topInset' | 'bottomInset' | 'detached'>
+    >,
+    Pick<NullableAccessibilityProps, 'accessible'> {
   containerHeight: SharedValue<number>;
   containerOffset: SharedValue<Required<Insets>>;
   shouldCalculateHeight?: boolean;

diff --git a/src/components/bottomSheetFooter/BottomSheetFooter.tsx b/src/components/bottomSheetFooter/BottomSheetFooter.tsx
@@ -7,6 +7,7 @@ import { styles } from './styles';
 import type { BottomSheetDefaultFooterProps } from './types';
 
 function BottomSheetFooterComponent({
+  accessible,
   animatedFooterPosition,
   bottomInset = 0,
   style,
@@ -56,7 +57,11 @@ function BottomSheetFooterComponent({
   //#endregion
 
   return children !== null ? (
-    <Animated.View onLayout={handleContainerLayout} style={containerStyle}>
+    <Animated.View
+      accessible={accessible}
+      onLayout={handleContainerLayout}
+      style={containerStyle}
+    >
       {children}
     </Animated.View>
   ) : null;

diff --git a/src/components/bottomSheetFooter/types.d.ts b/src/components/bottomSheetFooter/types.d.ts
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ViewStyle } from 'react-native';
+import type { AccessibilityProps, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 
 export interface BottomSheetFooterProps {
@@ -9,6 +9,12 @@ export interface BottomSheetFooterProps {
    * @type SharedValue<number>
    */
   animatedFooterPosition: SharedValue<number>;
+
+  /**
+   * When true, indicates that the Footer is an accessibility element.
+   * By default, all the touchable elements are accessible.
+   */
+  accessible: AccessibilityProps['accessible'];
 }
 
 export interface BottomSheetDefaultFooterProps extends BottomSheetFooterProps {

diff --git a/src/components/bottomSheetFooterContainer/BottomSheetFooterContainer.tsx b/src/components/bottomSheetFooterContainer/BottomSheetFooterContainer.tsx
@@ -2,9 +2,11 @@ import React, { memo } from 'react';
 import { useDerivedValue } from 'react-native-reanimated';
 import { KEYBOARD_STATE } from '../../constants';
 import { useBottomSheetInternal } from '../../hooks';
+import { DEFAULT_ACCESSIBLE } from '../bottomSheet/constants';
 import type { BottomSheetFooterContainerProps } from './types';
 
 const BottomSheetFooterContainerComponent = ({
+  accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
   footerComponent: FooterComponent,
 }: BottomSheetFooterContainerProps) => {
   //#region hooks
@@ -46,7 +48,12 @@ const BottomSheetFooterContainerComponent = ({
   ]);
   //#endregion
 
-  return <FooterComponent animatedFooterPosition={animatedFooterPosition} />;
+  return (
+    <FooterComponent
+      accessible={_providedAccessible ?? undefined}
+      animatedFooterPosition={animatedFooterPosition}
+    />
+  );
 };
 
 const BottomSheetFooterContainer = memo(BottomSheetFooterContainerComponent);

diff --git a/src/components/bottomSheetFooterContainer/types.d.ts b/src/components/bottomSheetFooterContainer/types.d.ts
@@ -1,4 +1,6 @@
+import type { NullableAccessibilityProps } from '../../types';
 import type { BottomSheetProps } from '../bottomSheet';
 
 export interface BottomSheetFooterContainerProps
-  extends Required<Pick<BottomSheetProps, 'footerComponent'>> {}
+  extends Required<Pick<BottomSheetProps, 'footerComponent'>>,
+    Pick<NullableAccessibilityProps, 'accessible'> {}
diff --git a/src/components/bottomSheetHandle/BottomSheetHandle.tsx b/src/components/bottomSheetHandle/BottomSheetHandle.tsx
@@ -40,7 +40,10 @@ const BottomSheetHandleComponent = ({
       accessibilityLabel={accessibilityLabel ?? undefined}
       accessibilityHint={accessibilityHint ?? undefined}
     >
-      <Animated.View style={indicatorStyle} />
+      <Animated.View
+        accessible={accessible ?? undefined}
+        style={indicatorStyle}
+      />
       {children}
     </Animated.View>
   );

diff --git a/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx b/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
@@ -7,12 +7,16 @@ import {
   useBottomSheetInternal,
 } from '../../hooks';
 import { print } from '../../utilities';
-import { DEFAULT_ENABLE_HANDLE_PANNING_GESTURE } from '../bottomSheet/constants';
+import {
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
+} from '../bottomSheet/constants';
 import BottomSheetHandle from '../bottomSheetHandle';
 import { styles } from './styles';
 import type { BottomSheetHandleContainerProps } from './types';
 
 function BottomSheetHandleContainerComponent({
+  accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
   animatedIndex,
   animatedPosition,
   simultaneousHandlers: _internalSimultaneousHandlers,
@@ -138,10 +142,12 @@ function BottomSheetHandleContainerComponent({
     <GestureDetector gesture={panGesture}>
       <Animated.View
         key="BottomSheetHandleContainer"
+        accessible={_providedAccessible ?? undefined}
         onLayout={handleContainerLayout}
         style={styles.container}
       >
         <HandleComponent
+          accessible={_providedAccessible ?? undefined}
           animatedIndex={animatedIndex}
           animatedPosition={animatedPosition}
           style={_providedHandleStyle}

diff --git a/src/components/bottomSheetHandleContainer/types.d.ts b/src/components/bottomSheetHandleContainer/types.d.ts
@@ -1,6 +1,7 @@
 import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
 import type { SharedValue } from 'react-native-reanimated';
 import type { useInteractivePanGestureHandlerConfigs } from '../../hooks/useGestureHandler';
+import type { NullableAccessibilityProps } from '../../types';
 import type { BottomSheetProps } from '../bottomSheet';
 import type { BottomSheetHandleProps } from '../bottomSheetHandle';
 
@@ -20,6 +21,7 @@ export interface BottomSheetHandleContainerProps
       | 'overDragResistanceFactor'
       | 'keyboardBehavior'
     >,
-    BottomSheetHandleProps {
+    BottomSheetHandleProps,
+    Pick<NullableAccessibilityProps, 'accessible'> {
   handleHeight: SharedValue<number>;
 }