feat: disable element below modalTour for TalkBack (#1438)

Signed-off-by: ClaudeArs <[email protected]>
openwallet-foundation · Feb 12, 2025 · 99f7e09 · 99f7e09
1 parent f311ffa
commit 99f7e09
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 10 deletions.
diff --git a/packages/legacy/core/App/navigators/TabStack.tsx b/packages/legacy/core/App/navigators/TabStack.tsx
@@ -179,7 +179,7 @@ const TabStack: React.FC = () => {
                       margin: 'auto',
                     }}
                   >
-                    <AttachTourStep tourID={BaseTourID.HomeTour} index={0} fill>
+                    <AttachTourStep tourID={BaseTourID.CredentialsTour} index={0} fill>
                       <View
                         style={{
                           flexGrow: 1,

diff --git a/packages/legacy/core/App/screens/CredentialOffer.tsx b/packages/legacy/core/App/screens/CredentialOffer.tsx
@@ -36,6 +36,7 @@ import { testIdWithKey } from '../utils/testable'
 
 import CredentialOfferAccept from './CredentialOfferAccept'
 import { BaseTourID } from '../types/tour'
+import { ImportantForAccessibility } from '../types/accessibility'
 
 type CredentialOfferProps = {
   navigation: any
@@ -67,11 +68,12 @@ const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentia
   const [buttonsVisible, setButtonsVisible] = useState(true)
   const [acceptModalVisible, setAcceptModalVisible] = useState(false)
   const [declineModalVisible, setDeclineModalVisible] = useState(false)
+  const [hideElements, setHideElements] = useState<ImportantForAccessibility>('auto')
   const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({ presentationFields: [] })
   const credential = useCredentialById(credentialId)
   const credentialConnectionLabel = useCredentialConnectionLabel(credential)
   const [store, dispatch] = useStore()
-  const { start } = useTour()
+  const { start, currentStep } = useTour()
   const screenIsFocused = useIsFocused()
   const goalCode = useOutOfBandByConnectionId(credential?.connectionId ?? '')?.outOfBandInvitation?.goalCode
   const [ConnectionAlert] = useServices([TOKENS.COMPONENT_CONNECTION_ALERT])
@@ -93,11 +95,14 @@ const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentia
   useEffect(() => {
     const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenCredentialOfferTour
     if (shouldShowTour && screenIsFocused) {
+      setHideElements('no-hide-descendants')
       start(BaseTourID.CredentialOfferTour)
       dispatch({
         type: DispatchAction.UPDATE_SEEN_CREDENTIAL_OFFER_TOUR,
         payload: [true],
       })
+    } else if (currentStep === undefined) {
+      setHideElements('auto')
     }
   }, [
     enableToursConfig,
@@ -106,6 +111,7 @@ const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentia
     screenIsFocused,
     start,
     dispatch,
+    currentStep,
   ])
 
   useEffect(() => {
@@ -306,7 +312,7 @@ const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentia
   }
 
   return (
-    <SafeAreaView style={{ flexGrow: 1 }} edges={['bottom', 'left', 'right']}>
+    <SafeAreaView style={{ flexGrow: 1 }} edges={['bottom', 'left', 'right']} importantForAccessibility={hideElements}>
       <Record fields={overlay.presentationFields || []} header={header} footer={footer} />
       <CredentialOfferAccept visible={acceptModalVisible} credentialId={credentialId} />
       <CommonRemoveModal

diff --git a/packages/legacy/core/App/screens/Home.tsx b/packages/legacy/core/App/screens/Home.tsx
@@ -13,6 +13,7 @@ import { useTheme } from '../contexts/theme'
 import { useTour } from '../contexts/tour/tour-context'
 import { HomeStackParams, Screens } from '../types/navigators'
 import { BaseTourID } from '../types/tour'
+import { ImportantForAccessibility } from '../types/accessibility'
 
 type HomeProps = StackScreenProps<HomeStackParams, Screens.Home>
 
@@ -36,8 +37,9 @@ const Home: React.FC<HomeProps> = () => {
   const { t } = useTranslation()
   const { ColorPallet } = useTheme()
   const [store, dispatch] = useStore()
-  const { start, stop } = useTour()
+  const { start, stop, currentStep } = useTour()
   const [showTourPopup, setShowTourPopup] = useState(false)
+  const [hideElements, setHideElements] = useState<ImportantForAccessibility>('auto')
   const screenIsFocused = useIsFocused()
 
   const styles = StyleSheet.create({
@@ -76,6 +78,7 @@ const Home: React.FC<HomeProps> = () => {
   useEffect(() => {
     const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenHomeTour
     if (shouldShowTour && screenIsFocused) {
+      setHideElements('no-hide-descendants')
       if (store.tours.seenToursPrompt) {
         dispatch({
           type: DispatchAction.UPDATE_SEEN_HOME_TOUR,
@@ -85,6 +88,8 @@ const Home: React.FC<HomeProps> = () => {
       } else {
         setShowTourPopup(true)
       }
+    } else if (currentStep === undefined) {
+      setHideElements('auto')
     }
   }, [
     enableToursConfig,
@@ -94,6 +99,7 @@ const Home: React.FC<HomeProps> = () => {
     store.tours.seenToursPrompt,
     dispatch,
     start,
+    currentStep,
   ])
 
   const onCTAPressed = useCallback(() => {
@@ -134,6 +140,7 @@ const Home: React.FC<HomeProps> = () => {
     <>
       <FlatList
         style={styles.flatlist}
+        importantForAccessibility={hideElements}
         showsVerticalScrollIndicator={false}
         scrollEnabled={notifications?.length > 0 ? true : false}
         decelerationRate="fast"

diff --git a/packages/legacy/core/App/screens/ListCredentials.tsx b/packages/legacy/core/App/screens/ListCredentials.tsx
@@ -3,7 +3,7 @@ import { CredentialExchangeRecord, CredentialState, W3cCredentialRecord } from '
 import { useCredentialByState } from '@credo-ts/react-hooks'
 import { useNavigation, useIsFocused } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FlatList, View } from 'react-native'
 
@@ -20,6 +20,7 @@ import { useOpenIDCredentials } from '../modules/openid/context/OpenIDCredential
 import { GenericCredentialExchangeRecord } from '../types/credentials'
 import { CredentialErrors } from '../components/misc/CredentialCard11'
 import { BaseTourID } from '../types/tour'
+import { ImportantForAccessibility } from '../types/accessibility'
 
 const ListCredentials: React.FC = () => {
   const { t } = useTranslation()
@@ -37,8 +38,9 @@ const ListCredentials: React.FC = () => {
   ])
   const navigation = useNavigation<StackNavigationProp<RootStackParams>>()
   const { ColorPallet } = useTheme()
-  const { start, stop } = useTour()
+  const { start, stop, currentStep } = useTour()
   const screenIsFocused = useIsFocused()
+  const [hideElements, setHideElements] = useState<ImportantForAccessibility>('auto')
   const {
     openIdState: { w3cCredentialRecords },
   } = useOpenIDCredentials()
@@ -64,13 +66,24 @@ const ListCredentials: React.FC = () => {
     const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenCredentialsTour
 
     if (shouldShowTour && screenIsFocused) {
+      setHideElements('no-hide-descendants')
       start(BaseTourID.CredentialsTour)
       dispatch({
         type: DispatchAction.UPDATE_SEEN_CREDENTIALS_TOUR,
         payload: [true],
       })
+    } else if (currentStep === undefined) {
+      setHideElements('auto')
     }
-  }, [enableToursConfig, store.tours.enableTours, store.tours.seenCredentialsTour, screenIsFocused, start, dispatch])
+  }, [
+    enableToursConfig,
+    store.tours.enableTours,
+    store.tours.seenCredentialsTour,
+    screenIsFocused,
+    start,
+    dispatch,
+    currentStep,
+  ])
 
   // stop the tour when the screen unmounts
   useEffect(() => {
@@ -99,6 +112,7 @@ const ListCredentials: React.FC = () => {
     <View>
       <FlatList
         style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        importantForAccessibility={hideElements}
         data={credentials.sort((a, b) => new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf())}
         keyExtractor={(credential) => credential.id}
         renderItem={({ item: credential, index }) => {

diff --git a/packages/legacy/core/App/screens/ProofRequest.tsx b/packages/legacy/core/App/screens/ProofRequest.tsx
@@ -65,6 +65,7 @@ import ProofRequestAccept from './ProofRequestAccept'
 import { CredentialErrors } from '../components/misc/CredentialCard11'
 import { HistoryCardType, HistoryRecord } from '../modules/history/types'
 import { BaseTourID } from '../types/tour'
+import { ImportantForAccessibility } from '../types/accessibility'
 
 type ProofRequestProps = {
   navigation: any
@@ -101,14 +102,15 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
   const [activeCreds, setActiveCreds] = useState<ProofCredentialItems[]>([])
   const [selectedCredentials, setSelectedCredentials] = useState<string[]>([])
   const [attestationLoading, setAttestationLoading] = useState(false)
+  const [hideElements, setHideElements] = useState<ImportantForAccessibility>('auto')
   const [store, dispatch] = useStore()
   const credProofPromise = useAllCredentialsForProof(proofId)
   const [ConnectionAlert] = useServices([TOKENS.COMPONENT_CONNECTION_ALERT])
   const proofConnectionLabel = useMemo(
     () => getConnectionName(connection, store.preferences.alternateContactNames),
     [connection, store.preferences.alternateContactNames]
   )
-  const { start } = useTour()
+  const { start, currentStep } = useTour()
   const screenIsFocused = useIsFocused()
   const [
     bundleResolver,
@@ -203,13 +205,24 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
     const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenProofRequestTour
 
     if (shouldShowTour && screenIsFocused) {
+      setHideElements('no-hide-descendants')
       start(BaseTourID.ProofRequestTour)
       dispatch({
         type: DispatchAction.UPDATE_SEEN_PROOF_REQUEST_TOUR,
         payload: [true],
       })
+    } else if (currentStep === undefined) {
+      setHideElements('auto')
     }
-  }, [enableToursConfig, store.tours.enableTours, store.tours.seenProofRequestTour, screenIsFocused, start, dispatch])
+  }, [
+    enableToursConfig,
+    store.tours.enableTours,
+    store.tours.seenProofRequestTour,
+    screenIsFocused,
+    start,
+    dispatch,
+    currentStep,
+  ])
 
   useEffect(() => {
     if (!agent || !proof) {
@@ -766,6 +779,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
   const CredentialList: React.FC<CredentialListProps> = ({ header, footer, items, missing }) => {
     return (
       <FlatList
+        importantForAccessibility={hideElements}
         data={items}
         scrollEnabled={false}
         ListHeaderComponent={header}
@@ -826,7 +840,11 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
     )
   }
   return (
-    <SafeAreaView style={styles.pageContainer} edges={['bottom', 'left', 'right']}>
+    <SafeAreaView
+      style={styles.pageContainer}
+      edges={['bottom', 'left', 'right']}
+      importantForAccessibility={hideElements}
+    >
       <ScrollView>
         <View style={styles.pageContent}>
           {proofPageHeader()}

diff --git a/packages/legacy/core/App/types/accessibility.ts b/packages/legacy/core/App/types/accessibility.ts
@@ -0,0 +1,3 @@
+import { AccessibilityProps } from 'react-native'
+
+export type ImportantForAccessibility = AccessibilityProps['importantForAccessibility']
diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/Connection.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/Connection.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`Connection Screen No connection, show to proof 1`] = `
         "right",
       ]
     }
+    importantForAccessibility="auto"
     style={
       Object {
         "flex": 1,
@@ -483,6 +484,7 @@ exports[`Connection Screen No connection, show to proof 1`] = `
             data={Array []}
             getItem={[Function]}
             getItemCount={[Function]}
+            importantForAccessibility="auto"
             keyExtractor={[Function]}
             onContentSizeChange={[Function]}
             onLayout={[Function]}
@@ -504,6 +506,7 @@ exports[`Connection Screen No connection, show to proof 1`] = `
             data={Array []}
             getItem={[Function]}
             getItemCount={[Function]}
+            importantForAccessibility="auto"
             keyExtractor={[Function]}
             onContentSizeChange={[Function]}
             onLayout={[Function]}
@@ -573,6 +576,7 @@ exports[`Connection Screen Valid goal code aries.vc.issue extracted, show to off
         "right",
       ]
     }
+    importantForAccessibility="auto"
     style={
       Object {
         "flexGrow": 1,

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/CredentialOffer.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/CredentialOffer.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`CredentialOffer Screen accepting a credential 1`] = `
       "right",
     ]
   }
+  importantForAccessibility="auto"
   style={
     Object {
       "flexGrow": 1,
@@ -1509,6 +1510,7 @@ exports[`CredentialOffer Screen declining a credential 1`] = `
       "right",
     ]
   }
+  importantForAccessibility="auto"
   style={
     Object {
       "flexGrow": 1,
@@ -3234,6 +3236,7 @@ exports[`CredentialOffer Screen renders correctly 1`] = `
       "right",
     ]
   }
+  importantForAccessibility="auto"
   style={
     Object {
       "flexGrow": 1,

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/W3cProofRequest.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/W3cProofRequest.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`displays a proof request screen ProofRequest Screen, W3C displays a pro
       "right",
     ]
   }
+  importantForAccessibility="auto"
   style={
     Object {
       "flex": 1,
@@ -220,6 +221,7 @@ exports[`displays a proof request screen ProofRequest Screen, W3C displays a pro
           }
           getItem={[Function]}
           getItemCount={[Function]}
+          importantForAccessibility="auto"
           keyExtractor={[Function]}
           onContentSizeChange={[Function]}
           onLayout={[Function]}
@@ -784,6 +786,7 @@ exports[`displays a proof request screen ProofRequest Screen, W3C displays a pro
           }
           getItem={[Function]}
           getItemCount={[Function]}
+          importantForAccessibility="auto"
           keyExtractor={[Function]}
           onContentSizeChange={[Function]}
           onLayout={[Function]}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { AccessibilityProps } from 'react-native'

		export type ImportantForAccessibility = AccessibilityProps['importantForAccessibility']