1653315 - Convert about:welcome theme buttons to accessible radio buttons

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Emily McMinn :emcminn]

As per @marcoz's accessibility review, we should convert the theme page's buttons to hidden radio buttons, which shouldn't change the visuals/function of the page, but will make the theme options more accessible.

suggestions at the link below:

https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/

Comment 1

[Emily McMinn :emcminn]

Attachment: Bug 1653315 - Convert theme buttons to radio buttons

Comment 2

[Emily McMinn :emcminn]

Attachment: Bug 1653315 - Convert theme buttons to radio buttons

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1b5b325e7ff4
Convert theme buttons to radio buttons r=MarcoZ

Comment 4

[Cristina Coroiu [:ccoroiu]]

Backed out changeset 1b5b325e7ff4 (bug 1653315) for bc failures at browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js

Backout: https://hg.mozilla.org/integration/autoland/rev/2227037a8a5f9e65aec19e905733b61b274cf79b

Failure push: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=1b5b325e7ff441284624ea78c684b34ba334a00b

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=311288223&repo=autoland&lineNumber=4339

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/aafd087ec6ad
Convert theme buttons to radio buttons r=pdahiya,MarcoZ

Comment 6

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/aafd087ec6ad

Comment 7

[Emily McMinn :emcminn]

Comment on attachment 9164157 [details]
Bug 1653315 - Convert theme buttons to radio buttons

Beta/Release Uplift Approval Request

• User impact if declined: Theme buttons in the about:welcome theme page will not be accessible to users using a screen reader, or keyboard access.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: - Open a new profile in Nightly, and navigate to about:welcome

• Navigate through the welcome screens to the "Choose A Look" screen
• The "Theme" buttons should be grouped together when accessed by keyboard (tab and then arrow keys), and show as `input type="radio" in the inspector.

• 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 only, to improve accessibility - no change to function.
• String changes made/needed: none

Comment 8

[Alexandru Trif, Desktop QA [:atrif]]

Attachment: about_welcome_00.gif

Verified the issue using Firefox 81.0a1 (20200729213824) on Windows 10x64, macOS 10.12 and Ubuntu 18.04. The buttons are displayed grouped when using TAB key and can be selected as one when using arrow keys. Also input class="sr-only input" type="radio" are shown in the inspector.

Unfortunately, I see a slight moving of the Selected Theme/ Save Theme/ Not now buttons when using TAB key on grouped theme buttons.
Also, after changing selections on themes there is also a slight movement on each selection clicked. Please see the attached screen recording made on Windows 10x64. Should I file a new bug for this or this is expected? Thank you!

Comment 9

[Emily McMinn :emcminn]

(In reply to Alexandru Trif, QA [:atrif] from comment #8)

Created attachment 9166993 [details]
about_welcome_00.gif

Verified the issue using Firefox 81.0a1 (20200729213824) on Windows 10x64, macOS 10.12 and Ubuntu 18.04. The buttons are displayed grouped when using TAB key and can be selected as one when using arrow keys. Also input class="sr-only input" type="radio" are shown in the inspector.

Unfortunately, I see a slight moving of the Selected Theme/ Save Theme/ Not now buttons when using TAB key on grouped theme buttons.
Also, after changing selections on themes there is also a slight movement on each selection clicked. Please see the attached screen recording made on Windows 10x64. Should I file a new bug for this or this is expected? Thank you!

Hi Alexandru, thanks! I see the movement you mean - I don't think this is expected, but I'm not sure what might be causing it. If you wouldn't mind filing a new bug for it, then we'll investigate :)

Comment 10

[Alexandru Trif, Desktop QA [:atrif]]

(In reply to Emily McMinn :emcminn from comment #9)

Hi Alexandru, thanks! I see the movement you mean - I don't think this is expected, but I'm not sure what might be causing it. If you wouldn't mind filing a new bug for it, then we'll investigate :)

Thank you! I opened bug 1656267. The issue is verified fixed with Firefox 81.0a1 (20200729213824) from comment 8 and comment 9.

Comment 11

[Julien Cristau [:jcristau]]

Comment on attachment 9164157 [details]
Bug 1653315 - Convert theme buttons to radio buttons

approved for 80.0b2

Comment 12

[Julien Cristau [:jcristau]]

https://hg.mozilla.org/releases/mozilla-beta/rev/890e54aa89c2

Comment 13

[Alexandru Trif, Desktop QA [:atrif]]

Verified the issue using Firefox 80.0b2 on Windows 10x64, macOS 10.12 and Ubuntu 18.04. The behavior respects the results from comment 8 and comment 7.