#kev12kev
final skiff
worthy talon
I don't believe it is possible to customize it like that but can look in to how to achieve this. Have you tried adding a tab index to the DOM element that your card element is being mounted to? I think Stripe.js has logic to manage focus once focus is brought to that DOM element
echo estuary
Yea I have, not getting any progress, has to be applied specifically to that class
That's the only solution I've found so far unless you have any better ideas!
worthy talon
I think that should work. Did you already try it and run in to issues?
echo estuary
Yea
worthy talon
What were the issues?
echo estuary
I'm using a service called Accessibe, I am unable to tab navigate through a payment 'checkout' and I am trying to resolve this
And the only fix I have found is when using the inspector, adding a tabindex attribute to that specific private class
When applying to it's parent div it still does not work
worthy talon
Interesting. So you can tab in to the card element but not out? That should definitely be possible to do by default, but I will look in to what is happening here.
echo estuary
It just doesn't let me carry out a purchase without that class/iframe having a tabindex
Carry out a purchase using tab navigation that is
worthy talon
Can you show me in code how to set this up so that a purchase isn't possible? I am testing some stuff with tab index and elements now and want to make sure I am seeing what you are seeing
echo estuary
Want to private message and I can send a loom?
worthy talon
For example in this jsfiddle I can tab through the card element without adding any tab index to it. I am having trouble getting positive tab indexes to work so still figuring that one out https://jsfiddle.net/6xbkc34g/14/
Yep yep, feel free to DM me with that loom
Will keep technical discussion here as much as possible in case my colleagues need to join
echo estuary
ok
worthy talon
@echo estuary I am unable to reproduce this behavior on your test site at least on Chrome 108.0.5359.124 (the page as sent lets me tab through the entire page). Can you send me your browser version? I might need to try something closer to what you are using
echo estuary
Are you using the service accessibe?
I think it works normally but it’s when it’s using that specific software is when I get problems
worthy talon
Also I'm not sure if this affects things, but in the video is it you that is tabbing through the page or is it the accessibility tool? I am wondering if it is noticing that we have a aria-hidden element + an attribute that shouldn't typically be used with hidden
I was tabbing through it myself
Gotcha
Looking in to this. I know Stripe.js typically trips up accessibility checkers. Basically we need to use iFrames to lessen your PCI compliance burden, that would normally throw a wrench in the tab index flow of the page, so we wrote logic that manages the tab index once the element is focused on and allows it to flow through
But the way we had to implement that, ironically, includes a combination of attributes that are typically problematic for accessability. So a lot of automated tools flag it despite it actually enabling the page to be accessible
So this may be related to that
Here we go, found a GitHub issue where this was discussed. So yeah, basically we had to add hidden to a focusable element to enhance accessibility, so we consider it to be a false positive when automated checkers flag it (as long as you actually get through the page when tabbing through yourself). https://github.com/stripe/react-stripe-js/issues/236#issuecomment-958068046