This CL turns on the use_theme_colors stylelint rule which enforces that
any colors use variables defined in our codebase.
There are many, many violations, unsurprisingly (about 1500), so for now
I have disabled every single violation. The goal of the dark mode
migration will be in part to remove all violations of this rule.
Additionally, new code going forwards should adhere to the rule and not
add the comment to disable the warning.
Bug: 1152736
Change-Id: I51372724ea51485daef3d4f75b7d3f60a7c8016f
No-Presubmit: true
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2671323
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
:focus-visible is basically the exact same functionality as the custom
data-keyboard-focus attribute that devtools maintains. This CL converts
all of our uses of data-keyboard-focus in CSS to use :focus-visible.
This has no intended behaviour change although it's possible there are
small differences in our implementation vs. the web platform one, so
this might cause some regression with focus styles for keyboard
interaction.
I tested a few of these manually to verify they still do the same thing.
The CSS linter was unhappy about the ordering of some rules due to
specificity-ordering checks, so there is some re-ordering too.
A follow-up CL will remove our implementation of data-keyboard-focus.
Change-Id: Ifc273f7d82e16ea07e24ed2d1faa6f794a12501d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352236
Commit-Queue: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
Reviewed-by: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
These css rules used classes that don't exist anywhere in the
javascript. A script was written to find them, but manually checking
is still needed because some scripts generate class names by
string concatenation like 'icon-' + iconType
Change-Id: I15c4f26451b9fa371b366a8977021e2af7eca449
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1618043
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Alexei Filippov <alph@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#661630}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: e6f259d6e2834c9b0e2cbb0fdd7c9703e1fc6968
Accessibility testing of the Performance Monitor tool revealed several
issues which are addressed in this patch:
- Keyboard A11y: The graph toggling UI could not be navigated or
manipulated via the keyboard. This restricts keyboard-only users from
interacting correctly with the tool.
- The fix was to allow users to navigate through the list of
MetricIndicators in the left panel using the Tab key.
Also adding a keypress event listener to allow toggling each of the
MetricIndicators with either the 'Enter' or 'Space' keys.
- Color A11y: The UI relied solely on color differences to identify each
graph. This prevents users with reduced color perception from easily
using the tool.
- The fix was to add a text label to each graph and improve the
contrast ratio of the fill color.
- Screen Reader A11y: There was no screen reader accessible information
in the perf monitor tool. This prevents visually impared users from
using the tool.
- The fix was to add announceable text to the buttons and a
description to the graph (A future improvement would be to also
announce the graph values in realtime as the data comes in)
Screenshot of changes for comparison:
https://imgur.com/a/nUNInsl
Change-Id: Iaf8d2b5bf54f91b776372ae9d4c5e182d1bd6721
Reviewed-on: https://chromium-review.googlesource.com/c/1488051
Commit-Queue: James Lissiak <jalissia@microsoft.com>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#636154}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 05503b6028373f309a24747e4e208002750933a9