From 80ca254c8fe1b5f9120e8b0688630578cb1f7840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Ferreira?= <m1aw@users.noreply.github.com>
Date: Mon, 2 Sep 2024 15:36:08 +0200
Subject: [PATCH] Improves accessibility by removing region on payment method
 item and button loading state (#2816)

* small a11y improvement

* go back to disabled

* make it visually hidden

* fix mixin import

(cherry picked from commit 18172bb9d169245d9a179bb7838cc8753522c6e0)
---
 .changeset/yellow-crabs-do.md                              | 5 +++++
 .../Dropin/components/PaymentMethod/PaymentMethodItem.tsx  | 6 +-----
 packages/lib/src/components/internal/Button/Button.scss    | 4 ++++
 packages/lib/src/components/internal/Button/Button.tsx     | 7 ++++++-
 4 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/yellow-crabs-do.md

diff --git a/.changeset/yellow-crabs-do.md b/.changeset/yellow-crabs-do.md
new file mode 100644
index 0000000000..2b406aba26
--- /dev/null
+++ b/.changeset/yellow-crabs-do.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Improves acessibility removing region on payment method item and button loading state
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
index 82ac7b30bd..1b183876c9 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
@@ -151,11 +151,7 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
                     )}
                 </div>
 
-                <div
-                    className={`adyen-checkout__payment-method__details ${styles['adyen-checkout__payment-method__details']}`}
-                    id={containerId}
-                    role="region"
-                >
+                <div className={`adyen-checkout__payment-method__details ${styles['adyen-checkout__payment-method__details']}`} id={containerId}>
                     {showRemovePaymentMethodButton && (
                         <DisableOneClickConfirmation
                             id={disableConfirmationId}
diff --git a/packages/lib/src/components/internal/Button/Button.scss b/packages/lib/src/components/internal/Button/Button.scss
index ab07e00beb..e347e13a7e 100644
--- a/packages/lib/src/components/internal/Button/Button.scss
+++ b/packages/lib/src/components/internal/Button/Button.scss
@@ -193,6 +193,10 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+
+        &--sr-only {
+            @include index.a11y-visually-hidden;
+        }
     }
 
     .adyen-checkout__spinner {
diff --git a/packages/lib/src/components/internal/Button/Button.tsx b/packages/lib/src/components/internal/Button/Button.tsx
index fdd7553b80..99fa8815fc 100644
--- a/packages/lib/src/components/internal/Button/Button.tsx
+++ b/packages/lib/src/components/internal/Button/Button.tsx
@@ -47,7 +47,12 @@ class Button extends Component<ButtonProps, ButtonState> {
         const buttonClasses = classNames(['adyen-checkout__button', ...modifiers.map(m => `adyen-checkout__button--${m}`)]);
 
         const buttonStates = {
-            loading: <Spinner size="medium" />,
+            loading: (
+                <span className="adyen-checkout__button__content">
+                    <Spinner size="medium" inline />
+                    <span className={'adyen-checkout__button__text--sr-only'}>{i18n.get('loading')}</span>
+                </span>
+            ),
             redirect: (
                 <span className="adyen-checkout__button__content">
                     <Spinner size="medium" inline />