From c4da5cb72a4025cd2a060bbb6e6d6a311b03e637 Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Tue, 27 Aug 2024 18:02:39 +0200
Subject: [PATCH] small a11y improvement

---
 .changeset/yellow-crabs-do.md                            | 5 +++++
 .../PaymentMethodItem/PaymentMethodItem.tsx              | 2 +-
 packages/lib/src/components/internal/Button/Button.tsx   | 9 +++++++--
 3 files changed, 13 insertions(+), 3 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/PaymentMethodItem.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx
index fd96ec8fc7..0651fbfd37 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx
@@ -124,7 +124,7 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
                 </div>
 
                 <div className="adyen-checkout-pm-details-wrapper" aria-hidden={!isSelected}>
-                    <div className="adyen-checkout__payment-method__details" id={containerId} role="region">
+                    <div className="adyen-checkout__payment-method__details" id={containerId}>
                         {showRemovePaymentMethodButton && (
                             <DisableOneClickConfirmation
                                 id={disableConfirmationId}
diff --git a/packages/lib/src/components/internal/Button/Button.tsx b/packages/lib/src/components/internal/Button/Button.tsx
index 7fed024565..3ba138f567 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 />
+                    {i18n.get('loading')}
+                </span>
+            ),
             redirect: (
                 <span className="adyen-checkout__button__content">
                     <Spinner size="medium" inline />
@@ -73,7 +78,7 @@ class Button extends Component<ButtonProps, ButtonState> {
         }
 
         return (
-            <button className={buttonClasses} type="button" disabled={disabled} onClick={this.onClick}>
+            <button className={buttonClasses} type="button" aria-disabled={disabled} onClick={this.onClick}>
                 {buttonText}
                 {status !== 'loading' && status !== 'redirect' && this.props.children}
             </button>