flutter_stripe

flutter_stripe copied to clipboard

Describe the bug

You cannot populate form fields using VoiceOver.

• The language of the field is in English, but my application is in Brazilian Portuguese (pt-BR), making the fields incomprehensible for people who use screen readers (blind people, people with low vision and people with dyslexia)
• When you double click the field (reader gesture which is equivalent to 1 click gesture) the keyboard does not open. When moving to the right side (going to the next field gesture) the reader's focus remains on the Card Number field.

To Reproduce

Steps to reproduce the behavior:

1. Open device settings
2. Enter Accessibility
3. Enter VoiceOver
4. Turn on VoiceOver
5. Try filling in the form fields to add a new card

Expected behavior

• I hope it's possible to pass a semanticLabel for each field in the form.
• I hope you can open the device keyboard when VoiceOver or TalkBack is turned on.
• I hope it's possible to navigate between fields using VoiceOver or TalkBack.
• I hope it will be possible to set a semanticHint when there is an error in the field, and it is announced in VoiceOver or TalkBack.

Smartphone / tablet

• Device: iPhone Xr
• OS: iOS 14.7.1
• Package version: 1.2.0
• Flutter version 2.2.3

Additional context

Various WCAG levels A and AA compliance issues.

Check: https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions https://www.w3.org/WAI/WCAG21/Understanding/name-role-value https://www.w3.org/WAI/WCAG21/Understanding/error-identification https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion https://www.w3.org/WAI/WCAG21/Understanding/language-of-page https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

Video recording

https://youtu.be/bx1ZRtobNWw

Thank you @GabrieleSuzart for the detailed research. I will look into how we can improve this from our side.

Notice that to remain PCI compliant we are using native components that can not be easily fully integrated with the Flutter framework features. Either way native Stripe components should still comply with those regulations

@GabrieleSuzart (and others) I did some testing and noticed things improved a bit for the card field:

• I noticed the fields itself are named in the respective language of the phone.
• Error input is not handled I did ask Stripe about this.

I also tested the paymentsheet and there I was impressed by how acceptable the accessibility options are . I would recommend to use this functionality as the best and user friendly option regarding accessibility. To be continued

Will close it for now since there are many improvements on the payment sheet and configuration options. If still something is missing let us know