1916700 - Active Rules view toolbar button style is almost the same as non-active buttons in High Contrast Mode

Status: ASSIGNED

(DevTools :: Inspector: Rules, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Rules view toolbar in High Contrast Mode

In the screenshot, the :hov and "sun" button are active. The only difference is that their background is slightly lighter

Comment 1

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

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

For more information, please visit BugBot documentation.

Comment 2

[Julian Descottes [:jdescottes]]

For those bugs it's fine to have a different severity than the accessibility severity

Comment 3

[Anna Yeddi [:ayeddi] ⛔ Out of office until November 12 ⛔]

Adding a keyword no-plan-to-ship as an ad-hoc flag here. This keyword was meant to exclude specific bugs from the general access-S2 tracking when there are no plans to ship the affected feature. However, we do plan to address and ship this and other HCM-related devtools bugs, which are part of a larger project. This Dev Tools High Contrast Mode support project, tracked by the meta bug 1590215, is ongoing and is tracked by the Dev Tools team separately.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916700 - [devtools] Cleanup toolbarbutton.css. r=#devtools.

No element with the devtools-toolbarbutton class can have a label or a checked attribute,
or can have .toolbarbutton-text items, so we can remove some selectors and rules from the stylesheet.

We take this as an opportunity to refactor the stylesheet with CSS nesting.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916700 - [devtools] Don't use --toolbarbutton-checked-(background|color) on non-button elements. r=#devtools.

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916700 - [devtools] Adapt pressed devtools-button in High Contrast Mode. r=#devtools

The pressed style was reusing --toolbarbutton-hover-background, instead of using the more
semantically appropriate --toolbarbutton-checked-background.
The latter was having a very distinct style (blue background), which didn't match the
style we wanted. But, I don't think the style as used anywhere and seemed more like
a relic of a previous design, so I updated the variable to mimic what we currently
have in regular themes, and adapted the colors for High Contrast.

This way we can extract some selectors into their own rules so we have a more fine-grained
way to style those.

We take this as an opportunity to remove the --toolbarbutton-focus* variables and
the declarations using them as we now have proper focus indicator on the buttons.