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 18172bb)
Adyen · Sep 2, 2024 · 80ca254 · 80ca254
1 parent d9ae8bc
commit 80ca254
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/.changeset/yellow-crabs-do.md 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
@@ -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
@@ -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
@@ -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 />