chore: created impotantForAccessibility on actionSheet

app/containers/ActionSheet/ActionSheet.tsx

@@ -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';
 
@@ -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();
@@ -123,6 +124,7 @@ const ActionSheet = React.memo(
 			toggleVisible();
 			data?.onClose && data?.onClose();
 			animatedDataSnaps.value = [];
+			toggleImportantForAccessibility();
 		};
 
 		const renderBackdrop = useCallback(

app/containers/ActionSheet/Provider.tsx

@@ -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';
@@ -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);
@@ -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 (

app/views/CreateDiscussionView/index.tsx

@@ -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;
@@ -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}
@@ -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)));

app/views/CreateDiscussionView/interfaces.ts

@@ -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;
@@ -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;

app/views/ProfileView/index.tsx

@@ -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}>