[A11y] Screen reader does not work properly for the VPN tips and tricks functionalities

[data-sync-user]

Affected versions:

• Mozilla VPN 2.9.0 (2.202206280748);

Tested Platforms:

• MacOS 11.6;

Prerequisites:

• Have the Voice Over enabled (MacOS: Apple menu > System Preferences > Accessibility > VoiceOver > Check "Enable VoiceOver") or the Screen reader opened;

• Have Mozilla VPN app installed and opened;

• Have a FXA account with an active subscription for Mozilla VPN;

• Be signed in;

• Be in "VPN tips and tricks" screen;

Steps to reproduce:

1. Press the “Tab” key until the first tutorial is in focus and then start the tutorial;
2. Observe the behavior while the tutorial is running;
3. Finish the tutorial;
4. Navigate to the “VPN tips and tricks” screen and access any of the Guide screens from the “Quick tips”;
5. Navigate through the Guide screen with the “Tab” key and observe the behavior;

Expected result:

• For step 2: The screen reader works properly while the tutorial is running and narrates the content of the tutorial banners and the rest of the elements;

• For step 5:  The screen reader works properly and narrates the whole content of the screen;

Actual result:

• For step 2: The screen reader does not narrate the content of the tutorial banners and the rest of the elements;

• For step 5: The screen reader does not work properly and narrates only the back button;

Notes:

• Same happens for the Tutorial modals, Feature tour modals, “Connect VPN on startup” tutorial;

• The Screen Reader works properly inside the VPN tips and tricks screen;

• The Tutorial modals and the Guide screens are not narrated by the Screen Reader on Windows platform as well;

• This is a qa-major issue as this feature is unusable for users with disabilities using assistive technology;

• See the attached video;

┆Issue is synchronized with this Jira Bug ┆Reporter: Bianca Hidecuti

[data-sync-user]

➤ Lesley Norton commented:

Bianca Hidecuti It turns out that a feature called “Quick Nav” needs to be enabled (thank you Matt Lichtenstein for unearthing this tid bit).

To enable quick nav:

• turn on Voice Over
• navigate to a Guide
• Press the Left Arrow and Right Arrow keys simultaneously
• Use arrow keys to navigate through Guide content !Screen Recording 2022-09-06 at 4.48.52 PM.mov|width=366,height=660!

[data-sync-user]

➤ Bianca Hidecuti commented:

Lesley Norton / Matt Lichtenstein thank you for the information, it is very helpful.

If enabling the “Quick Nav” on MacOS, and using the arrows keys to navigate through Guide content / Tutorial content, the Screen reader works as expected.

On Windows, the Narrator works as expected as well, while using the “Caps lock” + “O” and “Caps lock” + “U” keys to navigate through the Guide screens / tutorials.

Attaching a video as well.

Closing this as works as intended.

!Untitled.mov|width=716,height=1306!

[data-sync-user]

➤ Bianca Hidecuti commented:

Works as intended.