Merge pull request #1 from bluesky-social/hailey/revert-accessibility-changes

revert gorhom#1288

Author: haileyok

src/components/bottomSheet/BottomSheet.tsx

@@ -75,9 +75,6 @@ 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';
@@ -162,13 +159,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       backgroundComponent,
       footerComponent,
       children: Content,
-
-      // accessibility
-      accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
-      accessibilityLabel:
-        _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
-      accessibilityRole:
-        _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
     } = props;
     //#endregion
 
@@ -1645,9 +1635,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                 <Animated.View
                   pointerEvents="box-none"
                   style={contentMaskContainerStyle}
-                  accessible={_providedAccessible ?? undefined}
-                  accessibilityRole={_providedAccessibilityRole ?? undefined}
-                  accessibilityLabel={_providedAccessibilityLabel ?? undefined}
                 >
                   <BottomSheetDraggableView
                     key="BottomSheetRootDraggableView"

src/components/bottomSheet/constants.ts

@@ -33,15 +33,6 @@ 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';
-const DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT = true;
-const DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT = (
-  positionInScreen: string
-) => `Bottom sheet snapped to ${positionInScreen}% of the screen`;
-
 export {
   DEFAULT_HANDLE_HEIGHT,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
@@ -62,10 +53,4 @@ export {
   INITIAL_HANDLE_HEIGHT,
   INITIAL_SNAP_POINT,
   INITIAL_VALUE,
-  // accessibility
-  DEFAULT_ACCESSIBLE,
-  DEFAULT_ACCESSIBILITY_LABEL,
-  DEFAULT_ACCESSIBILITY_ROLE,
-  DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT,
-  DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT,
 };

src/components/bottomSheet/types.d.ts

@@ -17,10 +17,7 @@ import type {
   KEYBOARD_BLUR_BEHAVIOR,
   KEYBOARD_INPUT_MODE,
 } from '../../constants';
-import type {
-  GestureEventsHandlersHookType,
-  NullableAccessibilityProps,
-} from '../../types';
+import type { GestureEventsHandlersHookType } from '../../types';
 
 export interface BottomSheetProps
   extends BottomSheetAnimationConfigs,
@@ -34,8 +31,7 @@ export interface BottomSheetProps
         | 'waitFor'
         | 'simultaneousHandlers'
       >
-    >,
-    Omit<NullableAccessibilityProps, 'accessibilityHint'> {
+    > {
   //#region configuration
   /**
    * Initial snap point index, provide `-1` to initiate bottom sheet in closed state.

src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx

@@ -1,11 +1,4 @@
-import React, {
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { ViewProps } from 'react-native';
 import Animated, {
   interpolate,
@@ -26,10 +19,6 @@ 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';
@@ -44,10 +33,6 @@ 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();
@@ -129,42 +114,27 @@ const BottomSheetBackdropComponent = ({
     },
     [disappearsOnIndex]
   );
-
-  // addressing updating the state after unmounting.
-  // [link](https://github.com/gorhom/react-native-bottom-sheet/issues/1376)
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
   //#endregion
 
-  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>
-  );
-
   return pressBehavior !== 'none' ? (
     <TapGestureHandler onGestureEvent={gestureHandler}>
-      {AnimatedView}
+      <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>
     </TapGestureHandler>
   ) : (
-    AnimatedView
+    <Animated.View pointerEvents={pointerEvents} style={containerStyle}>
+      {children}
+    </Animated.View>
   );
 };
 

src/components/bottomSheetBackdrop/constants.ts

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

src/components/bottomSheetHandle/BottomSheetHandle.tsx

@@ -2,21 +2,11 @@ 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(
@@ -33,13 +23,7 @@ const BottomSheetHandleComponent = ({
 
   // render
   return (
-    <Animated.View
-      style={containerStyle}
-      accessible={accessible ?? undefined}
-      accessibilityRole={accessibilityRole ?? undefined}
-      accessibilityLabel={accessibilityLabel ?? undefined}
-      accessibilityHint={accessibilityHint ?? undefined}
-    >
+    <Animated.View style={containerStyle}>
       <Animated.View style={indicatorStyle} />
       {children}
     </Animated.View>

src/components/bottomSheetHandle/constants.ts

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

src/components/bottomSheetHandle/types.d.ts

@@ -92,6 +92,10 @@ function BottomSheetHandleContainerComponent({
     >
       <Animated.View
         key="BottomSheetHandleContainer"
+        accessible={true}
+        accessibilityRole="adjustable"
+        accessibilityLabel="Bottom Sheet handle"
+        accessibilityHint="Drag up or down to extend or minimize the Bottom Sheet"
         onLayout={handleContainerLayout}
       >
         <HandleComponent