1620734 - Color improvements in Perfherder Graphs View - Accessible Table View

Status: RESOLVED FIXED

(Tree Management :: Perfherder, enhancement, P3)

Description

[Mellina Yonashiro]

The Table view in Perfherder's Graphs View have some components which do not pass WCAG recommended contrast ratio.

This task's goal is to make sure all of the text/background color ratios pass the minimum ratio by changing some colors.
The exception is "job, compare" links when not :hover.

Please refer to this documentation piece when adjusting colors.

STR

1. Open Perfherder's Graph view.
2. Click "Add test Data". Choose 1 - 2 tests and click on "Plot graphs".
3. Click on "Table View" button.
4. This view is the one to have the colors changed.

Comment 1

[Shubham Kumar [:imskr]]

Can I take this issue?

Comment 2

[Shubham Kumar [:imskr]]

Hi Sarah, which CSS file I have to make changes?

Comment 3

[Sarah Clements [:sclements]]

The changes are for this ui/perfherder/GraphsView/TableView file. But I'm not sure about the CSS file. Since Mellina filed this bug, she is the person to ask if you have questions.

Comment 4

[Mellina Yonashiro]

I added some styles in the perf.css file. It is located here.

Comment 5

[Shubham Kumar [:imskr]]

There are some colors that do not pass WCAG in perf.css here Should I remove them?

Comment 6

[Sarah Clements [:sclements]]

You need to be careful about removing styles that are being used. I think Mellina added those, so it'd be good to get input from her about changing them.

Comment 7

[Mellina Yonashiro]

You should try to find a close color to the one that doesn't pass. For example, if the gray color is too bright, and that is causing the not passing ratio, you should find a darker gray.

I have checked the file and there should one or two color changes to this bug.
It is probably easier to get you feedback after you send your first PR, as well.

Comment 8

[Shubham Kumar [:imskr]]

PR: https://github.com/mozilla/treeherder/pull/6160

Comment 9

[Sarah Clements [:sclements]]

Merged: https://github.com/mozilla/treeherder/commit/bc3e14fb6dd08afece3c9e7d1f6fc0010fef8369