Closed Bug 1916672 Opened 6 months ago Closed 3 months ago

Select container element button hover color doesn't adapt to High Contrast Mode

Categories

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

Product:
DevTools
Component:
Inspector: Rules
Platform:
Desktop
All
Type:
defect

Tracking

(Accessibility Severity:s2, firefox134 wontfix, firefox135 verified, firefox136 verified)

Status:
VERIFIED FIXED
Milestone:
135 Branch
Project Flags:
Accessibility Severity s2
Tracking Flags:
Tracking Status
firefox134 --- wontfix
firefox135 --- verified
firefox136 --- verified

People

(Reporter: nchevobbe, Assigned: nchevobbe)

References

(Blocks 1 open bug)

Details

(Keywords: no-plan-to-ship)

Attachments

(2 files)

Select container element button in High Contrast Mode
9.86 KB, image/png
Details
Bug 1916672 - [devtools] Adapt Select node icon to High Contrast Mode. r=#devtools.
48 bytes, text/x-phabricator-request
Details | Review

See screenshot (I tweaked the base variable colors so it's easier to spot)

Flags: needinfo?(mreschenberg)

Triaging as S2 because UI doesn't adapt to HCM

Accessibility Severity: --- → s2
Flags: needinfo?(mreschenberg)
Severity: -- → S3
Priority: -- → P2

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.

Flags: needinfo?(jdescottes)

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

Flags: needinfo?(jdescottes)

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.

Keywords: no-plan-to-ship

The color is fine now, but we're still setting a non system color on hover

Summary: Select container element button color doesn't adapt to High Contrast Mode → Select container element button hover color doesn't adapt to High Contrast Mode
Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/58d11766b220 [devtools] Adapt Select node icon to High Contrast Mode. r=devtools-reviewers,ochameau.

https://hg.mozilla.org/mozilla-central/rev/58d11766b220

Status: ASSIGNED → RESOLVED
Closed: 3 months ago
status-firefox135: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 135 Branch
Flags: qe-verify+

Nicolas, can you provide a minimal test case to use for verification? Thank you.

Flags: needinfo?(nchevobbe)

(In reply to Daniel Bodea [:danibodea] from comment #9)

Nicolas, can you provide a minimal test case to use for verification? Thank you.

  1. Make sure you're OS has a high contrast theme, and check that you have the following prefs values set
  • devtools.high-contrast-mode-support: true
  • browser.display.document_color_use: 2
  • ui.useAccessibilityTheme: 1
  1. Go to data:text/html,<meta charset=utf8><style>html { container-type: inline-size; } @container (width > 0) { body {background: gold; }}</style>Hello
  2. Open the inspector
  3. Select the <body> element
  4. In the rule view, you should see a crosshair icon in the @container ✜ (width > 0px) { line

-> the button should have a high contrast color (it depends of the selected theme, but for example, on Windows, with the Night Sky high contrast theme, the button should be yellow)

Flags: needinfo?(nchevobbe)

I have verified the default color on the crosshair icon and on hold. These are the results:

Windows 10

  • Affected version (v134.0.1):
  1. High Contrast White: black, white on hover (invisible)
  2. High Contrast Black: white, black on hover (invisible)
  3. High Contrast #2: white, white on hover (no hover change)
  4. High Contrast #1: white, white on hover (no hover change)
  • Fixed version (v135.0b5):
  1. High Contrast White: black, black on hover (no hover change)
  2. High Contrast Black: white, light blue on hover
  3. High Contrast #2: white, dark blue on hover
  4. High Contrast #1: white, green on hover

Windows 11:

  • Affected version (v134.0.1):
  1. High Contrast Aquatic: white, dark blue on hover
  2. High Contrast Desert: black, white on hover (invisible)
  3. High Contrast Dusk: light blue, very dark blue on hover (almost invisible)
  4. High Contrast Night Sky: yellow, dark gray on hover (almost invisible)
  • Fixed version (v135.0b5):
  1. High Contrast Aquatic: white, light blue on hover
  2. High Contrast Desert: black, brown on hover
  3. High Contrast Dusk: light blue, slightly darker blue on hover
  4. High Contrast Night Sky: yellow, light blue on hover

MacOS 11:

  • Affected version (v134.0.1):
    Increase contrast enabled: dark gray, white on hover (invisible)

  • Fixed version (v135.0b5):
    Increase contrast enabled: dark gray, light gray on hover

Ubuntu 22:

  • Affected version (v134.0.1):
    High Contrast Enabled: black, white on hover (invisible)

  • Fixed version (v135.0b5):
    High Contrast Enabled: black, blue on hover

In conclusion, the hover color of the container button is now considerably improved. Most importantly, it no longer disappears when it is in hover mode. Closing report as verified. Thank you.

Status: RESOLVED → VERIFIED
status-firefox134: --- → affected
status-firefox135: fixed → verified
status-firefox136: --- → verified
Flags: qe-verify+
OS: Unspecified → All
Hardware: Unspecified → Desktop
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: