Skip to content

Commit

Permalink
chore: created impotantForAccessibility on actionSheet
Browse files Browse the repository at this point in the history
  • Loading branch information
OtavioStasiak committed Dec 23, 2024
1 parent f12e9eb commit c5d01e7
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 8 deletions.
4 changes: 3 additions & 1 deletion app/containers/ActionSheet/ActionSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTheme } from '../../theme';
import { isIOS, isTablet } from '../../lib/methods/helpers';
import { Handle } from './Handle';
import { TActionSheetOptions } from './Provider';
import { TActionSheetOptions, useActionSheet } from './Provider';
import BottomSheetContent from './BottomSheetContent';
import styles, { ITEM_HEIGHT } from './styles';

Expand All @@ -25,6 +25,7 @@ const ANIMATION_CONFIG = {

const ActionSheet = React.memo(
forwardRef(({ children }: { children: React.ReactElement }, ref) => {
const { toggleImportantForAccessibility } = useActionSheet();
const { colors } = useTheme();
const { height: windowHeight } = useWindowDimensions();
const { bottom } = useSafeAreaInsets();
Expand Down Expand Up @@ -123,6 +124,7 @@ const ActionSheet = React.memo(
toggleVisible();
data?.onClose && data?.onClose();
animatedDataSnaps.value = [];
toggleImportantForAccessibility();
};

const renderBackdrop = useCallback(
Expand Down
25 changes: 22 additions & 3 deletions app/containers/ActionSheet/Provider.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import hoistNonReactStatics from 'hoist-non-react-statics';
import React, { createRef, ForwardedRef, forwardRef, useContext } from 'react';
import React, { createRef, ForwardedRef, forwardRef, useContext, useState } from 'react';

import { TIconsName } from '../CustomIcon';
import ActionSheet from './ActionSheet';
Expand Down Expand Up @@ -29,11 +29,15 @@ export type TActionSheetOptions = {
export interface IActionSheetProvider {
showActionSheet: (item: TActionSheetOptions) => void;
hideActionSheet: () => void;
toggleImportantForAccessibility: () => void;
importantForAccessibility: any;
}

const context = React.createContext<IActionSheetProvider>({
showActionSheet: () => {},
hideActionSheet: () => {}
hideActionSheet: () => {},
toggleImportantForAccessibility: () => {},
importantForAccessibility: 'yes'
});

export const useActionSheet = () => useContext(context);
Expand All @@ -52,13 +56,28 @@ export const withActionSheet = (Component: React.ComponentType<any>): typeof Com
const actionSheetRef: React.Ref<IActionSheetProvider> = createRef();

export const ActionSheetProvider = React.memo(({ children }: { children: React.ReactElement | React.ReactElement[] }) => {
const [importantForAccessibility, setImportantForAccessibility] = useState('yes');

const toggleImportantForAccessibility = () => {
if (importantForAccessibility === 'yes') {
setImportantForAccessibility('no-hide-descendants');
return;
}

setImportantForAccessibility('yes');
};

const getContext = (): IActionSheetProvider => ({
showActionSheet: options => {
actionSheetRef.current?.showActionSheet(options);
setImportantForAccessibility('no-hide-descendants');
},
hideActionSheet: () => {
actionSheetRef.current?.hideActionSheet();
}
setImportantForAccessibility('yes');
},
importantForAccessibility,
toggleImportantForAccessibility
});

return (
Expand Down
7 changes: 4 additions & 3 deletions app/views/CreateDiscussionView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { E2E_ROOM_TYPES, themes } from '../../lib/constants';
import { getRoomTitle, showErrorAlert } from '../../lib/methods/helpers';
import * as List from '../../containers/List';
import Switch from '../../containers/Switch';
import { withActionSheet } from '../../containers/ActionSheet';

class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreateChannelViewState> {
private channel: ISubscription;
Expand Down Expand Up @@ -142,15 +143,15 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate

render() {
const { name, users, encrypted } = this.state;
const { server, user, blockUnauthenticatedAccess, theme, serverVersion } = this.props;
const { server, user, blockUnauthenticatedAccess, theme, serverVersion, importantForAccessibility } = this.props;
return (
<KeyboardView
style={{ backgroundColor: themes[theme].surfaceHover }}
contentContainerStyle={styles.container}
keyboardVerticalOffset={128}>
<StatusBar />
<SafeAreaView testID='create-discussion-view' style={styles.container}>
<ScrollView {...scrollPersistTaps}>
<ScrollView importantForAccessibility={importantForAccessibility} {...scrollPersistTaps}>
<Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Discussion_Desc')}</Text>
<SelectChannel
server={server}
Expand Down Expand Up @@ -208,4 +209,4 @@ const mapStateToProps = (state: IApplicationState) => ({
encryptionEnabled: state.encryption.enabled
});

export default connect(mapStateToProps)(withTheme(CreateChannelView));
export default connect(mapStateToProps)(withTheme(withActionSheet(CreateChannelView)));
5 changes: 4 additions & 1 deletion app/views/CreateDiscussionView/interfaces.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { NewMessageStackParamList } from '../../stacks/types';
import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
import { IBaseScreen, IMessage, ISearchLocal, IUser } from '../../definitions';
import { IActionSheetProvider } from '../../containers/ActionSheet';

export interface IResult {
rid: string;
Expand All @@ -11,7 +12,9 @@ export interface IResult {
export interface IError {
reason: string;
}
export interface ICreateChannelViewProps extends IBaseScreen<NewMessageStackParamList, 'CreateDiscussionView'> {
export interface ICreateChannelViewProps
extends IActionSheetProvider,
IBaseScreen<NewMessageStackParamList, 'CreateDiscussionView'> {
server: string;
user: IUser;
create: Function;
Expand Down
1 change: 1 addition & 0 deletions app/views/ProfileView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
<StatusBar />
<SafeAreaView testID='profile-view'>
<ScrollView
importantForAccessibility={this.props.importantForAccessibility}
contentContainerStyle={[sharedStyles.containerScrollView, { backgroundColor: themes[theme].surfaceTint }]}
testID='profile-view-list'
{...scrollPersistTaps}>
Expand Down

0 comments on commit c5d01e7

Please sign in to comment.