Bug 1577790 - fix dark theme best practices icon fill color. r=gl
authorYura Zenevich <yura.zenevich@gmail.com>
Fri, 30 Aug 2019 20:30:57 +0000
changeset 551556 b3a62419e1ba731f58a5ca3273ce6099c18c355d
parent 551555 8e2dfb26c66ce8f6a48bb1ba2f9d2a4ca6d884fe
child 551557 42ebd8a50978189a7247dc029de7d66d97e7bec9
push id11865
push userbtara@mozilla.com
push dateMon, 02 Sep 2019 08:54:37 +0000
treeherdermozilla-beta@37f59c4671b3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1577790
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1577790 - fix dark theme best practices icon fill color. r=gl Differential Revision: https://phabricator.services.mozilla.com/D44234
devtools/client/accessibility/accessibility.css
devtools/client/accessibility/components/Check.js
devtools/client/accessibility/test/jest/components/__snapshots__/check.test.js.snap
devtools/client/accessibility/test/jest/components/__snapshots__/keyboard-check.test.js.snap
devtools/client/accessibility/test/jest/components/__snapshots__/text-label-check.test.js.snap
devtools/client/accessibility/test/jest/helpers.js
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -749,24 +749,28 @@ body {
 .accessibility-check .icon {
   display: inline;
   -moz-context-properties: fill;
   vertical-align: top;
   margin-block-start: 2px;
   margin-inline-end: 4px;
 }
 
-.accessibility-check .icon.FAIL {
+.accessibility-check .icon[data-score="FAIL"] {
   fill: var(--theme-icon-error-color);
 }
 
-.accessibility-check .icon.WARNING {
+.accessibility-check .icon[data-score="WARNING"] {
   fill: var(--theme-icon-warning-color);
 }
 
+.accessibility-check .icon[data-score="BEST_PRACTICES"] {
+  fill: currentColor;
+}
+
 .accessibility-check,
 .accessibility-color-contrast {
   position: relative;
   display: flex;
   cursor: default;
   height: inherit;
 }
 
--- a/devtools/client/accessibility/components/Check.js
+++ b/devtools/client/accessibility/components/Check.js
@@ -83,17 +83,17 @@ const LearnMore = createFactory(LearnMor
  *        Options:
  *          - score: value from SCORES from "devtools/shared/constants"
  */
 function Icon({ score }) {
   const { l10nId, src } = SCORE_TO_ICON_MAP[score];
 
   return Localized(
     { id: l10nId, attrs: { alt: true } },
-    ReactDOM.img({ src, className: `icon ${score}` })
+    ReactDOM.img({ src, "data-score": score, className: "icon" })
   );
 }
 
 /**
  * Renders text description of the accessibility check.
  *
  * @param {Object}
  *        Options:
--- a/devtools/client/accessibility/test/jest/components/__snapshots__/check.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/__snapshots__/check.test.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Check component: basic render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" class=\\"icon FAIL\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`Check component: basic render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`Check component: basic render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" class=\\"icon FAIL\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`Check component: basic render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
--- a/devtools/client/accessibility/test/jest/components/__snapshots__/keyboard-check.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/__snapshots__/keyboard-check.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KeyboardCheck component: FAIL render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" class=\\"icon FAIL\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`KeyboardCheck component: FAIL render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`KeyboardCheck component: FAIL render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" class=\\"icon FAIL\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`KeyboardCheck component: FAIL render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`KeyboardCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" class=\\"icon WARNING\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`KeyboardCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`KeyboardCheck component: WARNING render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" class=\\"icon WARNING\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`KeyboardCheck component: WARNING render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
--- a/devtools/client/accessibility/test/jest/components/__snapshots__/text-label-check.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/__snapshots__/text-label-check.test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextLabelCheck component: BEST_PRACTICES render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" class=\\"icon BEST_PRACTICES\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`TextLabelCheck component: BEST_PRACTICES render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" data-score=\\"BEST_PRACTICES\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`TextLabelCheck component: BEST_PRACTICES render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" class=\\"icon BEST_PRACTICES\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`TextLabelCheck component: BEST_PRACTICES render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" data-score=\\"BEST_PRACTICES\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`TextLabelCheck component: FAIL render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" class=\\"icon FAIL\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`TextLabelCheck component: FAIL render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`TextLabelCheck component: FAIL render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" class=\\"icon FAIL\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`TextLabelCheck component: FAIL render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`TextLabelCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" class=\\"icon WARNING\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`TextLabelCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
 
-exports[`TextLabelCheck component: WARNING render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" class=\\"icon WARNING\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
+exports[`TextLabelCheck component: WARNING render 2`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
--- a/devtools/client/accessibility/test/jest/helpers.js
+++ b/devtools/client/accessibility/test/jest/helpers.js
@@ -109,17 +109,17 @@ function testCheck(wrapper, props) {
   expect(localized.length).toBe(3);
 
   const heading = localized.at(0).childAt(0);
   expect(heading.type()).toBe("h3");
   expect(heading.hasClass("accessibility-check-header")).toBe(true);
 
   const icon = localized.at(1).childAt(0);
   expect(icon.type()).toBe("img");
-  expect(icon.hasClass(props.score)).toBe(true);
+  expect(icon.prop("data-score")).toEqual(props.score);
 
   const annotation = localized.at(2).childAt(0);
   expect(annotation.type()).toBe("p");
   expect(annotation.hasClass("accessibility-check-annotation")).toBe(true);
 }
 
 module.exports = {
   checkMenuItem,