[Accessibility] Apple Pay button receives focus when collapsed via Shift+Tab

[theghostbel]

Describe the bug
When navigating backwards through Drop-in payment options using keyboard (Shift+Tab), the <apple-pay-button> custom element receives focus even when its accordion was collapsed. This causes the Apple Pay button to become partially visible underneath other payment options, breaking the UI.

The root cause is that <apple-pay-button> uses Shadow DOM with its own focusable internals. Unlike standard <button> elements which respect visibility: hidden and skip focus, the Shadow DOM button ignores the host's tabIndex="-1" and container's visibility: hidden.

To Reproduce

1. Load a payment page with Drop-in containing Apple Pay and Google Pay options
2. Using Tab key, navigate to the "Apple Pay" accordion header
3. Press Space or Enter to expand Apple Pay accordion
4. Tab to "Google Pay" accordion header
5. Press Space or Enter to expand Google Pay accordion (Apple Pay collapses)
6. Press Shift+Tab to move focus backwards
7. See bug: Focus lands on hidden Apple Pay button instead of Apple Pay header, and the button becomes partially visible

Expected behavior
Focus should move to the "Apple Pay" accordion header (radio button), skipping the collapsed content. The Apple Pay submit button should remain hidden.

Screenshots

Apple pay expanded	Google pay expanded	Apple pay button is visible underneath

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: 131

Additional context

Technical Analysis

DOM inspection reveals the difference between Apple Pay and other payment methods:

Element	Tag	tabIndex	visibility	Focusable when collapsed?
Bank Link	<button>	0	hidden	No (correct)
Apple Pay	<apple-pay-button>	-1	hidden	Yes (bug)
Google Pay	<button>	0	visible	Yes (correct)

The <apple-pay-button> Shadow DOM contains its own focusable button that:

• Ignores the host element's tabIndex="-1"
• Can receive focus despite visibility: hidden on container
• Causes a visual glitch

Proposed fix

Add inert attribute to .adyen-checkout__payment-method__details when accordion is collapsed. The inert attribute propagates into Shadow DOM and prevents focus.

// Toggle inert on Apple Pay details when accordion expands/collapses
const applePayMethod = Array.from(document.querySelectorAll('.adyen-checkout__payment-method'))
  .find(m => m.querySelector('.adyen-checkout__payment-method__header__title')?.textContent === 'Apple Pay');

const details = applePayMethod?.querySelector('.adyen-checkout__payment-method__details');

const observer = new MutationObserver(() => {
  const isCollapsed = !applePayMethod.classList.contains('adyen-checkout__payment-method--selected');
  details.inert = isCollapsed;
  console.log(`Apple Pay inert: ${isCollapsed}`);
});

observer.observe(applePayMethod, { attributes: true, attributeFilter: ['class'] });

This fix works - tested via console injection:

Apple Pay inert: false // shows when opening Apple Pay
Apple Pay inert: true  // shows when opened some other payment method and Apple Pay was closed

I'll have this workaround fix observe() until the issue is resolved inside Drop-In.

WCAG Impact

• 2.4.3 Focus Order: Focus order doesn't match visual order
• 2.4.7 Focus Visible: Focus lands on visually hidden element