#leokcw_code
1 messages Β· Page 1 of 1 (latest)
π Welcome to your new thread!
β²οΈ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
β±οΈ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
π This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1360072692451246080
π Have more to share? Add more details, code, screenshots, videos, etc. below.
the iframe container is getting read before the inputs
Could you elaborate a bit more here?
Sure thing! I have a sample codesandbox here - https://codesandbox.io/p/devbox/stripe-elements-forked-7m4xjl?workspaceId=ws_Hdqv5A7sUCJCLCYfSdf8LM
As an example, I tried the following:
- Open up the sample app above (https://7m4xjl.csb.app/) on either a Macbook (Chrome browser) or an iOS device / Android device, with a screen reader turned on (For example, VoiceOver on a Macbook, or Talkback on Android)
- Focus on one of the input fields - screen reader will read out whatever is being focused
- Attempt to navigate to the 'Next' element. This can be done on Macbook by pressing "Control + Option + Right arrow", or on a mobile device by swiping right on your screen
Expected Results:
3. Focus would go to the next element and read out whatever text is there
Actual Results:
3. Focus would go to the next element, but would read out what appears to be the title of the <iframe>, depending on the device.
For example, on Macbook, with the starting focus on the CVC input field, after pressing "Control + Option + Right", it'll read out "End of Secure CVC Input Frame. Group". Pressing again would read out "Secure Expiration Date Input Frame. Group". Pressing it a 3rd time would then read out "Credit or Debit Card Expiration Date MM/YY, required"
On Android, it'll be a similar issue, but it'll read out "Page Page" instead of the "Secure X Input Frame".
Playing around with it, it seems like to me that the voiceover might be focusing on the <iframe> element or some other container before eventually focusing on the <input> field within the iframe
Sorry, I hope it's not too confusing, let me know if there's anything I can try to clarify
I wasn't able to find too many docs or discussions about accessibility, the only one I was able to really find was https://github.com/stripe/react-stripe-js/issues/119, but this was also on react-stripe-js so it might not apply haha..
React components for Stripe.js and Stripe Elements - Issues Β· stripe/react-stripe-js
Thank you for such a detailed report. Let me see if we have similar ask
Thank you!
Hi, I just found 1 ask from 2017 π . It looks like we haven't improved this since then unfortunately. Let me record your feedback
π
Does this mean there's currently no support for this?
Is there any plans on support this? Accessibility is very important to us and we're looking for a potential, alternative solution
Could you write to support and mention this Discord thread? We can follow up from there
I filed internally we may revisit π
Sure, which channel should I write to on discord?
From support.stripe.com
Hi @ripe forum I'm taking over this thread.
Hello @ripe forum, we have sent you a direct message, please check it at https://discord.com/channels/@me/1360102840739041403
- πThe message has instructions on how to open a direct support case with our Developer Support team, in order to help you more effectively.
@ripe forum I just send you a link through DM, you can use that link to create a ticket.
Sounds good!