1881851 - Toolbarbuttons should have a visible border in prefers-contrast/forced-colors

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P2)

Description

[Mark Striemer [:mstriemer]]

Our button specs for forced-colors mode depend on buttons having a border since in Windows default HCM themes the ButtonFace and Canvas colours are quite similar. The border is required to provide correct contrast.

Update the toolbarbutton styles to include a border (or potentially an outline) so that they can use our HCM styling.

Comment 1

[Mark Striemer [:mstriemer]]

Attachment: Bug 1881851 - Part 1: Give toolbarbuttons an outline in prefers-contrast r?#desktop-theme-reviewers,#accessibility-frontend-reviewers

Comment 2

[Mark Striemer [:mstriemer]]

Attachment: Bug 1881851 - Part 2: Give bookmark toolbarbuttons an outline in prefers-contrast r?#desktop-theme-reviewers,#accessibility-frontend-reviewers

Depends on D203693

Comment 3

[Mark Striemer [:mstriemer]]

Attachment: Bug 1881851 - Part 3: Give tabs an outline in forced-colors r?#desktop-theme-reviewers,#accessibility-frontend-reviewers

Depends on D203694

Comment 4

[Mark Striemer [:mstriemer]]

Attachment: Bug 1881851 - Part 4: Give urlbar buttons an outline in prefers-contrast r?#desktop-theme-reviewers,#accessibility-frontend-reviewers

Depends on D203695

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4e47942d69b2
Part 1: Give toolbarbuttons an outline in prefers-contrast r=desktop-theme-reviewers,accessibility-frontend-reviewers,morgan,emilio,dao,tabbrowser-reviewers
https://hg.mozilla.org/integration/autoland/rev/d62b45401c4a
Part 2: Give bookmark toolbarbuttons an outline in prefers-contrast r=desktop-theme-reviewers,accessibility-frontend-reviewers,morgan,dao
https://hg.mozilla.org/integration/autoland/rev/a5f1f3f09b42
Part 3: Give tabs an outline in forced-colors r=desktop-theme-reviewers,dao,tabbrowser-reviewers
https://hg.mozilla.org/integration/autoland/rev/e46eaccd15b4
Part 4: Give urlbar buttons an outline in prefers-contrast r=desktop-theme-reviewers,accessibility-frontend-reviewers,morgan,dao,urlbar-reviewers

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/4e47942d69b2
https://hg.mozilla.org/mozilla-central/rev/d62b45401c4a
https://hg.mozilla.org/mozilla-central/rev/a5f1f3f09b42
https://hg.mozilla.org/mozilla-central/rev/e46eaccd15b4

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: tab outline in Alpenglow theme

Is it intended to add an outline for non-high-contrast mode? On a fresh profile, If I install the Alpenglow theme, I do get an outline, which comes from https://searchfox.org/mozilla-central/rev/01aaa47e62a2015e7641f26ab0bc2bb00ab579b8/browser/themes/shared/tabbrowser/tabs.css#44-48

&[lwtheme] {
  --tab-outline-color: var(--lwt-tab-line-color, currentColor);
  --tab-hover-outline-color: var(--lwt-tab-line-color, currentColor);
  --tab-selected-outline-color: var(--lwt-tab-line-color, currentColor);
}

I makes the tab strip a bit busy and not as clean as previously IMO (I understand that it makes sense in HCM though)

Comment 8

[Mark Striemer [:mstriemer]]

The outline on all LWT without increase contrast settings was bug 1907103 and should be fixed