From a59515aceb8fd75a877cd21afcfefce563ef0aa2 Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Fri, 2 Jun 2023 10:18:43 +0200
Subject: [PATCH] Prevent double readout of PM names, by a screenreader, in
 Dropin

---
 .changeset/honest-cherries-wash.md                         | 5 +++++
 .../Dropin/components/PaymentMethod/PaymentMethodItem.tsx  | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/honest-cherries-wash.md

diff --git a/.changeset/honest-cherries-wash.md b/.changeset/honest-cherries-wash.md
new file mode 100644
index 00000000..61a0f5f4
--- /dev/null
+++ b/.changeset/honest-cherries-wash.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Prevent double readout of PM names, by a screenreader, in Dropin.
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
index 64d8a767..b01aa052 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
@@ -112,7 +112,12 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
                             aria-hidden="true"
                         />
 
-                        <PaymentMethodIcon altDescription={paymentMethod.props.name} type={paymentMethod.type} src={paymentMethod.icon} />
+                        <PaymentMethodIcon
+                            // Only add alt attribute to storedPaymentMethods (to avoid SR reading the PM name twice)
+                            {...(paymentMethod.props.oneClick && { altDescription: paymentMethod.props.name })}
+                            type={paymentMethod.type}
+                            src={paymentMethod.icon}
+                        />
 
                         <PaymentMethodName
                             displayName={paymentMethod.displayName}