small a11y improvement

Adyen · Aug 27, 2024 · c4da5cb · c4da5cb
1 parent 41f8a3b
commit c4da5cb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 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/...ib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx b/...ib/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
@@ -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>