diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx index bb58ccda76..e617089608 100644 --- a/app/containers/ActionSheet/ActionSheet.tsx +++ b/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( diff --git a/app/containers/ActionSheet/Provider.tsx b/app/containers/ActionSheet/Provider.tsx index a50d1b0771..21e9683ac0 100644 --- a/app/containers/ActionSheet/Provider.tsx +++ b/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({ showActionSheet: () => {}, - hideActionSheet: () => {} + hideActionSheet: () => {}, + toggleImportantForAccessibility: () => {}, + importantForAccessibility: 'yes' }); export const useActionSheet = () => useContext(context); @@ -52,13 +56,28 @@ export const withActionSheet = (Component: React.ComponentType): typeof Com const actionSheetRef: React.Ref = 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 ( diff --git a/app/views/CreateDiscussionView/index.tsx b/app/views/CreateDiscussionView/index.tsx index 7dac898001..3cdf021d10 100644 --- a/app/views/CreateDiscussionView/index.tsx +++ b/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 { private channel: ISubscription; @@ -142,7 +143,7 @@ class CreateChannelView extends React.Component - + {I18n.t('Discussion_Desc')} ({ encryptionEnabled: state.encryption.enabled }); -export default connect(mapStateToProps)(withTheme(CreateChannelView)); +export default connect(mapStateToProps)(withTheme(withActionSheet(CreateChannelView))); diff --git a/app/views/CreateDiscussionView/interfaces.ts b/app/views/CreateDiscussionView/interfaces.ts index 47163cfb3b..e70e9721fb 100644 --- a/app/views/CreateDiscussionView/interfaces.ts +++ b/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 { +export interface ICreateChannelViewProps + extends IActionSheetProvider, + IBaseScreen { server: string; user: IUser; create: Function; diff --git a/app/views/ProfileView/index.tsx b/app/views/ProfileView/index.tsx index 95b915afbe..2c97470aca 100644 --- a/app/views/ProfileView/index.tsx +++ b/app/views/ProfileView/index.tsx @@ -437,6 +437,7 @@ class ProfileView extends React.Component