1916363 - Request list doesn't adapt well to High Contrast Mode

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Selected request in Netmonitor in High Contrast Mode

See screenshot

Comment 1

[Morgan Reschenberg [:morgan]]

Triaging as S2 because no indication is given for selection

Comment 2

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

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

For more information, please visit BugBot documentation.

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Higher a11y severity is correct in this case.

Comment 4

[Anna Yeddi [:ayeddi]]

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 5

[Nicolas Chevobbe [:nchevobbe]]

Selection background color was fixed in Bug 1916603, but the status code icon isn't displayed properly in some cases (e.g. 200) when the request is selected

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916363 - [devtools] Add proper style for status code badges in High Contrast Mode. r=#devtools-reviewers,#accessibility-frontend-reviewers.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916363 - [devtools] Don't tweak opacity for cached requests in High Contrast Mode. r=#devtools-reviewers.

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916363 - [devtools] Adapt request list icons in High Contrast Mode. r=#devtools-reviewers.

The different icons colors are taken care off, but their color on selected background
was already working fine.
The slow icon needed a bit more work as it's an absolutely positioned element that
can overlap the text. In regular mode, a gradient is added on its left side so
the icon has a solid background and the text slowly fades before the icon.
In High Contrast Mode, the background image is removed, so the icon was fully
overlapping the text, making it unreadable.
To fix this, we set a plain solid color on the icon in HCM, which also needed
some dimensions tweaks to make it look nice.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d39cf82a3647
[devtools] Add proper style for status code badges in High Contrast Mode. r=devtools-reviewers,accessibility-frontend-reviewers,ochameau,nlapre.
https://hg.mozilla.org/integration/autoland/rev/bfdd635fd836
[devtools] Don't tweak opacity for cached requests in High Contrast Mode. r=devtools-reviewers,ochameau.
https://hg.mozilla.org/integration/autoland/rev/2a0022d78bca
[devtools] Adapt request list icons in High Contrast Mode. r=devtools-reviewers,ochameau.

Comment 10

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/d39cf82a3647
https://hg.mozilla.org/mozilla-central/rev/bfdd635fd836
https://hg.mozilla.org/mozilla-central/rev/2a0022d78bca