2069386 - A panel-list separator can disappear in High Contrast Mode

Status: VERIFIED FIXED

(Toolkit :: Themes, defect, P1)

Description

[Dão Gottwald [:dao]]

panel-list draws its separator as a 1px background-color on a slotted hr (::slotted(hr:not([hidden])) in toolkit/content/widgets/panel-list/panel-list.css). Under forced colors an author background-color that is neither a system color nor currentColor-derived is replaced with the canvas background -- the very surface the separator sits on -- so the line vanishes instead of being forced to something visible. A border does not have this problem: a rejected border-color reverts to currentColor.

Measured in a content document under forced colors, light theme:

background-color: #949297                                            ->  Canvas
background-color: light-dark(#B7B6BA, #949297)                       ->  Canvas
background-color: color-mix(in srgb, currentColor 25%, transparent)  ->  kept
border-color: #949297                                                ->  CanvasText

--panel-separator-color currently resolves to var(--border-color) under forced colors, which is a system color, so the default path is safe today. A consumer that overrides the token with a literal value loses its separators outright and gets no warning.

This came out of the New Tab search bar's engine dropdown missing its separator on Windows 11 in High Contrast Mode. I could not reproduce that on Linux -- the hr paints CanvasText there -- so the two may not be the same thing, and that half is still open on the parent bug.

Comment 1

[Dão Gottwald [:dao]]

Attachment: Bug 2069386 - Draw the panel-list separator as a border. r?#desktop-theme-reviewers!

The separator box shrinks to the line it draws. At fractional device pixel ratios the border paints one device pixel where the background covered 1.25 or 1.5 of them, so content below the separator moves up by the difference.

Comment 2

[Dão Gottwald [:dao]]

Attachment: Bug 2069386 - Allow --panel-separator-color as a border color in use-design-tokens. r?#desktop-theme-reviewers!

The token is a color, but the generated semantic categories file it under box-shadow, so no border category picks it up and every consumer draws its separator through a disable comment.

Comment 3

[BugBot [:suhaib / :marco]]

The severity field for this bug is set to S4. However, the accessibility severity is higher, .
:dao, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 4

[Phabricator Automation]

Comment on attachment 9636787 [details]
Bug 2069386 - Allow --panel-separator-color as a border color in use-design-tokens. r?#desktop-theme-reviewers!

Revision D323736 was moved to bug 2070779. Setting attachment 9636787 [details] to obsolete.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/72385745e8b7
https://hg.mozilla.org/integration/autoland/rev/231b8f9d763f
Draw the panel-list separator as a border. r=tgiles,desktop-theme-reviewers

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/231b8f9d763f

Comment 7

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2026-09-04 Firefox Nightly build on Windows 11.

Verified as fixed on Firefox Nightly 158.0a1 and Firefox 157.0b4 on Windows 10 and Windows 11.