2056319 - [a11y] Checkboxes are not grouped

Status: RESOLVED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Claire Joeckel]

Attachment: Screenshot 2026-07-20 105743.png

Impacted Section/Element

About:welcome flow, "Make Nightly feel more like home" page, HNT

Steps to Reproduce

In the About:welcome flow, navigate to the page containing the "Saved passwords", "Browsing history", "Extensions", and "Form autofill data" checkboxes. While a screen reader is active, navigate into the "Saved passwords", "Browsing history", "Extensions", and "Form autofill data" checkboxes. On HNT, navigate to the "Lists" widget and add four checkboxes to the list. Check two of the checkboxes to mark them as completed. While a screen reader is active, navigate into the "(list name)" group of checkboxes and the "Completed" group of checkboxes.

Expected Behavior

As keyboard focus moves into each group of checkboxes, screen readers will announce the text that is above the group of checkboxes ("Select the data you'd like to import grouping" for About:welcome, and "(list name)" and "Completed" for HNT.

Actual Behavior

The text that is above each group of checkboxes is not announced.

User Impact

Screen reader users receive incomplete context.

WCAG 2.2 References

"1.3.1 Info and Relationships
4.1.2 Name, Role, Value"

Recommendations

Group the checkboxes in a fieldset/legend structure, or a role="radiogroup" container. Assign an accessible name to the group using <legend>, aria-label, or aria-labelledby.

Testing Environment

Any

Assistive Technology Used

Any

Further Reference

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox

Severity

3-Moderate

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Messaging System' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Hackbot]

Triage / proposed fix plan (localized, not verified by running):

Two separate surfaces, both missing an accessible group name on their checkbox groups.

1. about:welcome import screen ("Make Nightly feel more like home")
Rendered by MultiSelect in browser/components/asrouter/content-src/components/MultiSelect.jsx. The container already has role="group" + aria-labelledby="multi-stage-multi-select-label" (lines ~163-171), but the element bearing that id — <h2 id="multi-stage-multi-select-label"> (lines ~173-177) — only renders when content.tiles.label is set. The migration/import screens deliver their heading via the screen-level subtitle/title, not tiles.label (see the multiselect tiles in browser/components/asrouter/modules/OnboardingMessageProvider.sys.mjs and the import screen in AboutWelcomeDefaults.sys.mjs — no tiles.label). Result: aria-labelledby dangles and the group is announced nameless. Secondary issue: the id is hard-coded, so multiple multiselect tiles on one screen collide.
Fix approach: make the group name robust — either only emit aria-labelledby when the label <h2> actually renders and otherwise fall back to associating the container with the screen subtitle/title element id, and/or add a tiles.label to the import screen content. Prefer fixing it in the component so grouping doesn't silently break per-message; make the label id unique per multiSelectId.

2. New Tab "Lists" widget
Rendered by browser/extensions/newtab/content-src/components/Widgets/Lists/Lists.jsx. Both the active-task checkboxes and the "Completed" checkboxes live inside a single <fieldset> with no <legend>/aria-label/aria-labelledby. The list name is rendered detached up in .lists-title / #lists-switcher-label, and "Completed" is only a <summary> <span class="completed-title"> (l10n newtab-widget-lists-completed-list). No ARIA ties either group to its heading.
Fix approach: give each collection its own group container — active tasks: role="group" (or per-group <fieldset>) with aria-labelledby referencing the list-title element; completed: add an id to the .completed-title span and set role="group" + aria-labelledby on its container (or nested <fieldset><legend>).

Existing tests (verification anchors; none currently assert grouping/role):

• browser/components/asrouter/tests/unit/content-src/components/MultiSelect.test.jsx
• browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_import.js
• browser/extensions/newtab/test/unit/content-src/components/Widgets/Lists.test.jsx

(a11y review advisable to confirm the exact SR announcement behavior.)

This is an automated analysis result. If this result is incorrect please add a needinfo and feel free to correct the error.

Comment 3

[Shane Hughes [:aminomancer]]

Emily incidentally has an old bug that's also about grouping the checkboxes, so she can fix both of them at once.

Comment 4

[Emily McMinn :emcminn]

Attachment: Bug 2056319 - Group checkboxes in the Migration Wizard

Comment 5

[Emily McMinn :emcminn]

I've attached a patch that should fix the issue for about:welcome and other uses of the Migration Wizard; the widgets piece should probably be handled by the owners of the widget code since the structure is very different.

Comment 6

[Emily McMinn :emcminn]

@Hackbot

The checkboxes on the import screen are not rendered by MultiSelect.jsx; the tile is tiles: { type: "migration-wizard" }, which means it is rendered by the EmbeddedMigrationWizard.jsx component. This component embeds a migration-wizard widget into about:welcome.

The actual fieldset label for migration wizard is created in browser/components/migration/content/migration-wizard.mjs.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/55155cd56189
https://hg.mozilla.org/integration/autoland/rev/8169eec8a264
Group checkboxes in the Migration Wizard r=migration-reviewers,omc-reviewers,morgan,aminomancer

Comment 8

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/8169eec8a264