fix: accessibilité rapport ux (#210)

Signed-off-by: fc-santos <filipesantos@live.ca>
MCN-ING · Jan 16, 2025 · aaa11a2 · aaa11a2
1 parent 88cfb06
commit aaa11a2
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 61 deletions.
diff --git a/app/__tests__/components/modals/DismissablePopupModal.test.tsx b/app/__tests__/components/modals/DismissablePopupModal.test.tsx
@@ -60,8 +60,8 @@ describe('DismissiblePopupModal Component', () => {
         onCallToActionPressed={onCallToActionPressed}
       />
     )
-    const dismissButton = getByTestId(testIdWithKey('Dismiss'))
-    fireEvent(dismissButton, 'press')
+    const closeButton = getByTestId(testIdWithKey('Close'))
+    fireEvent(closeButton, 'press')
 
     expect(onDismissPressed).toBeCalledTimes(1)
   })

diff --git a/app/__tests__/components/modals/__snapshots__/DismissablePopupModal.test.tsx.snap b/app/__tests__/components/modals/__snapshots__/DismissablePopupModal.test.tsx.snap
@@ -104,6 +104,7 @@ exports[`DismissiblePopupModal Component Renders correctly with call to action 1
             }
           >
             <Text
+              accessible={false}
               allowFontScaling={false}
               selectable={false}
               style={
@@ -154,7 +155,7 @@ exports[`DismissiblePopupModal Component Renders correctly with call to action 1
             }
           >
             <View
