Accessibility testing: Receive via invoice

[mouxdesign]

Had completed some accessibility testing on Breez today.

Summary:  Breez was impressive in the sense that the QR code was acknowledged by the voice over. This is very good because it indicates to the user that there is a qr code on the screen. 

• Pop up modal on button of  send/receive screen, the text read out for receive via invoice could be improved.

•  Voice over reads out “heading” on Receive via invoice screen

• Numbers are read out as numbers, this could be improved by having the voice over acknowledge that they are amounts

• Invoice screen pop-u modal; add voice over confirmation when invoice data has been copied to clipboard

Link to google doc with a video of the test as well as all the interactions carried out to perform the test.

[kingonly]

This is very impressive 👏👏👏 Thank you so much for running tests, we'll take a look at it as soon as we can.

[mouxdesign]

Happy that it's useful.

[kingonly]

@ademar111190 please take a look

[ademar111190]

Hi @mouxdesign thank you for the excellent report!

Let me share what I did discover so far regarding the issues and I believe @kingonly can help us to decide how to approach each issue.

The first thing, Android and iOS have different behaviors regarding the issues, which means it is necessary to code for each platform and makes platform-specific tests. The code itself can be done through the Dart, i.e. not necessary kotlin/swift code, but at least an if/else statement on the platform is required.

Semantics is the name of the component that flutter offers to customize the screen reader (TalkBack and VoiceOver) interactions, so when I say "Semantics" I'm talking about this component.

So let me explore each issue:

Issue A: Pop up modal on the button of send/receive screen

Different from iOS, Android behaves as expected, so I can think of two approaches:

• Add iOS-specific Semantics.
• Wait for flutter 3 migration and check if the issue was solved for iOS

Issue B: Voice over reads out “heading” on Receive via invoice screen

It happens on Android too, and it happens on all flutters apps I had tried, so I can think of two approaches:

• Keep it as it is because that is the way flutter does that, I guess the heading is a reference to that component in the same way as it reads "Button" or "Text field" when the screen reader is over these components.
• Add a custom Semantics to remove the heading word from the phrase spoken.

Issue C: Numbers are read out as numbers, this could be improved by having the voice-over acknowledge that they are amounts

Another behavior that is correct on Android, so I can think of two approaches

• Add iOS-specific Semantics.
• Wait for flutter 3 migration and check if the issue was solved for iOS

Issue D: Add voice-over confirmation when invoice data has been copied to clipboard

It is a bug with our flush bar component, any time a flush bar appears it's not detected by the screen reader, that component is deprecated so no fix coming in the future. Flutter has its version of that component called SnackBar, but it does not get the screen reader focus either… So my suggestions are:

• Migrate to Flutter's SnackBar and open a bug ticket to Flutter and then wait for their fix.
• Fork our deprecated library and add support through Semantics to the Screen Reader

Issue E: Number edition on Android that repeats the number typed several times.

I did find an issue on my tests here on Android and the options I see are:

• Add an Android-specific Semantics.
• Wait for flutter 3 migration and check if the issue was solved for Android

P.S. @kingonly Maybe we should break the issue into five issues and create a label "Accessibility" for them. P.S. @mouxdesign let me know if I'm missing some issue.

[kingonly]

Let's keep is as one issue for now. From what I understand most issues are Flutter related (except the snackbar), so I think next step would be to test on Flutter 3. If the problems happen there, we need to open/link to Flutter issues. It doesn't makes sense to override the voice over behavior because of issues in the underlying implementation. The differences between Android and iOS suggest these issues are mostly flutter related.

[mouxdesign]

Well done team on approaching the feedback so positively and for you indepth replies. Feel free to let me know once the flutter 3 migration has been done, happy to test once that has been done as well.

[Yash-Agarwal1708]

I have been doing accessibility tests on Breez Wallet on an Android device. I am compiling a thorough accessibility test of the Breez Wallet on Figma. The Figma file will be updated as I review the screens and find new issues.

Link to Figma file.