1735456 - about:welcome: Theme radio buttons have no text in NVDA browse mode

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P2)

Description

[James Teh [:Jamie]]

STR (with the NVDA screen reader):

1. Go to about:welcome
2. Press "Get started", then skip import with "Not now".
3. Press control+home to move to the top of the document.
4. Press down arrow three times.
   • Expected: NVDA should say "radio button checked Explore default themes."
   • Actual: NVDA says just "radio button checked"

The issue here is that the radio button is being labelled by its parent <label> element, but that label element has no text; it only has a title attribute. NVDA sees that the <label> is visible, so it doesn't report the label of the radio button itself to avoid duplication and instead relies on the text of the label itself... but there's no text!

The correct fix is probably to put aria-label in the l10n strings. That's probably not feasible at this point.

I'm trying to figure out a fix that doesn't involve messing with l10n strings. We can't set aria-label at runtime because Fluent will clobber it. Hackily creating a hidden label element containing the label as its text content and referencing it with aria-labelledby might work. I'm not sure whether that's possible with React, though.

Comment 1

[Meg Viar [:mviar]]

Attachment: Bug 1735456 - about:welcome: Theme radio buttons have no text in NVDA browse mode

Comment 2

[Meg Viar [:mviar]]

I took the approach of adding a span with class sr-only containing the description text as a sibling to the radio input. The resulting NVDA output is "clickable Explore default themes [down arrow] radio button checked". Based on my local testing, this is the same NVDA output you get when using a hidden label element.

The hidden label approach breaks a linting rule if the label doesn't enclose the input and seems to breaks rendering of the input if it is enclosed by a label nested in a Localized element. An aria-label on the radio input is still ignored by NVDA due to the parent label.

I'm not sure how to include the localized description string in a new context without changing the FTL file. If my approach looks reasonable, I'll request review of the FTL file.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/72b202d79e7d
about:welcome: Theme radio buttons have no text in NVDA browse mode r=emcminn,fluent-reviewers,flod

Comment 4

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/72b202d79e7d

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:mviar, is this bug important enough to require an uplift?
If not please set status_beta to wontfix.

For more information, please visit auto_nag documentation.

Comment 6

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the latest Firefox Nightly 97.0a1 (Build ID: 20211219214917) on Windows 10 x64.

• The “Explore <name_of_theme> colorways. Radio button checked <no_of_button_selected> of 7” text is said by the NVDA narrator when the themes radio buttons are selected.