From fe5e8d2016c2cc50a4e5e476f8febc216168f11a Mon Sep 17 00:00:00 2001
From: Alessandro Izzo <alessandro.izzo998@gmail.com>
Date: Tue, 4 Mar 2025 10:58:53 +0100
Subject: [PATCH 1/2] chore: a11y improvements on payment method details card
 preview

---
 .../payments/common/components/PaymentCard.tsx     | 14 +++++++-------
 .../PaymentsMethodDetailsBaseScreenComponent.tsx   |  7 ++++++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/ts/features/payments/common/components/PaymentCard.tsx b/ts/features/payments/common/components/PaymentCard.tsx
index ca564480b40..e4c9d8f2134 100644
--- a/ts/features/payments/common/components/PaymentCard.tsx
+++ b/ts/features/payments/common/components/PaymentCard.tsx
@@ -93,13 +93,13 @@ const PaymentCard = (props: PaymentCardComponentProps) => {
   const renderBankLogo = () => {
     if (props.holderEmail) {
       return (
-        <PayPalLogo
-          testID="paymentCardPayPalLogoTestId"
-          accessible={true}
-          accessibilityLabel="PayPal"
-          height={48}
-          width={113}
-        />
+        <View accessibilityLabel="PayPal">
+          <PayPalLogo
+            testID="paymentCardPayPalLogoTestId"
+            height={48}
+            width={113}
+          />
+        </View>
       );
     }
 
diff --git a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx
index 235560b0232..a96296e6822 100644
--- a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx
+++ b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx
@@ -76,6 +76,7 @@ const PaymentsMethodDetailsBaseScreenComponent = ({
       scrollEventThrottle={8}
       snapToOffsets={[0, titleHeight]}
       snapToEnd={false}
+      importantForAccessibility="no"
       contentContainerStyle={{
         flexGrow: 1,
         paddingBottom: 48,
@@ -88,7 +89,11 @@ const PaymentsMethodDetailsBaseScreenComponent = ({
         barStyle="light-content"
       />
       <View style={[styles.blueHeader, { backgroundColor: blueHeaderColor }]}>
-        <View style={styles.cardContainer} onLayout={getTitleHeight}>
+        <View
+          style={styles.cardContainer}
+          onLayout={getTitleHeight}
+          accessibilityRole="summary"
+        >
           <PaymentCard {...card} />
         </View>
       </View>

From 34f46b6f1d840062b3fbfc13d4fa5aba3ac47f39 Mon Sep 17 00:00:00 2001
From: Alessandro Izzo <alessandro.izzo998@gmail.com>
Date: Thu, 6 Mar 2025 11:51:14 +0100
Subject: [PATCH 2/2] fix: Disable heading label to be focusable and add a
 wrapper accessible view

---
 .../PaymentsMethodDetailsBaseScreenComponent.tsx       | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx
index 169e70f29da..679df152d62 100644
--- a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx
+++ b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx
@@ -104,12 +104,10 @@ const PaymentsMethodDetailsBaseScreenComponent = ({
         barStyle="light-content"
       />
       <View style={[styles.blueHeader, { backgroundColor: blueHeaderColor }]}>
-        <View
-          style={styles.cardContainer}
-          onLayout={getTitleHeight}
-          accessibilityRole="summary"
-        >
-          <PaymentCard {...card} />
+        <View style={styles.cardContainer} onLayout={getTitleHeight}>
+          <View accessible accessibilityRole="summary">
+            <PaymentCard {...card} />
+          </View>
         </View>
       </View>
       <VSpacer size={24} />