Skip to content

Commit

Permalink
feat: added accessibility overrides support (#1288)(by @Mahmoud-SK)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
gorhom committed Jan 3, 2024
1 parent 17269f1 commit 6203c18
Show file tree
Hide file tree
Showing 11 changed files with 120 additions and 30 deletions.
19 changes: 16 additions & 3 deletions src/components/bottomSheet/BottomSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -1742,7 +1755,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
handleIndicatorStyle={_providedHandleIndicatorStyle}
/>
</Animated.View>
<BottomSheetDebugView
{/* <BottomSheetDebugView
values={{
// topInset,
// bottomInset,
Expand All @@ -1766,7 +1779,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
// isContentHeightFixed,
// isInTemporaryPosition,
}}
/>
/> */}
</BottomSheetContainer>
</BottomSheetGestureHandlersProvider>
</BottomSheetInternalProvider>
Expand Down
9 changes: 9 additions & 0 deletions src/components/bottomSheet/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -53,4 +58,8 @@ export {
INITIAL_HANDLE_HEIGHT,
INITIAL_SNAP_POINT,
INITIAL_VALUE,
// accessibility
DEFAULT_ACCESSIBLE,
DEFAULT_ACCESSIBILITY_LABEL,
DEFAULT_ACCESSIBILITY_ROLE,
};
8 changes: 6 additions & 2 deletions src/components/bottomSheet/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
44 changes: 29 additions & 15 deletions src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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
);
};

Expand Down
9 changes: 9 additions & 0 deletions src/components/bottomSheetBackdrop/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
8 changes: 6 additions & 2 deletions src/components/bottomSheetBackdrop/types.d.ts
Original file line number Diff line number Diff line change
@@ -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'>,
Expand All @@ -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
Expand Down
18 changes: 17 additions & 1 deletion src/components/bottomSheetHandle/BottomSheetHandle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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>
Expand Down
12 changes: 12 additions & 0 deletions src/components/bottomSheetHandle/constants.ts
Original file line number Diff line number Diff line change
@@ -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,
};
9 changes: 7 additions & 2 deletions src/components/bottomSheetHandle/types.d.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 8 additions & 0 deletions src/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type {
SectionList,
NativeScrollEvent,
NativeSyntheticEvent,
AccessibilityProps,
} from 'react-native';
import type {
GestureEventPayload,
Expand Down Expand Up @@ -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;
}

0 comments on commit 6203c18

Please sign in to comment.