2064563 - about:addons themes mode control has no accessible name

Status: VERIFIED FIXED

(Toolkit :: Add-ons Manager, defect, P2)

Description

[Tim Giles [:tgiles]]

aboutaddons-themes-mode.mjs:74 renders a <moz-segmented-control> with only .value and @change bound, so the container carries no label, aria-label, or data-l10n-id. The child <moz-segmented-control-item>s carry themes-mode-light, themes-mode-dark, and themes-mode-device, and those messages supply .label (aboutAddons.ftl:701-710), so the items get names even though the container doesn't.

Once bug 2050157 lands, that container exposes role="radiogroup", since MozSegmentedControl sets type = "radio" (moz-segmented-control.mjs:33) and no deck is set here. That role needs an accessible name, where the implicit group didn't, per bug 2050157 comment #5.

This is the Light/Dark/Device control in the sticky header of the about:addons themes list view. addon-page-header.mjs:45 puts <aboutaddons-themes-mode> there unconditionally, but aboutaddons.css:129-142 sets it to display: none unless addon-page-header[current-view="list"][type="theme"] also has browser.nova.enabled true, and that pref is true only on Nightly (browser/app/profile/firefox.js:2207-2211). So if you're on any other channel, you won't see this control until you flip that pref yourself. browser_html_themes_mode.js:17-22 already asserts as much.

The plumbing for the name is already there. ariaLabel on SelectControlBaseElement is fluent: true with attribute: "aria-label" (lit-select-control.mjs:60). MozLitElement connects DOM localization to its own shadow root and writes aria-label into the host's data-l10n-attrs (lit-utils.mjs:167, :178, :230), and the render path forwards it from there (lit-select-control.mjs:347). moz-fieldset puts it on the same inner <fieldset> that takes the role (moz-fieldset.mjs:179 and :184). One proposed fix that is small: a data-l10n-id on aboutaddons-themes-mode.mjs:74, plus one message with an .aria-label attribute beside the themes-mode-* block. I'd use aria-label rather than a visible label here, since label renders a <legend> (moz-fieldset.mjs:186) and that's a lot for a compact sticky header. aria-labelledby isn't an option either, since the page heading lives outside this component's shadow root. browser_html_themes_mode.js is where the assertion goes.

Bug 2053873 tracks replacing this component with something shared with theme-picker, but it's unassigned and there's no current activity on it, so we probably don't need to wait on it.

Comment 1

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: Bug 2064563 - Add explicit test assertion to ensure the expected fluent id is set on the aboutaddons-themes-mode moz-segmented-control element. r?mkennedy!

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/5fa3641b28e4
https://hg.mozilla.org/integration/autoland/rev/11d0a9f95b70
Add explicit test assertion to ensure the expected fluent id is set on the aboutaddons-themes-mode moz-segmented-control element. r=fluent-reviewers,bolsson,mkennedy

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e38559cd2fa5
https://hg.mozilla.org/integration/autoland/rev/ec35a0b03655
Revert "Bug 2064563, Bug 2058886 - Add explicit test assertion to ensure the expected fluent id is set on the aboutaddons-themes-mode moz-segmented-control element. r=fluent-reviewers,bolsson,mkennedy" for causing mochitest failures at browser_searchbar_new.js

Comment 4

[rperta]

Backed out for causing mochitest failures at browser_searchbar_new.js
Backout link
Push with failures
Failure log(s)
and also this Failure log

Comment 5

[Luca Greco [:rpl] [:luca] [:lgreco]]

The failure was triggered by the parent revision (part of Bug 2058886) and mkennedy is already on it.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c74e9c907ad6
https://hg.mozilla.org/integration/autoland/rev/d6fc6ad71b83
Add explicit test assertion to ensure the expected fluent id is set on the aboutaddons-themes-mode moz-segmented-control element. r=fluent-reviewers,bolsson,mkennedy

Comment 7

[Serban Stanca [:SerbanS]]

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

Comment 8

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: Screen reader users and users that rely on AT/accessibility will be greatly impacted if not included.
• Code covered by automated testing?: yes
• Fix verified in Nightly?: yes
• Needs manual QE testing?: yes
• Steps to reproduce for manual QE testing: See bug 2058886
• Risk associated with taking this patch: low
• Explanation of risk level: It does not change any behavior of the interface - just changes what is announced when AT is used. Tests have been added and existing tests all pass, so risk is low.
• String changes made/needed?: Yes
• Is Android affected?: unknown

Comment 9

[Mark Kennedy [:mark]]

Attachment: Bug 2064563 - Add explicit test assertion to ensure the expected fluent id is set on the aboutaddons-themes-mode moz-segmented-control element.

This patch is adding only an additional test assertion to verify that
the aboutaddons-themes-mode moz-segmented-control does have the expected
fluent id (which is something that the parent patch, D323767, is taking care of).

Original Revision: https://phabricator.services.mozilla.com/D323037

Comment 10

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/356b19772dce
https://hg.mozilla.org/releases/mozilla-beta/rev/3f5bd8a1b74d

Comment 11

[Alex Cornestean]

Verified as Fixed. Tested on the latest Nightly (158.0a1/20260913212439) and Beta (157.0b1/20260913114024 from https://treeherder.mozilla.org/jobs?repo=mozilla-beta&revision=3f5bd8a1b74d55336b318fb00332b7eaa15816a7) under Windows 11 and Ubuntu 25.10.

The theme control bar and buttons can be focused and are announced as follows:

Windows:

• “Appearance group” – when focus shifts to the group
• “Appearance radio group” when focus shifts to a button in the group
• “Light radio button” – “selected”/”non selected” – “1 of 3”
• “Dark radio button” – “selected”/”non selected” – “2 of 3”
• “Device radio button” – “selected”/”non selected” – “3 of 3”

Linux:

• “Appearance panel” – when focus is shifted to the group
• “Light off selected radio button”/ “Dark off selected radio button” / “Device off selected radio button” – when the buttons get focus but are not enabled
• “Light selected radio button” / “Dark selected radio button” / “Device selected radio button” – when the buttons are focused and enabled

In addition, theme cards and Install/Enable/Disable buttons for the themes can be focused. The theme names and Install/Enable/Disable buttons are also announced for all themes in the “Manage your themes” page of about:addons, including the new Nova themes from the “Firefox themes” section.