-              accessibilityLabel="Global.Dismiss"
+              accessibilityLabel="Global.Close"
               accessibilityRole="button"
               accessibilityState={
                 {
@@ -196,7 +197,7 @@ exports[`DismissiblePopupModal Component Renders correctly with call to action 1
                   "opacity": 1,
                 }
               }
-              testID="com.ariesbifold:id/Dismiss"
+              testID="com.ariesbifold:id/Close"
             >
               <Text
                 allowFontScaling={false}
@@ -454,6 +455,7 @@ exports[`DismissiblePopupModal Component Renders correctly without call to actio
             }
           >
             <Text
+              accessible={false}
               allowFontScaling={false}
               selectable={false}
               style={
@@ -504,7 +506,7 @@ exports[`DismissiblePopupModal Component Renders correctly without call to actio
             }
           >
             <View
-              accessibilityLabel="Global.Dismiss"
+              accessibilityLabel="Global.Close"
               accessibilityRole="button"
               accessibilityState={
                 {
@@ -546,7 +548,7 @@ exports[`DismissiblePopupModal Component Renders correctly without call to actio
                   "opacity": 1,
                 }
               }
-              testID="com.ariesbifold:id/Dismiss"
+              testID="com.ariesbifold:id/Close"
             >
               <Text
                 allowFontScaling={false}

diff --git a/app/src/components/AddCredentialSlider.tsx b/app/src/components/AddCredentialSlider.tsx
@@ -123,7 +123,7 @@ const AddCredentialSlider: React.FC = () => {
 
   return (
     <Modal animationType="slide" transparent={true} visible={addCredentialPressed} onRequestClose={deactivateSlider}>
-      <TouchableOpacity style={styles.outsideListener} onPress={deactivateSlider} />
+      <TouchableOpacity style={styles.outsideListener} onPress={deactivateSlider} accessible={false} />
       <View style={styles.centeredView}>
         <View style={styles.modalView}>
           <TouchableOpacity

diff --git a/app/src/components/Help/HelpListSlider.tsx b/app/src/components/Help/HelpListSlider.tsx
@@ -116,7 +116,12 @@ const HelpListSlider: React.FC = () => {
 
   return (
     <Modal transparent={true} visible={addHelpPressed} onRequestClose={deactivateSlider}>
-      <TouchableOpacity style={styles.outsideListener} onPress={deactivateSlider} hitSlop={hitSlop} />
+      <TouchableOpacity
+        style={styles.outsideListener}
+        onPress={deactivateSlider}
+        hitSlop={hitSlop}
+        accessible={false}
+      />
       <View style={styles.centeredView}>
         {/* Suppression de l'animation d'opacité */}
         <View style={styles.modalView}>

diff --git a/app/src/components/modals/DismissablePopupModal.tsx b/app/src/components/modals/DismissablePopupModal.tsx
@@ -111,7 +111,7 @@ const DismissiblePopupModal: React.FC<DismissiblePopupModalProps> = ({
             <View style={styles.container}>
               <View style={styles.headerContainer}>
                 <View style={styles.infoIcon}>
-                  <Icon name={infoIconName} size={iconSize} color={iconColor} />
+                  <Icon name={infoIconName} size={iconSize} color={iconColor} accessible={false} />
                 </View>
                 <View style={styles.headerTextContainer}>
                   <Text style={styles.headerText} testID={testIdWithKey('HeaderText')}>
@@ -121,8 +121,8 @@ const DismissiblePopupModal: React.FC<DismissiblePopupModalProps> = ({
                 <View style={styles.dismissIcon}>
                   <TouchableOpacity
                     onPress={onDismissPressed}
-                    testID={testIdWithKey('Dismiss')}
-                    accessibilityLabel={t('Global.Dismiss')}
+                    testID={testIdWithKey('Close')}
+                    accessibilityLabel={t('Global.Close')}
                     accessibilityRole={'button'}
                     hitSlop={hitSlop}
                   >

diff --git a/app/src/localization/fr/index.ts b/app/src/localization/fr/index.ts
@@ -39,7 +39,7 @@ const translation = {
     Dismiss: 'Rejeter',
     On: 'Activé',
     Off: 'Fermer',
-    Close: 'Retirer',
+    Close: 'Fermer',
     Save: 'Enregistrer',
     ShowDetails: 'Afficher les détails',
     Biometrics: 'Biométrie',

diff --git a/app/src/screens/About.tsx b/app/src/screens/About.tsx
@@ -20,14 +20,13 @@ const HelpCenter: React.FC = () => {
       flex: 1,
       justifyContent: 'flex-end',
       ...TextTheme.headingOne,
-      margin: 10,
+      paddingBottom: 20,
     },
     sectionCopyrightText: {
       ...TextTheme.caption,
       color: TextTheme.normal.color,
       textAlign: 'left',
       textDecorationLine: 'none',
-      marginLeft: 10,
     },
   })
   return (

diff --git a/app/src/screens/HelpCenter.tsx b/app/src/screens/HelpCenter.tsx
@@ -32,14 +32,14 @@ const HelpCenter: React.FC<HelpCenterProps> = ({ navigation }) => {
       flex: 1,
       justifyContent: 'flex-end',
       ...TextTheme.headingOne,
-      margin: 10,
+      marginTop: 10,
+      paddingBottom: 20,
     },
     sectionCopyrightText: {
       ...TextTheme.caption,
       color: TextTheme.normal.color,
       textAlign: 'left',
       textDecorationLine: 'none',
-      marginLeft: 10,
     },
   })
 

diff --git a/app/src/screens/Settings.tsx b/app/src/screens/Settings.tsx
@@ -3,7 +3,7 @@ import { i18n, Locales } from '@hyperledger/aries-bifold-core/App/localization'
 import { StackScreenProps } from '@react-navigation/stack'
 import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, Text, View, TouchableOpacity, Pressable, Modal } from 'react-native'
+import { ScrollView, StyleSheet, Text, View, TouchableOpacity, Modal, AccessibilityRole } from 'react-native'
 import { getBuildNumber, getVersion } from 'react-native-device-info'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
@@ -75,12 +75,6 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
       flexGrow: 1,
       paddingHorizontal: 20,
     },
-    sectionRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 8,
-    },
     rowTitle: {
       ...TextTheme.headingFour,
       flex: 1,
@@ -97,15 +91,15 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
     },
   })
   const SectionHeader = ({ title }: { title: string }): JSX.Element => (
-    <>
-      <View style={[styles.section, styles.sectionHeader]}>
-        <Text style={[TextTheme.headingThree, { flexShrink: 1 }]}>{title}</Text>
-      </View>
-    </>
+    <View style={[styles.section, styles.sectionHeader]}>
+      <Text style={[TextTheme.headingThree, { flexShrink: 1 }]} accessibilityRole="header">
+        {title}
+      </Text>
+    </View>
   )
   interface SectionRowProps {
     title: string
-    accessibilityLabel?: string
+    accessibilityRole?: AccessibilityRole
     testID?: string
     children: JSX.Element
     showRowSeparator?: boolean
@@ -115,31 +109,23 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
   }
   const SectionRow = ({
     title,
-    accessibilityLabel,
+    accessibilityRole = undefined,
     testID,
     onPress,
     children,
     showRowSeparator,
     subContent,
     rowIcon,
   }: SectionRowProps) => (
-    <TouchableOpacity accessibilityLabel={accessibilityLabel} testID={testID} onPress={onPress}>
+    <TouchableOpacity testID={testID} onPress={onPress} accessibilityRole={accessibilityRole}>
       <View style={[styles.section]}>
-        <Pressable
-          onPress={onPress}
-          accessible={true}
-          accessibilityLabel={accessibilityLabel}
-          testID={testID}
-          style={styles.sectionRow}
-        >
-          <View style={{ flexDirection: 'row' }}>
-            <Text style={styles.rowTitle}>{title}</Text>
+        <View style={{ flexDirection: 'row' }}>
+          <Text style={styles.rowTitle}>{title}</Text>
 
-            {children}
+          {children}
 
-            {rowIcon}
-          </View>
-        </Pressable>
+          {rowIcon}
+        </View>
         {subContent}
       </View>
       {showRowSeparator && (
@@ -149,7 +135,9 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
       )}
     </TouchableOpacity>
   )
-  const arrowIcon = <MaterialIcon name={'keyboard-arrow-right'} size={iconSize} />
+  const arrowIcon = (
+    <MaterialIcon name={'keyboard-arrow-right'} size={iconSize} accessible={false} accessibilityLabel="" />
+  )
   return (
     <SafeAreaView style={styles.container} edges={['left', 'right']}>
       <Modal
@@ -166,8 +154,8 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         <SectionHeader title={t('Settings.Preference')} />
         <SectionRow
           title={t('Settings.Language')}
-          accessibilityLabel={t('Settings.Language')}
-          testID={testIdWithKey(t('Settings.Language').toLowerCase())}
+          accessibilityRole="button"
+          testID={testIdWithKey('Language')}
           onPress={() => navigation.navigate(Screens.Language)}
           rowIcon={arrowIcon}
         >
@@ -176,8 +164,8 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         <SectionHeader title={t('Settings.Security')} />
         <SectionRow
           title={t('Settings.MyPin')}
-          accessibilityLabel={t('Settings.MyPin')}
-          testID={testIdWithKey(t('Settings.MyPin').toLowerCase())}
+          accessibilityRole="button"
+          testID={testIdWithKey('MyPin')}
           onPress={() =>
             navigation
               .getParent()
@@ -191,8 +179,8 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         <View style={[styles.sectionSeparator]}></View>
         <SectionRow
           title={t('Settings.Biometrics')}
-          accessibilityLabel={t('Settings.Biometrics')}
-          testID={testIdWithKey(t('Settings.Biometrics').toLowerCase())}
+          accessibilityRole="button"
+          testID={testIdWithKey('Biometrics')}
           onPress={() => navigation.navigate(Screens.UseBiometry)}
           showRowSeparator
           rowIcon={arrowIcon}
@@ -206,8 +194,8 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
             <View style={[styles.sectionSeparator]}></View>
             <SectionRow
               title={t('Developer.Environment')}
-              accessibilityLabel={t('Developer.Environment')}
-              testID={testIdWithKey(t('Developer.Environment').toLowerCase())}
+              accessibilityRole="button"
+              testID={testIdWithKey('Environment')}
               showRowSeparator={true}
               onPress={() => {
                 setEnvironmentModalVisible(true)
@@ -224,8 +212,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         <View style={[styles.sectionSeparator]}></View>
         <SectionRow
           title={t('Settings.Version')}
-          accessibilityLabel={t('Settings.Version')}
-          testID={testIdWithKey(t('Settings.Version').toLowerCase())}
+          testID={testIdWithKey('Version')}
           onPress={() => {
             incrementDeveloperMenuCounter()
           }}

diff --git a/app/src/screens/UseBiometry.tsx b/app/src/screens/UseBiometry.tsx
@@ -82,6 +82,9 @@ const UseBiometry: React.FC = () => {
       marginRight: 10,
       justifyContent: 'center',
     },
+    biometryAvailableGap: {
+      rowGap: 16,
+    },
   })
 
   useEffect(() => {
@@ -320,20 +323,18 @@ const UseBiometry: React.FC = () => {
         <HeaderText title={!inBiometryScreenFromSettings ? t('Screens.Biometry') : t('Screens.UseBiometry')} />
         <View style={{ marginTop: 20 }}>
           {biometryAvailable ? (
-            <>
+            <View style={styles.biometryAvailableGap}>
               <Text style={TextTheme.normal}>{t('Biometry.EnabledText1')}</Text>
-              <Text></Text>
               <Text style={TextTheme.normal}>
                 {t('Biometry.EnabledText2')}
                 <Text style={TextTheme.bold}> {t('Biometry.Warning')}</Text>
               </Text>
-            </>
+            </View>
           ) : (
-            <>
+            <View style={styles.biometryAvailableGap}>
               <Text style={TextTheme.normal}>{t('Biometry.NotEnabledText1')}</Text>
-              <Text></Text>
               <Text style={TextTheme.normal}>{t('Biometry.NotEnabledText2')}</Text>
-            </>
+            </View>
           )}
         </View>
         <View