1749742 - The description of the selected radio button of the opt-in modal is not read by the screen reader applications

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P1)

Description

[Cosmin Muntean [:cmuntean], Ecosystem QA]

[Affected Versions]:

• Firefox Beta 97.0b2 (Build ID: 20220111185943)
• Firefox Nightly 98.a1 (Build ID: 20220111093827)

[Affected Platforms]:

• Windows 10 x64
• Ubuntu 20.04 x64
• macOS 10.15.7

[Prerequisites]:

• Have Firefox Beta 97.0b2 downloaded on your computer.
• Have the "browser.search.region" set to "US".
• Have one of the treatment user.js on your computer.
• Make sure there is no other modal displayed when starting the browser (browser default window, onboarding for new users etc).
• Have a screen reader application opened.

[Steps to reproduce]:

1. Open Firefox Beta 97.0b2.
2. Navigate to the “about:support” page and paste the user.js file into the Profile folder.
3. Restart the browser.
4. Navigate to the second screen of the opt-in modal
5. Focus on one of the radio options and listen to the screen reader application.

[Expected results]:

• The screen reader application reads: "radio button, 1 of 2" then reads the description.

[Actual results]:

• The screen reader application reads: "radio button, 1 of 2" and the description is NOT it is not read.

Comment 1

[Drew Willcoxon :adw]

Attachment: Bug 1749742 - Fix some a11y problems in the new Firefox Suggest opt-in modal.

There are a couple of problems:

(1) When a radio button has the keyboard focus, the corresponding title and
description are not read. This seems to be because the <label> doesn't have
any content to read. The actual content is in a different div.

I fixed this by moving the title and description inside the <label>.

(2) The options' titles and descriptions are not read on hover/mouseover. This
seems to be related to how the <label> has an absolute position and is layed
out on top of or underneath the titles and descriptions. It interferes with the
screenreader.

I fixed that by removing the absolute position. With that change combined with
the fix mentioned above, you can still click the title and description text to
select the radio button, but it breaks the ability to click outside the text to
select the button, for example clicking directly underneath the radio button. To
fix that, I gave the <label> a positive padding and negative margin so that
its padding extends to the border of the option.

---

I tested this on all three platforms and with the NVDA screenreader on Windows.

This revision makes one other change that isn't strictly necessary: Instead of
setting the width of the options to 100% - some margin, we can set
align-items: stretch on the section, which I think is a little nicer. We also
don't have to specify the widths of the images that way, only the heights.
However, it also makes the the buttons and not-now link take up the entire width
of the section, but we can fix that by putting them inside a div, which I called
.buttonBox.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7feb62ba5bc1
Fix some a11y problems in the new Firefox Suggest opt-in modal. r=daisuke

Comment 3

[Drew Willcoxon :adw]

[Tracking Requested - why for this release]:
This blocks the planned Firefox Suggest experiment on a 96 dot release.

Comment 4

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/7feb62ba5bc1

Comment 5

[Drew Willcoxon :adw]

Comment on attachment 9258760 [details]
Bug 1749742 - Fix some a11y problems in the new Firefox Suggest opt-in modal.

Beta/Release Uplift Approval Request

• User impact if declined: This blocks the planned Firefox Suggest experiment on a 96 dot release.
• 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: Should be clear from comments
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This makes some changes to the Firefox Suggest online opt-in modal to improve the experience for users who use screenreaders. The changes aren't visible to other users.
• String changes made/needed:

Comment 6

[Cosmin Muntean [:cmuntean], Ecosystem QA]

We have verified this issue on the latest Nightly 98.0a1 (Build ID: 20220113093336) on Windows 10 x64, macOS 10.15.7 and Ubuntu 20.04 x64.

• The description of the radio buttons is correctly read by the screen reader applications. We have verified this with VoiceOver on macOS, NVDA on Windows 10 x64 and Orca on Ubuntu 20.04 x64.

Comment 7

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9258760 [details]
Bug 1749742 - Fix some a11y problems in the new Firefox Suggest opt-in modal.

Approved for 97.0b3.

Comment 8

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/2e5e3e6b11c2

Comment 9

[Cosmin Muntean [:cmuntean], Ecosystem QA]

We have verified this issue on the latest Beta 97.0b3 (Build ID 20220113185849) and the Firefox 96.0.1 Try build, on Windows 10 x64, macOS 10.15.7 and Ubuntu 20 x64.

• The description of the radio buttons is correctly read by the screen reader applications. We have verified this with VoiceOver on macOS, NVDA on Windows 10 x64 and Orca on Ubuntu 20.04 x64.

However, while verifying this we have noticed that the text from the first slide is read on the second screen. We have logged this behavior in Bug 1750205.

I will mark the Firefox 96 status as soon as we have a Firefox 96 RC build for the dot release.

Comment 10

[Dianna Smith [:diannaS]]

Comment on attachment 9258760 [details]
Bug 1749742 - Fix some a11y problems in the new Firefox Suggest opt-in modal.

Approved for 96.0.2

Comment 11

[Dianna Smith [:diannaS]]

https://hg.mozilla.org/releases/mozilla-release/rev/255f79986bad

Comment 12

[Cosmin Muntean [:cmuntean], Ecosystem QA]

We have verified this issue on the latest 96.0.2 build (Build ID: 20220119040736) on Windows 10 x64, macOS 10.15.7 and Ubuntu 20.04 x64.

• The description of the radio buttons is correctly read by the screen reader applications. We have verified this with VoiceOver on macOS, NVDA on Windows 10 x64 and Orca on Ubuntu 20.04 x64.