[BUG]: input.__PrivateStripeElement-input ARIA hidden element must not be focusable or contain focusable elements
Closed this issue · 1 comments
What happened?
When running an accessibility scan on a page that uses the following @stripe/react-stripe-js components <CardNumberElement>, <CardExpiryElement> and ` 3 Serious accessibility violations flag up - "ARIA hidden element must not be focusable or contain focusable elements".
The element this pertains to is <input.__PrivateStripeElement-input/>
The fields are hidden to screen readers however the input field is tab-able when navigating with a keyboard.
Screenshot taken from the accessibility scan
As the element is Private i'm unable to customise.
Environment
No response
Reproduction
No response
Hey @edfenergy-kateb - thanks for reporting. This class of reported issues is a known false positive due to the way Stripe.js & Elements work. Those hidden inputs are necessary to manage focus within the secure iframe(s), and accessible functionality is managed via related dom elements.