search

ectoflow / vue-stripe-elements

A Vue 2 component collection for Stripe.js
MIT License
530 stars 124 forks source link

[ Accessibility ] Auto Tab to Next Field Confuses Keyboard Users #130

Closed heymynameisdina closed 2 years ago

heymynameisdina commented 2 years ago

Flagging a simple accessibility issue I've come across interacting with this tool. Looks like the inputs automatically send the user to the next input field when filled in. While I do find this to be a nice shortcut for the convenience of most users, automatic tabbing to the next field is confusing and unexpected for keyboard users/users with disabilities. Would suggest removing that if possible

softbeehive commented 2 years ago

Hi @heymynameisdina,

I saw auto-focus in advanced elements like card. It's handled by stripe-js, which is a library provided by stripe, and the dependency of this vue wrapper. I think I understand your concern. So I went and checked Stripe Documentation, but didn't find an option to disable the auto-focus.

I bound stripe-js event listeners and emit component instance events - source code

Did you try?

<StripeElement 
  @focus.prevent="yourFocusHandler"
/>

More on events https://stripe.com/docs/js/element/events/on_focus#element_on_focus-event