1653322 - Improve accessibility of the "importable sites" images on about:welcome

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Emily McMinn :emcminn]

As per @marcoz's accessiblity review, the suggested importable sites images on the import screen of about:welcome are not properly accessible.

• At minimum, an aria-role of region should be added to the surrounding div, to allow screen readers to pick up the text in the aria-label.

However, this approach won't be fully accessible to lots of users (those using touch screens, and those using keyboards/switches/other non-mouse input devices, for example - anyone not able to hover over the div will not see the tooltip). If the info in the tooltip is important, we should consider having it in a paragraph on screen, which is the simplest (and most accessible) solution.

Comment 1

[Aaron Benson]

Here's a link to the updated spec with the text positioned at the bottom of the page. Please see Meridel's copy deck, linked below, for final copy once approved by legal.

Note that the steps indicators move up 10px to accommodate the text and should be changed on all screens so they appear in the same position throughout the flow.

Figma Spec:
https://www.figma.com/file/KqQZwwLhft9cUIcBtMVmbz/Desktop-First-Run?node-id=1750%3A449

Copy:
https://docs.google.com/presentation/d/1cnhgebW-8VKsDAHp71GRLZYsXaWKJD7_mgJzhLTP2Vk/edit?ts=5f10a048#slide=id.g8d9263287a_0_0

Comment 2

[Emily McMinn :emcminn]

Attachment: Bug 1653322 - Converted import topsites "disclaimer" tooltip to a footer

Comment 3

[Punam Dahiya [:pdahiya]]

Attachment: Get Started Screenshot.png

Comment 4

[Punam Dahiya [:pdahiya]]

Attachment: Import with disclaimer.png

NI Aaron for UI review, thanks

Comment 5

[Aaron Benson]

Looks good!

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/71bb0ab476bb
Converted import topsites "disclaimer" tooltip to a footer r=pdahiya,fluent-reviewers,MarcoZ,flod

Comment 7

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/71bb0ab476bb

Comment 8

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this enhancement and I can confirm that the disclaimer is successfully displayed on the import screen from the "about:welcome" page.

Verified using the latest Firefox Nightly (80.0a1 Build ID - 20200723095657) installed on Windows 10 x64, Mac 10.15, and Ubuntu 18.04 x64.

Comment 9

[Emily McMinn :emcminn]

Comment on attachment 9164461 [details]
Bug 1653322 - Converted import topsites "disclaimer" tooltip to a footer

Beta/Release Uplift Approval Request

• User impact if declined: Legal disclaimer and import sites tooltips aren't accessible/visible to anyone not using a mouse. (able to hover over the import sites images.)
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): HTML/CSS change; no change to function.
• String changes made/needed: onboarding-import-sites-info changed to onboarding-import-sites-disclaimer in onboarding.ftl