1916391 - Performance analysis charts legend don't match chart colors in High Contrast Mode

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

Attachment: performance analysis view

The performance analysis can be triggered by clicking on the stopwatch icon in the bottom left corner of the Netmonitor

The pie charts do keep their colors in High contrast mode, but the legend squares do not (note that the label are put on the pie chart themselves, so that's not too bad)

Not sure if the chart should keep their color though? If not, we could have some distinct patterns for the different categories (which would probably be more accessible in the end)

Comment 1

[Morgan Reschenberg [:morgan]]

Triaging as S2, since this makes the graph unusable in HCM.

We can keep the same colours in HCM, but it'd be helpful to add additional differentiation mechanisms (e.g. patterns) so they're readable for folks who may have similar background colours in their custom theme

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] [PTO - back January 24]]

Attachment: Bug 1916391 - [devtools] Use light-dark() in chart.css. r=#devtools.

Comment 6

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

Attachment: Bug 1916391 - [devtools] Adapt netmonitor charts to High Contrast Mode. r=#devtools.

Adapt text color, avoid tweaking opacity on hover.

Comment 7

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

Attachment: Bug 1916391 - [devtools] Display Netmonitor Statistics charts legend in High Contrast Mode. r=#devtools.

The colors that are defined for the charts are specified in High Contrast Mode,
so we can display them in the legend just fine.
This requires making the legend element their own element, as we don't want to
opt out of forced colors for the cell content.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/18b71efbe503
[devtools] Use light-dark() in chart.css. r=devtools-reviewers,bomsy.
https://hg.mozilla.org/integration/autoland/rev/5428f34f96e1
[devtools] Adapt netmonitor charts to High Contrast Mode. r=devtools-reviewers,bomsy.
https://hg.mozilla.org/integration/autoland/rev/6967e4d5d89d
[devtools] Display Netmonitor Statistics charts legend in High Contrast Mode. r=devtools-reviewers,bomsy.

Comment 9

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/18b71efbe503
https://hg.mozilla.org/mozilla-central/rev/5428f34f96e1
https://hg.mozilla.org/mozilla-central/rev/6967e4d5d89d