fix: Updated accessibility role for buttons (#8753)

## **Description** - Updated accessibility role for buttons and text inside buttons - Enabled 'Text' to accept accessibilityRole ## **Related issues** Fixes: #8630 ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained what problem this PR is solving and how it is solved. - [x] I've linked related issues - [ ] I've included manual testing steps - [ ] I've included screenshots/recordings if applicable - [ ] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [x] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Feb 28, 2024 · 70eff9c · 70eff9c
1 parent 7f214af
commit 70eff9c
Show file tree

Hide file tree

Showing 23 changed files with 104 additions and 8 deletions.
diff --git a/...mponent-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap b/...mponent-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap
@@ -89,7 +89,8 @@ exports[`CustomSpendCap should match snapshot 1`] = `
       </View>
     </View>
     <Text
-      accessibilityRole="text"
+      accessibilityRole="link"
+      accessible={true}
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
@@ -220,7 +221,8 @@ exports[`CustomSpendCap should match snapshot 1`] = `
       This allows the third party to spend all your token balance until it reaches the cap or you revoke the spending cap. If this is not intended, consider setting a lower spending cap.
        
       <Text
-        accessibilityRole="text"
+        accessibilityRole="link"
+        accessible={true}
         onPress={[Function]}
         onPressIn={[Function]}
         onPressOut={[Function]}

diff --git a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap
@@ -151,6 +151,8 @@ exports[`Banner should render correctly with a close button 1`] = `
       Sample Banner Description
     </Text>
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPress={[Function]}
       onPressIn={[Function]}
@@ -385,6 +387,8 @@ exports[`Banner should render correctly with an action button 1`] = `
       Sample Banner Description
     </Text>
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPress={[Function]}
       onPressIn={[Function]}

diff --git a/...ry/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap b/...ry/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap
@@ -73,7 +73,8 @@ exports[`BannerAlert should render BannerAlert 1`] = `
       Sample Banner Alert Description
     </Text>
     <Text
-      accessibilityRole="text"
+      accessibilityRole="link"
+      accessible={true}
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}

diff --git a/...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap b/...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap
@@ -83,7 +83,8 @@ exports[`BannerTip should render default settings correctly 1`] = `
       Sample Banner Tip Description
     </Text>
     <Text
-      accessibilityRole="text"
+      accessibilityRole="link"
+      accessible={true}
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}

diff --git a/...y/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap b/...y/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap
@@ -13,6 +13,8 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = `
   testID="bottomsheetfooter"
 >
   <TouchableOpacity
+    accessibilityRole="button"
+    accessible={true}
     activeOpacity={1}
     onPress={[Function]}
     onPressIn={[Function]}
@@ -52,6 +54,8 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = `
     </Text>
   </TouchableOpacity>
   <TouchableOpacity
+    accessibilityRole="button"
+    accessible={true}
     activeOpacity={1}
     onPress={[Function]}
     onPressIn={[Function]}

