feat: added accessibility overrides support (#1288)(by @Mahmoud-SK)

* Added accessibility to the bottomSheet component

* Accessibility changes - BottomSheetBackdrop

* Accessibility changes - BottomSheetHandle

* Minor adjustments after review

* removed unused spread operator

* fix: removed change announcement

removed the change announcement part of the code, and the ..rest from the two mentioned files.

Author: gorhom

src/components/bottomSheet/BottomSheet.tsx

@@ -41,7 +41,7 @@ import BottomSheetHandleContainer from '../bottomSheetHandleContainer';
 import BottomSheetBackgroundContainer from '../bottomSheetBackgroundContainer';
 import BottomSheetFooterContainer from '../bottomSheetFooterContainer/BottomSheetFooterContainer';
 import BottomSheetDraggableView from '../bottomSheetDraggableView';
-import BottomSheetDebugView from '../bottomSheetDebugView';
+// import BottomSheetDebugView from '../bottomSheetDebugView';
 import {
   ANIMATION_STATE,
   KEYBOARD_STATE,
@@ -76,6 +76,9 @@ import {
   INITIAL_CONTAINER_OFFSET,
   INITIAL_VALUE,
   DEFAULT_DYNAMIC_SIZING,
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_ROLE,
 } from './constants';
 import type { BottomSheetMethods, Insets } from '../../types';
 import type { BottomSheetProps, AnimateToPositionType } from './types';
@@ -154,6 +157,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       backgroundComponent,
       footerComponent,
       children,
+
+      // accessibility
+      accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
+      accessibilityLabel:
+        _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+      accessibilityRole:
+        _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
     } = props;
     //#endregion
 
@@ -1713,6 +1723,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                 <Animated.View
                   pointerEvents="box-none"
                   style={contentMaskContainerStyle}
+                  accessible={_providedAccessible ?? undefined}
+                  accessibilityRole={_providedAccessibilityRole ?? undefined}
+                  accessibilityLabel={_providedAccessibilityLabel ?? undefined}
                 >
                   <BottomSheetDraggableView
                     key="BottomSheetRootDraggableView"
@@ -1742,7 +1755,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   handleIndicatorStyle={_providedHandleIndicatorStyle}
                 />
               </Animated.View>
-              <BottomSheetDebugView
+              {/* <BottomSheetDebugView
                 values={{
                   // topInset,
                   // bottomInset,
@@ -1766,7 +1779,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   // isContentHeightFixed,
                   // isInTemporaryPosition,
                 }}
-              />
+              /> */}
             </BottomSheetContainer>
           </BottomSheetGestureHandlersProvider>
         </BottomSheetInternalProvider>

src/components/bottomSheet/constants.ts

@@ -33,6 +33,11 @@ const INITIAL_CONTAINER_OFFSET = {
 const INITIAL_HANDLE_HEIGHT = -999;
 const INITIAL_POSITION = SCREEN_HEIGHT;
 
+// accessibility
+const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom Sheet';
+const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
+
 export {
   DEFAULT_HANDLE_HEIGHT,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
@@ -53,4 +58,8 @@ export {
   INITIAL_HANDLE_HEIGHT,
   INITIAL_SNAP_POINT,
   INITIAL_VALUE,
+  // accessibility
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_ROLE,
 };

src/components/bottomSheet/types.d.ts

@@ -18,11 +18,15 @@ import type {
   KEYBOARD_BLUR_BEHAVIOR,
   KEYBOARD_INPUT_MODE,
 } from '../../constants';
-import type { GestureEventsHandlersHookType } from '../../types';
+import type {
+  GestureEventsHandlersHookType,
+  NullableAccessibilityProps,
+} from '../../types';
 
 export interface BottomSheetProps
   extends BottomSheetAnimationConfigs,
-    Partial<BottomSheetGestureProps> {
+    Partial<BottomSheetGestureProps>,
+    Omit<NullableAccessibilityProps, 'accessibilityHint'> {
   //#region configuration
   /**
    * Initial snap point index, provide `-1` to initiate bottom sheet in closed state.

src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx

@@ -19,6 +19,10 @@ import {
   DEFAULT_DISAPPEARS_ON_INDEX,
   DEFAULT_ENABLE_TOUCH_THROUGH,
   DEFAULT_PRESS_BEHAVIOR,
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_HINT,
 } from './constants';
 import { styles } from './styles';
 import type { BottomSheetDefaultBackdropProps } from './types';
@@ -33,6 +37,10 @@ const BottomSheetBackdropComponent = ({
   onPress,
   style,
   children,
+  accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
+  accessibilityRole: _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+  accessibilityLabel: _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+  accessibilityHint: _providedAccessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
 }: BottomSheetDefaultBackdropProps) => {
   //#region hooks
   const { snapToIndex, close } = useBottomSheet();
@@ -112,27 +120,33 @@ const BottomSheetBackdropComponent = ({
     },
     [disappearsOnIndex]
   );
+
+  const AnimatedView = (
+    <Animated.View
+      style={containerStyle}
+      pointerEvents={pointerEvents}
+      accessible={_providedAccessible ?? undefined}
+      accessibilityRole={_providedAccessibilityRole ?? undefined}
+      accessibilityLabel={_providedAccessibilityLabel ?? undefined}
+      accessibilityHint={
+        _providedAccessibilityHint
+          ? _providedAccessibilityHint
+          : `Tap to ${
+              typeof pressBehavior === 'string' ? pressBehavior : 'move'
+            } the Bottom Sheet`
+      }
+    >
+      {children}
+    </Animated.View>
+  );
   //#endregion
 
   return pressBehavior !== 'none' ? (
     <TapGestureHandler onGestureEvent={gestureHandler}>
-      <Animated.View
-        style={containerStyle}
-        pointerEvents={pointerEvents}
-        accessible={true}
-        accessibilityRole="button"
-        accessibilityLabel="Bottom Sheet backdrop"
-        accessibilityHint={`Tap to ${
-          typeof pressBehavior === 'string' ? pressBehavior : 'move'
-        } the Bottom Sheet`}
-      >
-        {children}
-      </Animated.View>
+      {AnimatedView}
     </TapGestureHandler>
   ) : (
-    <Animated.View pointerEvents={pointerEvents} style={containerStyle}>
-      {children}
-    </Animated.View>
+    AnimatedView
   );
 };
 

src/components/bottomSheetBackdrop/constants.ts

@@ -4,10 +4,19 @@ const DEFAULT_DISAPPEARS_ON_INDEX = 0;
 const DEFAULT_ENABLE_TOUCH_THROUGH = false;
 const DEFAULT_PRESS_BEHAVIOR = 'close' as const;
 
+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';
+
 export {
   DEFAULT_OPACITY,
   DEFAULT_APPEARS_ON_INDEX,
   DEFAULT_DISAPPEARS_ON_INDEX,
   DEFAULT_ENABLE_TOUCH_THROUGH,
   DEFAULT_PRESS_BEHAVIOR,
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_HINT,
 };

src/components/bottomSheetBackdrop/types.d.ts

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
-import type { BottomSheetVariables } from '../../types';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
 
 export interface BottomSheetBackdropProps
   extends Pick<ViewProps, 'style'>,
@@ -9,7 +12,8 @@ export interface BottomSheetBackdropProps
 export type BackdropPressBehavior = 'none' | 'close' | 'collapse' | number;
 
 export interface BottomSheetDefaultBackdropProps
-  extends BottomSheetBackdropProps {
+  extends BottomSheetBackdropProps,
+    NullableAccessibilityProps {
   /**
    * Backdrop opacity.
    * @type number

src/components/bottomSheetHandle/BottomSheetHandle.tsx

@@ -2,11 +2,21 @@ import React, { memo, useMemo } from 'react';
 import Animated from 'react-native-reanimated';
 import { styles } from './styles';
 import type { BottomSheetDefaultHandleProps } from './types';
+import {
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_HINT,
+} from './constants';
 
 const BottomSheetHandleComponent = ({
   style,
   indicatorStyle: _indicatorStyle,
   children,
+  accessible = DEFAULT_ACCESSIBLE,
+  accessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+  accessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+  accessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
 }: BottomSheetDefaultHandleProps) => {
   // styles
   const containerStyle = useMemo(
@@ -23,7 +33,13 @@ const BottomSheetHandleComponent = ({
 
   // render
   return (
-    <Animated.View style={containerStyle}>
+    <Animated.View
+      style={containerStyle}
+      accessible={accessible ?? undefined}
+      accessibilityRole={accessibilityRole ?? undefined}
+      accessibilityLabel={accessibilityLabel ?? undefined}
+      accessibilityHint={accessibilityHint ?? undefined}
+    >
       <Animated.View style={indicatorStyle} />
       {children}
     </Animated.View>

src/components/bottomSheetHandle/constants.ts

@@ -0,0 +1,12 @@
+const DEFAULT_ACCESSIBLE = true;
+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';
+
+export {
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_HINT,
+};

src/components/bottomSheetHandle/types.d.ts

@@ -1,11 +1,16 @@
 import type React from 'react';
 import type { ViewProps } from 'react-native';
 import type { AnimateProps } from 'react-native-reanimated';
-import type { BottomSheetVariables } from '../../types';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
 
 export interface BottomSheetHandleProps extends BottomSheetVariables {}
 
-export interface BottomSheetDefaultHandleProps extends BottomSheetHandleProps {
+export interface BottomSheetDefaultHandleProps
+  extends BottomSheetHandleProps,
+    NullableAccessibilityProps {
   /**
    * View style to be applied to the handle container.
    * @type Animated.AnimateStyle<ViewStyle> | ViewStyle

src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx

@@ -134,12 +134,8 @@ function BottomSheetHandleContainerComponent({
     <GestureDetector gesture={panGesture}>
       <Animated.View
         key="BottomSheetHandleContainer"
-        accessible={true}
-        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}
       >
         <HandleComponent
           animatedIndex={animatedIndex}

src/types.d.ts

@@ -5,6 +5,7 @@ import type {
   SectionList,
   NativeScrollEvent,
   NativeSyntheticEvent,
+  AccessibilityProps,
 } from 'react-native';
 import type {
   GestureEventPayload,
@@ -186,3 +187,10 @@ export type ScrollEventsHandlersHookType = (
   handleOnMomentumEnd?: ScrollEventHandlerCallbackType;
 };
 //#endregion
+
+export interface NullableAccessibilityProps extends AccessibilityProps {
+  accessible?: AccessibilityProps['accessible'] | null;
+  accessibilityLabel?: AccessibilityProps['accessibilityLabel'] | null;
+  accessibilityHint?: AccessibilityProps['accessibilityHint'] | null;
+  accessibilityRole?: AccessibilityProps['accessibilityRole'] | null;
+}