chore: add accessibilityRole header to app guide/tour and screens

Signed-off-by: fc-santos <[email protected]>
openwallet-foundation · Jan 10, 2025 · 6eea327 · 6eea327
1 parent 5b9b85e
commit 6eea327
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 9 deletions.
diff --git a/packages/legacy/core/App/components/misc/EmptyListContacts.tsx b/packages/legacy/core/App/components/misc/EmptyListContacts.tsx
@@ -42,7 +42,9 @@ const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
   return (
     <View style={styles.container}>
       <Assets.svg.contactBook fill={ListItems.emptyList.color} height={120} />
-      <Text style={[TextTheme.headingThree, styles.text, { marginTop: 30 }]}>{t('Contacts.EmptyList')}</Text>
+      <Text style={[TextTheme.headingThree, styles.text, { marginTop: 30 }]} accessibilityRole="header">
+        {t('Contacts.EmptyList')}
+      </Text>
       <Text style={[ListItems.emptyList, styles.text]}>{t('Contacts.PeopleAndOrganizations')}</Text>
       <Link style={styles.link} linkText={t('Contacts.WhatAreContacts')} onPress={navigateToWhatAreContacts} />
     </View>

diff --git a/packages/legacy/core/App/components/modals/AppGuideModal.tsx b/packages/legacy/core/App/components/modals/AppGuideModal.tsx
@@ -84,7 +84,7 @@ const AppGuideModal: React.FC<AppGuideModalProps> = ({
         <View style={styles.container}>
           <View style={styles.headerContainer}>
             <View style={styles.headerTextContainer}>
-              <Text style={styles.headerText} testID={testIdWithKey('HeaderText')}>
+              <Text style={styles.headerText} testID={testIdWithKey('HeaderText')} accessibilityRole="header">
                 {title}
               </Text>
             </View>

diff --git a/packages/legacy/core/App/components/modals/CameraDisclosureModal.tsx b/packages/legacy/core/App/components/modals/CameraDisclosureModal.tsx
@@ -80,7 +80,7 @@ const CameraDisclosureModal: React.FC<CameraDisclosureModalProps> = ({ requestCa
       )}
       <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
         <ScrollView style={styles.container}>
-          <Text style={TextTheme.modalHeadingOne} testID={testIdWithKey('AllowCameraUse')}>
+          <Text style={TextTheme.modalHeadingOne} testID={testIdWithKey('AllowCameraUse')} accessibilityRole="header">
             {t('CameraDisclosure.AllowCameraUse')}
           </Text>
           <Text style={[TextTheme.modalNormal, styles.messageText]}>{t('CameraDisclosure.CameraDisclosure')}</Text>

diff --git a/packages/legacy/core/App/components/tour/TourBox.tsx b/packages/legacy/core/App/components/tour/TourBox.tsx
@@ -179,7 +179,12 @@ export function TourBox(props: TourBoxProps): ReactElement {
     >
       <View style={styles.headerContainer}>
         <View style={styles.headerTextContainer}>
-          <Text allowFontScaling={false} style={styles.headerText} testID={testIdWithKey('HeaderText')}>
+          <Text
+            allowFontScaling={false}
+            style={styles.headerText}
+            testID={testIdWithKey('HeaderText')}
+            accessibilityRole="header"
+          >
             {title}
           </Text>
         </View>

diff --git a/packages/legacy/core/App/screens/Tours.tsx b/packages/legacy/core/App/screens/Tours.tsx
@@ -61,7 +61,9 @@ const Tours: React.FC = () => {
           const { value, bool }: Option = option
           return (
             <View style={[styles.section, styles.sectionRow]}>
-              <Text style={TextTheme.title}>{value}</Text>
+              <Text style={TextTheme.title} accessibilityRole="header">
+                {value}
+              </Text>
               <BouncyCheckbox
                 accessibilityLabel={value}
                 disableText

diff --git a/packages/legacy/core/App/screens/WhatAreContacts.tsx b/packages/legacy/core/App/screens/WhatAreContacts.tsx
@@ -32,9 +32,7 @@ const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
   })
 
   const goToContactList = () => {
-    navigation
-      .getParent()
-      ?.navigate(Stacks.ContactStack, { screen: Screens.Contacts })
+    navigation.getParent()?.navigate(Stacks.ContactStack, { screen: Screens.Contacts })
   }
 
   const bulletPoints = [
@@ -59,7 +57,9 @@ const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
         automaticallyAdjustContentInsets={false}
         showsHorizontalScrollIndicator={false}
       >
-        <Text style={styles.title}>{t('WhatAreContacts.Title')}</Text>
+        <Text style={styles.title} accessibilityRole="header">
+          {t('WhatAreContacts.Title')}
+        </Text>
         <Text style={TextTheme.normal}>{t('WhatAreContacts.Preamble')}</Text>
         {bulletPoints}
         <Text style={TextTheme.normal}>

diff --git a/packages/legacy/core/__tests__/components/__snapshots__/TourBox.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/TourBox.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`TourBox Component Renders properly with defaults 1`] = `
       }
     >
       <Text
+        accessibilityRole="header"
         allowFontScaling={false}
         style={
           Object {

diff --git a/packages/legacy/core/__tests__/modals/__snapshots__/CameraDisclosureModal.test.tsx.snap b/packages/legacy/core/__tests__/modals/__snapshots__/CameraDisclosureModal.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`CameraDisclosureModal Component Renders correctly 1`] = `
     >
       <View>
         <Text
+          accessibilityRole="header"
           style={
             Object {
               "color": "#FFFFFF",

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`WhatAreContacts Screen Renders correctly 1`] = `
   >
     <View>
       <Text
+        accessibilityRole="header"
         style={
           Object {
             "color": "#FFFFFF",
-Original file line number
+Diff line change
@@ Expand Up @@
           }
         >
           <Text
+            accessibilityRole="header"
             allowFontScaling={false}
             style={
               Object {
@@ Expand Down @@