diff --git a/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.tsx b/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.tsx
@@ -45,6 +45,8 @@ const ButtonBase = ({
       activeOpacity={1}
       onPress={onPress}
       style={styles.base}
+      accessibilityRole="button"
+      accessible
       {...props}
     >
       {startIconName && (
@@ -59,6 +61,7 @@ const ButtonBase = ({
         <Text
           variant={DEFAULT_BUTTONBASE_LABEL_TEXTVARIANT}
           style={styles.label}
+          accessibilityRole="none"
         >
           {label}
         </Text>

diff --git a/...ry/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap b/...ry/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap
@@ -2,6 +2,8 @@
 
 exports[`ButtonBase should render correctly 1`] = `
 <TouchableOpacity
+  accessibilityRole="button"
+  accessible={true}
   activeOpacity={1}
   onPress={[Function]}
   style={
@@ -28,6 +30,7 @@ exports[`ButtonBase should render correctly 1`] = `
     }
   />
   <Text
+    accessibilityRole="none"
     style={
       Object {
         "color": "#24272A",
@@ -42,6 +45,8 @@ exports[`ButtonBase should render correctly 1`] = `
 
 exports[`ButtonBase should render correctly when disabled 1`] = `
 <TouchableOpacity
+  accessibilityRole="button"
+  accessible={true}
   activeOpacity={1}
   disabled={true}
   onPress={[Function]}
@@ -70,6 +75,7 @@ exports[`ButtonBase should render correctly when disabled 1`] = `
     }
   />
   <Text
+    accessibilityRole="none"
     style={
       Object {
         "color": "#24272A",

diff --git a/app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.tsx b/app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.tsx
@@ -80,6 +80,7 @@ const ButtonLink: React.FC<ButtonLinkProps> = ({
           onPressIn={triggerOnPressedIn}
           onPressOut={triggerOnPressedOut}
           accessibilityRole="link"
+          accessible
           {...props}
         >
           {renderLabel()}

diff --git a/...rary/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap b/...rary/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Link should render correctly 1`] = `
 <Fragment>
   <Text
     accessibilityRole="link"
+    accessible={true}
     onPress={[Function]}
     onPressIn={[Function]}
     onPressOut={[Function]}

diff --git a/app/component-library/components/Texts/Text/Text.tsx b/app/component-library/components/Texts/Text/Text.tsx
@@ -21,7 +21,7 @@ const Text: React.FC<TextProps> = ({
 }) => {
   const { styles } = useStyles(styleSheet, { variant, style, color });
   return (
-    <RNText {...props} style={styles.base} accessibilityRole="text">
+    <RNText accessibilityRole="text" {...props} style={styles.base}>
       {children}
     </RNText>
   );

diff --git a/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap b/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap
@@ -192,6 +192,8 @@ exports[`CollectibleModal should render correctly 1`] = `
             }
           >
             <TouchableOpacity
+              accessibilityRole="button"
+              accessible={true}
               activeOpacity={1}
               onPress={[Function]}
               onPressIn={[Function]}

diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
@@ -504,6 +504,8 @@ exports[`NetworkDetails renders correctly 1`] = `
               testID="bottomsheetfooter"
             >
               <TouchableOpacity
+                accessibilityRole="button"
+                accessible={true}
                 activeOpacity={1}
                 onPress={[Function]}
                 onPressIn={[Function]}
@@ -543,6 +545,8 @@ exports[`NetworkDetails renders correctly 1`] = `
                 </Text>
               </TouchableOpacity>
               <TouchableOpacity
+                accessibilityRole="button"
+                accessible={true}
                 activeOpacity={1}
                 onPress={[Function]}
                 onPressIn={[Function]}

diff --git a/...components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap b/...components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
@@ -463,6 +463,8 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
     testID="bottomsheetfooter"
   >
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPressIn={[Function]}
       onPressOut={[Function]}
@@ -501,6 +503,8 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
       </Text>
     </TouchableOpacity>
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPressIn={[Function]}
       onPressOut={[Function]}

diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
@@ -1332,6 +1332,8 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing
                                               testID="bottomsheetfooter"
                                             >
                                               <TouchableOpacity
+                                                accessibilityRole="button"
+                                                accessible={true}
                                                 activeOpacity={1}
                                                 onPress={[Function]}
                                                 onPressIn={[Function]}
@@ -1371,6 +1373,8 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing
                                                 </Text>
                                               </TouchableOpacity>
                                               <TouchableOpacity
+                                                accessibilityRole="button"
+                                                accessible={true}
                                                 activeOpacity={1}
                                                 onPress={[Function]}
                                                 onPressIn={[Function]}

diff --git a/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap b/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
@@ -438,6 +438,8 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                                 0 USD
                               </Text>
                               <TouchableOpacity
+                                accessibilityRole="button"
+                                accessible={true}
                                 activeOpacity={1}
                                 onPress={[Function]}
                                 onPressIn={[Function]}
@@ -1433,6 +1435,8 @@ exports[`Tokens should render correctly 1`] = `
                                 0 USD
                               </Text>
                               <TouchableOpacity
+                                accessibilityRole="button"
+                                accessible={true}
                                 activeOpacity={1}
                                 onPress={[Function]}
                                 onPressIn={[Function]}
@@ -2436,6 +2440,8 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                 0 USD
                               </Text>
                               <TouchableOpacity
+                                accessibilityRole="button"
+                                accessible={true}
                                 activeOpacity={1}
                                 onPress={[Function]}
                                 onPressIn={[Function]}

diff --git a/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap b/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap
@@ -179,6 +179,8 @@ exports[`EditAccountName should render correctly 1`] = `
     }
   >
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPress={[MockFunction]}
       onPressIn={[Function]}
@@ -218,6 +220,8 @@ exports[`EditAccountName should render correctly 1`] = `
       </Text>
     </TouchableOpacity>
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       disabled={false}
       onPress={[Function]}

diff --git a/app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap b/app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap
@@ -1118,6 +1118,8 @@ exports[`Network Selector renders correctly 1`] = `
                             </View>
                           </RCTScrollView>
                           <TouchableOpacity
+                            accessibilityRole="button"
+                            accessible={true}
                             activeOpacity={1}
                             onPress={[Function]}
                             onPressIn={[Function]}

diff --git a/app/components/Views/Settings/ExperimentalSettings/__snapshots__/index.test.tsx.snap b/app/components/Views/Settings/ExperimentalSettings/__snapshots__/index.test.tsx.snap
@@ -45,6 +45,8 @@ Array [
         View the list of active WalletConnect sessions
       </Text>
       <TouchableOpacity
+        accessibilityRole="button"
+        accessible={true}
         activeOpacity={1}
         onPress={[Function]}
         onPressIn={[Function]}
@@ -174,7 +176,8 @@ Array [
           This is a test feature that blocks any changes to the app's JavaScript code without permission.
            
           <Text
-            accessibilityRole="text"
+            accessibilityRole="link"
+            accessible={true}
             onPress={[Function]}
             onPressIn={[Function]}
             onPressOut={[Function]}

diff --git a/...Settings/SecuritySettings/BlockaidIndicator/__snapshots__/BlockaidIndicator.test.tsx.snap b/...Settings/SecuritySettings/BlockaidIndicator/__snapshots__/BlockaidIndicator.test.tsx.snap
@@ -116,6 +116,8 @@ Array [
         }
       >
         <TouchableOpacity
+          accessibilityRole="button"
+          accessible={true}
           activeOpacity={1}
           onPress={[Function]}
           onPressIn={[Function]}
@@ -154,6 +156,8 @@ Array [
           </Text>
         </TouchableOpacity>
         <TouchableOpacity
+          accessibilityRole="button"
+          accessible={true}
           activeOpacity={1}
           onPress={[Function]}
           onPressIn={[Function]}
@@ -312,6 +316,8 @@ Array [
         }
       >
         <TouchableOpacity
+          accessibilityRole="button"
+          accessible={true}
           activeOpacity={1}
           onPress={[Function]}
           onPressIn={[Function]}
@@ -350,6 +356,8 @@ Array [
           </Text>
         </TouchableOpacity>
         <TouchableOpacity
+          accessibilityRole="button"
+          accessible={true}
           activeOpacity={1}
           onPress={[Function]}
           onPressIn={[Function]}
@@ -496,6 +504,8 @@ Array [
         }
       >
         <TouchableOpacity
+          accessibilityRole="button"
+          accessible={true}
           activeOpacity={1}
           onPress={[Function]}
           onPressIn={[Function]}
@@ -534,6 +544,8 @@ Array [
           </Text>
         </TouchableOpacity>
         <TouchableOpacity
+          accessibilityRole="button"
+          accessible={true}
           activeOpacity={1}
           onPress={[Function]}
           onPressIn={[Function]}