chore: ajout d'accessibilité entête (#200)

Signed-off-by: fc-santos <filipesantos@live.ca>
MCN-ING · Jan 15, 2025 · 511b34a · 511b34a
1 parent 6e39438
commit 511b34a
Show file tree

Hide file tree

Showing 21 changed files with 230 additions and 95 deletions.
diff --git a/.yarn/patches/@hyperledger-aries-bifold-core-npm-1.0.0-alpha.420-2f9dd7b327.patch b/.yarn/patches/@hyperledger-aries-bifold-core-npm-1.0.0-alpha.420-2f9dd7b327.patch
@@ -0,0 +1,104 @@
+diff --git a/App/components/listItems/NotificationListItem.tsx b/App/components/listItems/NotificationListItem.tsx
+index 1c8a86091e207b58a620be00db905b4ba7d06539..b3b630f911d116a0f6ce441c0aae3abe770f2075 100644
+--- a/App/components/listItems/NotificationListItem.tsx
++++ b/App/components/listItems/NotificationListItem.tsx
+@@ -49,6 +49,8 @@ export interface NotificationListItemProps {
+   notificationType: NotificationType
+   notification: BasicMessageRecord | CredentialExchangeRecord | ProofExchangeRecord | CustomNotificationRecord
+   customNotification?: CustomNotification
++  openSwipeableId?: string | null,
++  onOpenSwipeable?: (id: string | null) => void
+ }
+
+ type DisplayDetails = {
+@@ -83,6 +85,8 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
+   notificationType,
+   notification,
+   customNotification,
++  openSwipeableId,
++  onOpenSwipeable,
+ }) => {
+   const navigation = useNavigation<StackNavigationProp<HomeStackParams>>()
+   const [store, dispatch] = useStore()
+diff --git a/App/screens/Home.tsx b/App/screens/Home.tsx
+index ad946ed3ee1af79bbdc90fa70e30eefd6782128c..7e10dc7df06c559ae379e4f5bbf3f53f9a13ada6 100644
+--- a/App/screens/Home.tsx
++++ b/App/screens/Home.tsx
+@@ -40,6 +40,8 @@ const Home: React.FC<HomeProps> = () => {
+   const [showTourPopup, setShowTourPopup] = useState(false)
+   const screenIsFocused = useIsFocused()
+
++  const [notificationItemId, setNotificationItemId] = useState<string | null>(null)
++
+   const styles = StyleSheet.create({
+     flatlist: {
+       marginBottom: 35,
+@@ -49,26 +51,48 @@ const Home: React.FC<HomeProps> = () => {
+   const DisplayListItemType = useCallback((item: any): React.ReactNode => {
+     let component: React.ReactNode
+     if (item.type === 'BasicMessageRecord') {
+-      component = <NotificationListItem notificationType={NotificationType.BasicMessage} notification={item} />
++      component = (
++        <NotificationListItem
++          openSwipeableId={notificationItemId}
++          onOpenSwipeable={setNotificationItemId}
++          notificationType={NotificationType.BasicMessage}
++          notification={item} />
++      )
+     } else if (item.type === 'CredentialRecord') {
+       let notificationType = NotificationType.CredentialOffer
+       if (item.revocationNotification) {
+         notificationType = NotificationType.Revocation
+       }
+-      component = <NotificationListItem notificationType={notificationType} notification={item} />
+-    } else if (item.type === 'CustomNotification' && customNotification) {
+       component = (
+         <NotificationListItem
+-          notificationType={NotificationType.Custom}
++          openSwipeableId={notificationItemId}
++          onOpenSwipeable={setNotificationItemId}
++          notificationType={notificationType}
+           notification={item}
+-          customNotification={customNotification}
+         />
+       )
++    } else if (item.type === 'CustomNotification' && customNotification) {
++      component = (
++         <NotificationListItem
++           openSwipeableId={notificationItemId}
++           onOpenSwipeable={setNotificationItemId}
++           notificationType={NotificationType.Custom}
++           notification={item}
++           customNotification={customNotification}
++         />
++       )
+     } else {
+-      component = <NotificationListItem notificationType={NotificationType.ProofRequest} notification={item} />
++      component = (
++         <NotificationListItem
++           openSwipeableId={notificationItemId}
++           onOpenSwipeable={setNotificationItemId}
++           notificationType={NotificationType.ProofRequest}
++           notification={item}
++         />
++       )
+     }
+     return component
+-  }, [customNotification, NotificationListItem])
++  }, [customNotification, NotificationListItem, notificationItemId, setNotificationItemId])
+
+   useEffect(() => {
+     const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenHomeTour
+diff --git a/App/types/proof-items.ts b/App/types/proof-items.ts
+index fc4db0531ba9274f65b5ff1563c7c7f18c20a840..cfc9d66233935fa186772fc729f01244f0f64abe 100644
+--- a/App/types/proof-items.ts
++++ b/App/types/proof-items.ts
+@@ -1,7 +1,7 @@
+ import { AnonCredsCredentialsForProofRequest } from '@credo-ts/anoncreds'
+ import { CredentialExchangeRecord } from '@credo-ts/core'
+ import { Attribute, Predicate } from '@hyperledger/aries-oca/build/legacy'
+-import { DescriptorMetadata } from 'utils/anonCredsProofRequestMapper'
++import { DescriptorMetadata } from '../utils/anonCredsProofRequestMapper'
+
+ export type CredentialDataForProof = {
+   groupedProof: (ProofCredentialPredicates & ProofCredentialAttributes)[],
diff --git a/app/__tests__/components/__snapshots__/HeaderText.test.tsx.snap b/app/__tests__/components/__snapshots__/HeaderText.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`HeaderText Component Renders correctly 1`] = `
 <View>
   <Text
+    accessibilityRole="header"
     style={
       [
         {

diff --git a/app/__tests__/components/__snapshots__/PINCreateHeader.test.tsx.snap b/app/__tests__/components/__snapshots__/PINCreateHeader.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`PINCreateHeader Component Renders correctly 1`] = `
   >
     <View>
       <Text
+        accessibilityRole="header"
         style={
           [
             {

diff --git a/app/container-imp.ts b/app/container-imp.ts
@@ -69,6 +69,7 @@ const defaultConfig: BifoldConfig = {
   showPINExplainer: false,
   enableReuseConnections: true,
   disableOnboardingSkip: true,
+  enableHiddenDevModeTrigger: false,
   showScanHelp: true,
   showScanButton: true,
   showDetailsInfo: true,
@@ -150,6 +151,10 @@ export class AppContainer implements Container {
       ...onboardingScreenOptions,
       gestureEnabled: true,
     }
+    defaultScreenOptionsDict[Screens.Terms] = {
+      ...defaultScreenOptionsDict[Screens.Terms],
+      ...onboardingScreenOptions,
+    }
 
     // Here you can register any component to override components in core package
     // Example: Replacing button in core with custom button

diff --git a/app/ios/Podfile.lock b/app/ios/Podfile.lock
@@ -330,7 +330,7 @@ PODS:
   - React-jsinspector (0.72.17)
   - React-logger (0.72.17):
     - glog
-  - "react-native-attestation (1.0.0-alpha.413+5b9b85ea)":
+  - "react-native-attestation (1.0.0-alpha.420+883c08a5)":
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
   - react-native-config (1.5.0):
@@ -783,7 +783,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 8dc585381e476c3ff2e9468f444c90c4d1d5b874
   React-jsinspector: 853b8631b908636bb09ef77cb217376c38a0c8ff
   React-logger: 9ca44bb5703bf2355f3c2d2e5e67bfe98ca2dc34
-  react-native-attestation: 3e95d8178650246356cdbd14d9966e94c1d96be2
+  react-native-attestation: fc2eac4a1eb3e64cf47c8ac4d340bf8094353c98
   react-native-config: 5330c8258265c1e5fdb8c009d2cabd6badd96727
   react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
   react-native-get-random-values: a6ea6a8a65dc93e96e24a11105b1a9c8cfe1d72a

diff --git a/app/package.json b/app/package.json
@@ -62,11 +62,11 @@
     "@formatjs/intl-relativetimeformat": "9.3.1",
     "@hyperledger/anoncreds-react-native": "0.2.4",
     "@hyperledger/aries-askar-react-native": "0.2.3",
-    "@hyperledger/aries-bifold-core": "patch:@hyperledger/aries-bifold-core@npm%3A1.0.0-alpha.413#~/.yarn/patches/@hyperledger-aries-bifold-core-npm-1.0.0-alpha.413-67c37248ce.patch",
-    "@hyperledger/aries-bifold-remote-logs": "1.0.0-alpha.413",
-    "@hyperledger/aries-bifold-verifier": "1.0.0-alpha.413",
-    "@hyperledger/aries-oca": "1.0.0-alpha.413",
-    "@hyperledger/aries-react-native-attestation": "1.0.0-alpha.413",
+    "@hyperledger/aries-bifold-core": "patch:@hyperledger/aries-bifold-core@npm%3A1.0.0-alpha.420#~/.yarn/patches/@hyperledger-aries-bifold-core-npm-1.0.0-alpha.420-2f9dd7b327.patch",
+    "@hyperledger/aries-bifold-remote-logs": "1.0.0-alpha.420",
+    "@hyperledger/aries-bifold-verifier": "1.0.0-alpha.420",
+    "@hyperledger/aries-oca": "1.0.0-alpha.420",
+    "@hyperledger/aries-react-native-attestation": "1.0.0-alpha.420",
     "@hyperledger/indy-vdr-react-native": "0.2.2",
     "@hyperledger/indy-vdr-shared": "0.2.2",
     "@react-native-async-storage/async-storage": "1.15.11",

diff --git a/app/src/components/HeaderText.tsx b/app/src/components/HeaderText.tsx
@@ -3,9 +3,10 @@ import { StyleSheet, Text, View } from 'react-native'
 
 type Props = {
   title: string
+  isHeader?: boolean
 }
 
-const HeaderText = ({ title }: Props) => {
+const HeaderText = ({ title, isHeader = true }: Props) => {
   const { ColorPallet, TextTheme } = useTheme()
   const style = StyleSheet.create({
     headerText: {
@@ -21,7 +22,9 @@ const HeaderText = ({ title }: Props) => {
   })
   return (
     <View>
-      <Text style={[style.headerText]}>{title}</Text>
+      <Text style={[style.headerText]} accessibilityRole={`${isHeader ? 'header' : 'text'}`}>
+        {title}
+      </Text>
       <View style={style.headerBottomLine} />
     </View>
   )

diff --git a/app/src/components/Help/HelpCenterButton.tsx b/app/src/components/Help/HelpCenterButton.tsx
@@ -37,7 +37,8 @@ const HelpCenterButton = () => {
     <TouchableOpacity
       style={styles.container}
       onPress={activateSlider}
-      accessibilityHint="Cliquez pour ouvrir la liste des options"
+      accessibilityHint={t('HelpCenter.OptionsList')}
+      accessibilityRole="button"
     >
       <Text style={styles.text}>{t('HelpCenter.Help')}</Text>
     </TouchableOpacity>

diff --git a/app/src/components/Help/HelpListSlider.tsx b/app/src/components/Help/HelpListSlider.tsx
@@ -141,7 +141,7 @@ const HelpListSlider: React.FC = () => {
                                 },
                               })
                             }}
-                            accessible={true}
+                            accessibilityRole="button"
                           >
                             <Text style={{ ...styles.drawerRowItem, marginLeft: 5 }}>
                               {hasTitle(contentItem) && contentItem.title}
@@ -157,6 +157,7 @@ const HelpListSlider: React.FC = () => {
           </View>
           <TouchableOpacity
             style={styles.drawerRow}
+            accessibilityRole="button"
             onPress={() => {
               deactivateSlider()
               navigation.navigate(Stacks.HelpCenterStack as never, { screen: Screens.HelpCenter } as never)

diff --git a/app/src/components/Help/HelpRowSection.tsx b/app/src/components/Help/HelpRowSection.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from '@hyperledger/aries-bifold-core'
+import { testIdWithKey, useTheme } from '@hyperledger/aries-bifold-core'
 import { NavigationProp } from '@react-navigation/native'
 import React from 'react'
 import { StyleSheet, Text, View, Pressable, ImageSourcePropType } from 'react-native'
@@ -38,8 +38,6 @@ const HelpRowSection = ({
   showSectionTitle,
   sectionTitle,
   itemSection = [],
-  accessibilityLabel,
-  testID,
   children,
   showRowSeparator,
   subContent,
@@ -91,7 +89,9 @@ const HelpRowSection = ({
     <>
       {showSectionTitle && (
         <View style={[styles.section, styles.sectionHeader]}>
-          <Text style={[TextTheme.headingThree, styles.sectionHeaderText]}>{sectionTitle}</Text>
+          <Text style={[TextTheme.headingThree, styles.sectionHeaderText]} accessibilityRole="header">
+            {sectionTitle}
+          </Text>
         </View>
       )}
       {itemSection.map((item, index) => (
@@ -101,9 +101,9 @@ const HelpRowSection = ({
               onPress={() =>
                 navigation.navigate(Screens.HelpCenterPage, { selectedSection: itemSection, sectionNo: index })
               }
-              accessible={true}
-              accessibilityLabel={accessibilityLabel}
-              testID={testID}
+              accessibilityRole="button"
+              accessibilityLabel={item.title}
+              testID={testIdWithKey(item.title)}
             >
               <View style={styles.sectionRow}>
                 <Text style={styles.rowTitle}>{item.title}</Text>

diff --git a/app/src/components/HomeFooter.tsx b/app/src/components/HomeFooter.tsx
@@ -35,6 +35,7 @@ const HomeFooter = () => {
     <View style={styles.footerContainer}>
       {notifications?.length > 0 && (
         <TouchableOpacity
+          accessibilityRole="button"
           style={styles.footerLinkContainer}
           onPress={() => navigate(TabStacks.ActivitiesStack as never, { screen: Screens.Activities } as never)}
         >

diff --git a/app/src/components/HomeHeader.tsx b/app/src/components/HomeHeader.tsx
@@ -80,9 +80,9 @@ const HomeHeader = () => {
 
   return (
     <View style={styles.container}>
-      <HeaderText title={t('Home.Welcome')} />
+      <HeaderText title={t('Home.Welcome')} isHeader={false} />
       <View style={styles.ScanQrCodeContainer}>
-        <TouchableWithoutFeedback onPress={handleNavigation}>
+        <TouchableWithoutFeedback onPress={handleNavigation} accessibilityRole="button">
           <View style={styles.ScanQrCodeInnerContainer}>
             <View style={styles.imgContainer}>
               <HomeImg />
@@ -94,7 +94,9 @@ const HomeHeader = () => {
         </TouchableWithoutFeedback>
       </View>
       <View style={styles.activiteTitleContainer}>
-        <Text style={styles.activiteTitle}>{t('Home.NotificationTitle')}</Text>
+        <Text style={styles.activiteTitle} accessibilityRole="header">
+          {t('Home.NotificationTitle')}
+        </Text>
       </View>
     </View>
   )

diff --git a/app/src/components/InfosDisplay.tsx b/app/src/components/InfosDisplay.tsx
@@ -70,7 +70,9 @@ const InfosDisplay: React.FC<InfosDisplayProps> = ({ title, detail, visual, ques
   return (
     <View style={[styles.section]}>
       <View>
-        <Text style={[TextTheme.headingThree, styles.sectionHeaderText]}>{title ? title : question}</Text>
+        <Text style={[TextTheme.headingThree, styles.sectionHeaderText]} accessibilityRole="header">
+          {title ? title : question}
+        </Text>
         <Text style={[TextTheme.headingFour, styles.sectionText]}>{detail ? detail : answer}</Text>
       </View>
       {visual && (

diff --git a/app/src/components/RowSection.tsx b/app/src/components/RowSection.tsx
@@ -78,7 +78,7 @@ const RowSection = ({
         </View>
       )}
       <View style={[styles.section]}>
-        <Pressable onPress={onPress} accessible={true} accessibilityLabel={accessibilityLabel} testID={testID}>
+        <Pressable onPress={onPress} accessibilityLabel={accessibilityLabel} testID={testID} accessibilityRole="button">
           <View style={styles.sectionRow}>
             <Text style={styles.rowTitle}>{title}</Text>
             <Text style={[TextTheme.headingFour, styles.sectionText]}>{children}</Text>

diff --git a/app/src/localization/fr/index.ts b/app/src/localization/fr/index.ts
@@ -1007,6 +1007,7 @@ const translation = {
   HelpCenter: {
     Help: 'Aide',
     ButtonHelpCenter: "Revenir au centre d'aide",
+    ConsultHelpCenter: "Consulter le centre d'aide",
     OptionsList: 'Cliquez pour ouvrir la liste des options',
   },
   About: {

diff --git a/app/src/screens/DefaultNotification.tsx b/app/src/screens/DefaultNotification.tsx
@@ -81,11 +81,15 @@ const DefaultNotification: React.FC<DefaultProps> = ({ navigation }: DefaultProp
           <Text style={styles.sectionDescriptionTitle}> {t('DefaultNotificationPage.Description')}</Text>
         </View>
         <View style={styles.section}>
-          <Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.SAGConnexion')}</Text>
+          <Text style={styles.textSectionTitle} accessibilityRole="header">
+            {t('DefaultNotificationPage.SAGConnexion')}
+          </Text>
           <Text style={styles.sectionDescription}> {t('DefaultNotificationPage.SAGConnexionDescription')}</Text>
         </View>
         <View style={[styles.sectionBottom, styles.section]}>
-          <Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.ANIGRequest')}</Text>
+          <Text style={styles.textSectionTitle} accessibilityRole="header">
+            {t('DefaultNotificationPage.ANIGRequest')}
+          </Text>
           <Text style={styles.sectionDescription}> {t('DefaultNotificationPage.ANIGAcceptDescription')}</Text>
         </View>
         <View style={styles.buttonContainer}>

diff --git a/app/src/screens/HelpCenter.tsx b/app/src/screens/HelpCenter.tsx
@@ -1,4 +1,4 @@
-import { useTheme, testIdWithKey } from '@hyperledger/aries-bifold-core'
+import { useTheme } from '@hyperledger/aries-bifold-core'
 import { i18n } from '@hyperledger/aries-bifold-core/App/localization'
 import { StackScreenProps } from '@react-navigation/stack'
 import React from 'react'
@@ -52,8 +52,6 @@ const HelpCenter: React.FC<HelpCenterProps> = ({ navigation }) => {
               showSectionTitle
               sectionTitle={item.title}
               itemSection={item.sections ? item.sections : []}
-              accessibilityLabel={t('About.Accessibility')}
-              testID={testIdWithKey(t('About.Accessibility').toLowerCase())}
               showRowSeparator
               showArrowIcon={true}
               navigation={navigation}

diff --git a/app/src/screens/Plus.tsx b/app/src/screens/Plus.tsx
@@ -129,7 +129,10 @@ const Plus: React.FC<OptionsPlusProps> = ({ navigation }) => {
               />
             </View>
             <View style={styles.section}>
-              <Text style={styles.textHeaderTitle}> {t('OptionsPlus.TitleSupport')}</Text>
+              <Text style={styles.textHeaderTitle} accessibilityRole="header">
+                {' '}
+                {t('OptionsPlus.TitleSupport')}
+              </Text>
               <Text style={styles.sectionDescription}> {t('OptionsPlus.DetailSupport')}</Text>
             </View>
             <ContactUs />
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ @@
     exports[`HeaderText Component Renders correctly 1`] = `
     <View>
       <Text
+        accessibilityRole="header"
         style={
           [
             {
@@ Expand Down @@