feat: accessibility, translations and other improvements

[jakubjasinsky]

Summary

Dynamic Checkout improvements including WCAG 2.1 AA accessibility enhancements, 4 new locale translations (DE, IT, JA, KO), visible card form labels, custom pay button text support, US billing address fix, single payment method auto-expand behavior, and several bug fixes.

Changes

Accessibility (WCAG 2.1 AA)

• Add role="alert" on card form validation errors and payment error/cancelled views for screen reader announcements
• Add role="status" on payment success/info/loading views
• Add role="radiogroup" with aria-label on payment method lists
• Add aria-label on icon-only buttons (delete payment method, settings/manage)
• Add aria-hidden="true" on decorative spinners, alt="" on decorative images
• Add id/for/value attributes on radio inputs and label wrappers for proper association
• Add autocomplete="cc-name" on cardholder name input
• Add aria-label on billing address inputs and country select
• Add aria-label="Processing payment" (localized) on pay buttons during loading state
• Add :focus-visible outlines on all interactive elements (radio buttons, pay buttons, delete/settings buttons, form inputs, checkboxes, modal close)
• Add @media (prefers-reduced-motion: reduce) to disable spinner animations
• Increase delete and settings button touch targets from 32px to 44px (WCAG 2.5.8)
• Add focus return to settings button on modal close
• Add focus recovery to next element after payment method deletion

New Locales

• Add German (de), Italian (it), Japanese (ja), Korean (ko) translations
• Add 5 new accessibility-specific keys to all 9 locales: delete-payment-method-label, settings-button-label, loading-label, processing-payment-label, card-form-label

Card Form Labels

• Add visible <label> elements above card number, expiry date, CVC, and cardholder name inputs
• Add card-number-label, expiry-date-label, cvc-label locale keys to all 9 locales
• New .dco-input-label CSS class for label styling

Custom Pay Button Text

• Add payButtonText option to DynamicCheckoutPublicConfigType
• When set, overrides default "Pay {amount} {currency}" text on card, saved card, and saved APM pay buttons

US Billing Address Fix

• Change US billing address units from ["state"] to ["street1", "street2", "city", "state", "postcode"] to collect full address

Single Payment Method Auto-Expand

• When only one regular payment method exists, auto-expand it and hide radio button regardless of express checkout methods
• Section header ("Other payment methods") remains visible when express methods are present

Bug Fixes

• Fix Apple Pay container id from "google-pay-button-container" to "apple-pay-button-container" (copy-paste bug)
• Fix APM save-for-future label for attribute to use gateway_name instead of display.name (matching checkbox id)
• Remove stray console.log(this.paymentMethod) from saved card payment method

Impact

• Breaking: None — all changes are additive or fix existing bugs
• US merchants: Billing address form now collects full address instead of state only
• Bundle size: Slightly larger due to 4 new locale files and additional CSS rules
• Browser support: New CSS features (:focus-visible, prefers-reduced-motion) degrade gracefully in older browsers — no focus indicators shown (same as before), animations continue playing

Testing Plan

• Verify card form displays visible labels above all 4 fields (card number, expiry, CVC, cardholder name)
• Set payButtonText: "Subscribe" in config and verify all pay buttons show custom text
• Remove payButtonText and verify default "Pay {amount} {currency}" behavior
• Select US as billing country and verify full address form (street, city, state, zip)
• Set locale to de, it, ja, ko and verify all UI strings are translated
• Configure one regular payment method + express methods — verify regular method is auto-expanded with no radio button, "Other payment methods" header still visible
• Configure one regular method with no express methods — verify expanded, no radio, no header
• Tab through all interactive elements — verify visible focus outlines on each
• Test with VoiceOver/screen reader: verify payment errors are announced, loading states are announced, buttons have accessible names
• Enable "Reduce motion" in OS accessibility settings — verify spinners don't animate
• Tap delete/settings buttons on mobile — verify 44px touch targets
• Run yarn build and verify clean compilation

Additional Context

• Card input fields (cc-number, cc-exp, cc-cvc) are ProcessOut-hosted iframes — <label for> cannot associate across iframe boundaries. Visible labels above the iframes are the best available solution.
• Widget avoids heading elements (<h1>-<h6>) since it's embedded in host pages with unknown heading hierarchy. Uses aria-label on role="radiogroup" instead.
• Focus return on modal close depends on Tingle modal library's onClose callback.