Bug 1547068 - making badges in tree non-interactive as per ui-review. r=mtigley
authorYura Zenevich <yura.zenevich@gmail.com>
Thu, 02 May 2019 18:55:33 +0000
changeset 531239 5430d7a592d21f5a09d78bdbe9d3d26cc3ef577c
parent 531238 66c1e6f5276fc3bbf3fa1f0f68f129844aa9dcdc
child 531240 b651d60125273c1fbf1daf236d1b14a27aa4d8d5
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1547068
milestone68.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 1547068 - making badges in tree non-interactive as per ui-review. r=mtigley Depends on D29342 Differential Revision: https://phabricator.services.mozilla.com/D29363
devtools/client/accessibility/accessibility.css
devtools/client/accessibility/components/AccessibilityRowValue.js
devtools/client/accessibility/components/AccessibilityTree.js
devtools/client/accessibility/components/Badge.js
devtools/client/accessibility/components/Badges.js
devtools/client/accessibility/components/ContrastBadge.js
devtools/client/accessibility/test/browser/browser_accessibility_tree_audit.js
devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_toolbar.js
devtools/client/accessibility/test/browser/head.js
devtools/client/accessibility/test/jest/components/__snapshots__/badge.test.js.snap
devtools/client/accessibility/test/jest/components/__snapshots__/badges.test.js.snap
devtools/client/accessibility/test/jest/components/__snapshots__/contrast-badge.test.js.snap
devtools/client/accessibility/test/jest/components/badge.test.js
devtools/client/accessibility/test/jest/components/contrast-badge.test.js
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -17,33 +17,31 @@
   --accessibility-tree-row-height: 21px;
   --accessibility-unfocused-tree-focused-node-background: var(--grey-20);
   --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-icon-dimmed-color);
   --accessibility-link-color: var(--blue-60);
   --accessibility-link-color-active: var(--blue-70);
   --badge-active-background-color: var(--blue-50);
   --badge-active-border-color: #FFFFFFB3;
   --badge-interactive-background-color: var(--grey-20);
-  --badge-interactive-color: var(--grey-90);
   --accessible-label-background-color: white;
   --accessible-label-border-color: #CACAD1;
   --accessible-label-color: var(--grey-60);
   /* Similarly to webconsole, add more padding before the toolbar group. */
   --separator-inline-margin: 5px;
 }
 
 :root.theme-dark {
   --accessibility-unfocused-tree-focused-node-background: var(--grey-70);
   --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-selection-color);
   --accessibility-link-color: var(--theme-highlight-blue);
   --accessibility-link-color-active: var(--blue-40);
   --badge-active-background-color: var(--blue-60);
   --badge-active-border-color: #FFF6;
   --badge-interactive-background-color: var(--grey-70);
-  --badge-interactive-color: var(--grey-30);
   --accessible-label-background-color: var(--grey-80);
   --accessible-label-border-color: var(--grey-50);
   --accessible-label-color: var(--grey-40);
 }
 
 /* General */
 html,
 body {
@@ -329,56 +327,52 @@ body {
   border-bottom: 1px solid var(--theme-splitter-color);
   background: var(--theme-toolbar-background);
   font: message-box;
   font-size: var(--accessibility-font-size);
   height: var(--accessibility-toolbar-height);
   color: var(--theme-toolbar-color);
 }
 
-.badge.toggle-button,
-.mainFrame .treeTable .treeRow .badges .badge {
-  background-color: var(--badge-interactive-background-color);
-  color: var(--badge-interactive-color);
+.badge {
+  font: message-box;
   border-radius: 3px;
   padding: 0px 2px;
   margin-inline-start: 5px;
+  color: var(--accessible-label-color);
+  background-color: var(--accessible-label-background-color);
+  border: 1px solid var(--accessible-label-border-color);
 }
 
 .badge.toggle-button {
-  border: 1px solid transparent;
   color: var(--theme-body-color);
+  background-color: var(--badge-interactive-background-color);
+  border-color: transparent;
 }
 
 .devtools-toolbar .badge.toggle-button:focus {
   outline: 2px solid var(--accessibility-toolbar-focus);
   outline-offset: -2px;
   box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus-alpha30);
   -moz-outline-radius: 2px;
 }
 
-.mainFrame .treeTable .treeRow .badges .badge {
-  border: 1px solid var(--accessible-label-border-color);
-}
-
-.mainFrame .treeTable:focus .treeRow.selected .badges .badge {
-  background-color: var(--badge-interactive-background-color);
-  border: 1px solid var(--accessible-label-border-color);
-  color: var(--badge-interactive-color);
-}
-
-.badge.toggle-button.checked,
-.mainFrame .treeTable:focus .treeRow.selected .badges .badge.checked,
-.mainFrame .treeTable .treeRow .badges .badge.checked {
+.treeTable:focus .treeRow.selected .badges .badge {
   background-color: var(--badge-active-background-color);
+  border-color: var(--accessible-active-border-color);
   color: var(--theme-selection-color);
 }
 
-.mainFrame .treeTable .treeRow .badges .badge.checked {
-  border: 1px solid var(--badge-active-border-color);
+.treeTable:not(:focus):not(:focus-within) .treeRow.selected .badges .badge {
+  color: var(--accessible-label-color);
+}
+
+.badge.toggle-button.checked {
+  background-color: var(--badge-active-background-color);
+  color: var(--theme-selection-color);
 }
 
 /* Avoid having a default dotted border on keyboard focus since we provide focus
    styling*/
 .badge.toggle-button::-moz-focus-inner {
   border: none;
 }
 
--- a/devtools/client/accessibility/components/AccessibilityRowValue.js
+++ b/devtools/client/accessibility/components/AccessibilityRowValue.js
@@ -19,35 +19,34 @@ const Rep = createFactory(REPS.Rep);
 
 class AccessibilityRowValue extends Component {
   static get propTypes() {
     return {
       member: PropTypes.shape({
         object: PropTypes.object,
       }).isRequired,
       supports: PropTypes.object.isRequired,
-      walker: PropTypes.object.isRequired,
     };
   }
 
   render() {
-    const { member, supports: { audit }, walker } = this.props;
+    const { member, supports: { audit } } = this.props;
 
     return span({
       role: "presentation",
     },
       Rep({
         ...this.props,
         defaultRep: Grip,
         cropLimit: 50,
       }),
       audit && AuditController({
         accessible: member.object,
       },
-        Badges({ walker })),
+        Badges()),
     );
   }
 }
 
 const mapStateToProps = ({ ui: { supports } }) => {
   return { supports };
 };
 
--- a/devtools/client/accessibility/components/AccessibilityTree.js
+++ b/devtools/client/accessibility/components/AccessibilityTree.js
@@ -129,22 +129,17 @@ class AccessibilityTree extends Componen
   onTextChange(accessible) {
     const { accessibles, dispatch } = this.props;
     if (accessibles.has(accessible.actorID)) {
       dispatch(fetchChildren(accessible));
     }
   }
 
   renderValue(props) {
-    const { walker } = this.props;
-
-    return AccessibilityRowValue({
-      ...props,
-      walker,
-    });
+    return AccessibilityRowValue(props);
   }
 
   /**
    * Render Accessibility panel content
    */
   render() {
     const columns = [{
       "id": "default",
--- a/devtools/client/accessibility/components/Badge.js
+++ b/devtools/client/accessibility/components/Badge.js
@@ -1,98 +1,31 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 // React
-const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const { span } = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
-
-const ToggleButton = createFactory(require("./Button").ToggleButton);
-
-const { audit, auditing, filterToggle } = require("../actions/audit");
-const { preventDefaultAndStopPropagation } = require("devtools/client/shared/events");
 
 class Badge extends Component {
   static get propTypes() {
     return {
-      active: PropTypes.bool.isRequired,
-      filterKey: PropTypes.string.isRequired,
-      dispatch: PropTypes.func.isRequired,
       label: PropTypes.string.isRequired,
       tooltip: PropTypes.string,
-      walker: PropTypes.object.isRequired,
     };
   }
 
-  constructor(props) {
-    super(props);
-
-    this.toggleFilter = this.toggleFilter.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return nextProps.active !== this.props.active;
-  }
-
-  async toggleFilter() {
-    const { dispatch, filterKey, walker, active } = this.props;
-    if (!active) {
-      dispatch(auditing(filterKey));
-      await dispatch(audit(walker, filterKey));
-    }
-
-    // We wait to dispatch filter toggle until the tree is ready to be filtered
-    // right after the audit. This is to make sure that we render an empty tree
-    // (filtered) while the audit is running.
-    dispatch(filterToggle(filterKey));
-  }
+  render() {
+    const { label, tooltip } = this.props;
 
-  onClick(e) {
-    preventDefaultAndStopPropagation(e);
-    const { mozInputSource, MOZ_SOURCE_KEYBOARD } = e.nativeEvent;
-    if (e.isTrusted && mozInputSource === MOZ_SOURCE_KEYBOARD) {
-      // Already handled by key down handler on user input.
-      return;
-    }
-
-    this.toggleFilter();
-  }
-
-  onKeyDown(e) {
-    // We explicitely handle "click" and "keydown" events this way here because
-    // there seem to be a difference in the sequence of keyboard/click events
-    // fired when Space/Enter is pressed. When Space is pressed the sequence of
-    // events is keydown->keyup->click but when Enter is pressed the sequence is
-    // keydown->click->keyup. This results in an unwanted badge click (when
-    // pressing Space) within the accessibility tree row when activating it
-    // because it gets focused before the click event is dispatched.
-    if (![" ", "Enter"].includes(e.key)) {
-      return;
-    }
-
-    preventDefaultAndStopPropagation(e);
-    this.toggleFilter();
-  }
-
-  render() {
-    const { active, label, tooltip } = this.props;
-
-    return ToggleButton({
+    return span({
       className: "audit-badge badge",
-      label,
-      active,
-      tooltip,
-      onClick: this.onClick,
-      onKeyDown: this.onKeyDown,
-    });
+      title: tooltip,
+      "aria-label": label,
+    },
+      label);
   }
 }
 
-const mapStateToProps = ({ audit: { filters } }, { filterKey }) => ({
-  active: filters[filterKey],
-});
-
-module.exports = connect(mapStateToProps)(Badge);
+module.exports = Badge;
--- a/devtools/client/accessibility/components/Badges.js
+++ b/devtools/client/accessibility/components/Badges.js
@@ -22,34 +22,30 @@ function getComponentForAuditType(type) 
 
   return auditTypeToComponentMap[type];
 }
 
 class Badges extends Component {
   static get propTypes() {
     return {
       checks: PropTypes.object,
-      walker: PropTypes.object.isRequired,
     };
   }
 
   render() {
-    const { checks, walker } = this.props;
+    const { checks } = this.props;
     if (!checks) {
       return null;
     }
 
     const items = [];
     for (const type in checks) {
       const component = getComponentForAuditType(type);
       if (checks[type] && component) {
-        items.push(component({
-          ...checks[type],
-          walker,
-        }));
+        items.push(component(checks[type]));
       }
     }
 
     if (items.length === 0) {
       return null;
     }
 
     return (
--- a/devtools/client/accessibility/components/ContrastBadge.js
+++ b/devtools/client/accessibility/components/ContrastBadge.js
@@ -8,45 +8,39 @@ const { Component, createFactory } = req
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const { L10N } = require("../utils/l10n");
 
 const { accessibility: { SCORES } } = require("devtools/shared/constants");
 
 loader.lazyGetter(this, "Badge", () => createFactory(require("./Badge")));
 
-const { FILTERS } = require("../constants");
-
 /**
 * Component for rendering a badge for contrast accessibliity check
 * failures association with a given accessibility object in the accessibility
 * tree.
 */
-
 class ContrastBadge extends Component {
   static get propTypes() {
     return {
       error: PropTypes.string,
       score: PropTypes.string,
-      walker: PropTypes.object.isRequired,
     };
   }
 
   render() {
-    const { error, score, walker } = this.props;
+    const { error, score } = this.props;
     if (error) {
       return null;
     }
 
     if (score !== SCORES.FAIL) {
       return null;
     }
 
     return Badge({
       label: L10N.getStr("accessibility.badge.contrast"),
       tooltip: L10N.getStr("accessibility.badge.contrast.tooltip"),
-      filterKey: FILTERS.CONTRAST,
-      walker,
     });
   }
 }
 
 module.exports = ContrastBadge;
--- a/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit.js
+++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit.js
@@ -1,14 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-/* global toggleRow, toggleBadge */
+/* global toggleRow, toggleFilter */
 
 const TEST_URI = `<html>
   <head>
     <meta charset="utf-8"/>
     <title>Accessibility Panel Test</title>
   </head>
   <body>
     <h1 style="color:rgba(255,0,0,0.1); background-color:rgba(255,255,255,1);">
@@ -47,36 +47,36 @@ const tests = [{
       name: `"Top level header "contrast`,
       badges: [ "contrast" ],
     }, {
       role: "heading",
       name: `"Second level header"`,
     }],
   },
 }, {
-  desc: "Click on the badge.",
+  desc: "Click on the contrast filter.",
   setup: async ({ doc }) => {
-    await toggleBadge(doc, 2, 0);
+    await toggleFilter(doc, 0);
   },
   expected: {
     tree: [{
       role: "text leaf",
       name: `"Top level header "contrast`,
       badges: [ "contrast" ],
     }, {
       role: "text leaf",
       name: `"Second level header "contrast`,
       badges: [ "contrast" ],
       selected: true,
     }],
   },
 }, {
-  desc: "Click on the badge again.",
+  desc: "Click on the contrast filter again.",
   setup: async ({ doc }) => {
-    await toggleBadge(doc, 0, 0);
+    await toggleFilter(doc, 0);
   },
   expected: {
     tree: [{
       role: "document",
       name: `"Accessibility Panel Test"`,
     }, {
       role: "heading",
       name: `"Top level header"`,
@@ -93,12 +93,13 @@ const tests = [{
       badges: [ "contrast" ],
       selected: true,
     }],
   },
 }];
 
 /**
  * Simple test that checks content of the Accessibility panel tree when one of
- * the tree rows has a "contrast" badge and auditing is activated via badge.
+ * the tree rows has a "contrast" badge and auditing is activated via toolbar
+ * filter.
  */
 addA11yPanelTestsTask(tests, TEST_URI,
-  "Test Accessibility panel tree with contrast badge audit activation.");
+  "Test Accessibility panel tree with contrast badge present.");
--- a/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_toolbar.js
+++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_toolbar.js
@@ -1,14 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-/* global toggleRow, toggleBadge, toggleFilter */
+/* global toggleRow, toggleFilter */
 
 const TEST_URI = `<html>
   <head>
     <meta charset="utf-8"/>
     <title>Accessibility Panel Test</title>
   </head>
   <body>
     <h1 style="color:rgba(255,0,0,0.1); background-color:rgba(255,255,255,1);">
@@ -53,17 +53,17 @@ const tests = [{
       role: "text leaf",
       name: `"Second level header "contrast`,
       badges: [ "contrast" ],
     }],
   },
 }, {
   desc: "Click on the filter again.",
   setup: async ({ doc }) => {
-    await toggleBadge(doc, 0, 0);
+    await toggleFilter(doc, 0);
   },
   expected: {
     tree: [{
       role: "document",
       name: `"Accessibility Panel Test"`,
     }, {
       role: "heading",
       name: `"Top level header"`,
--- a/devtools/client/accessibility/test/browser/head.js
+++ b/devtools/client/accessibility/test/browser/head.js
@@ -1,17 +1,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /* import-globals-from ../../../shared/test/shared-head.js */
 /* import-globals-from ../../../inspector/test/shared-head.js */
 
 /* global waitUntilState, gBrowser */
 /* exported addTestTab, checkTreeState, checkSidebarState, checkAuditState, selectRow,
-            toggleRow, toggleBadge, toggleFilter, addA11yPanelTestsTask, reload,
+            toggleRow, toggleFilter, addA11yPanelTestsTask, reload,
             navigate */
 
 "use strict";
 
 // Import framework's shared head.
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js",
   this);
@@ -435,32 +435,16 @@ async function toggleRow(doc, rowNumber)
 
   EventUtils.sendMouseEvent({ type: "click" }, twisty, win);
   await BrowserTestUtils.waitForCondition(() =>
     !twisty.classList.contains("devtools-throbber") &&
     expected === twisty.classList.contains("open"), "Twisty updated.");
 }
 
 /**
- * Toggle an accessibility audit badge based on its index in the badges group.
- * @param  {document} doc        panel documnent.
- * @param  {Number}   badgeIndex index of the badge to be toggled.
- */
-async function toggleBadge(doc, rowNumber, badgeIndex) {
-  const win = doc.defaultView;
-  const row = doc.querySelectorAll(".treeRow")[rowNumber];
-  const badge = row.querySelectorAll(".audit-badge.badge")[badgeIndex];
-  const expected = !badge.classList.contains("checked");
-
-  EventUtils.synthesizeMouseAtCenter(badge, {}, win);
-  await BrowserTestUtils.waitForCondition(() =>
-    expected === badge.classList.contains("checked"), "Badge updated.");
-}
-
-/**
  * Toggle an accessibility audit filter based on its index in the toolbar.
  * @param  {document} doc         panel documnent.
  * @param  {Number}   filterIndex index of the filter to be toggled.
  */
 async function toggleFilter(doc, filterIndex) {
   const win = doc.defaultView;
   const filter = doc.querySelectorAll(
     ".devtools-toolbar .badge.toggle-button")[filterIndex];
--- a/devtools/client/accessibility/test/jest/components/__snapshots__/badge.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/__snapshots__/badge.test.js.snap
@@ -1,7 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Badge component: basic render active 1`] = `"<button aria-pressed=\\"true\\" class=\\"audit-badge badge toggle-button checked\\">Contrast</button>"`;
-
-exports[`Badge component: basic render inactive 1`] = `"<button aria-pressed=\\"false\\" class=\\"audit-badge badge toggle-button\\">Contrast</button>"`;
-
-exports[`Badge component: toggle filter 1`] = `"<button aria-pressed=\\"false\\" class=\\"audit-badge badge toggle-button\\">Contrast</button>"`;
+exports[`Badge component: basic render 1`] = `"<span class=\\"audit-badge badge\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"Contrast\\">Contrast</span>"`;
--- a/devtools/client/accessibility/test/jest/components/__snapshots__/badges.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/__snapshots__/badges.test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Badges component: contrast ratio fail range render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"accessibility.badges\\"><button aria-pressed=\\"false\\" class=\\"audit-badge badge toggle-button\\" title=\\"accessibility.badge.contrast.tooltip\\">accessibility.badge.contrast</button></span>"`;
+exports[`Badges component: contrast ratio fail range render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"accessibility.badges\\"><span class=\\"audit-badge badge\\" title=\\"accessibility.badge.contrast.tooltip\\" aria-label=\\"accessibility.badge.contrast\\">accessibility.badge.contrast</span></span>"`;
 
-exports[`Badges component: contrast ratio fail render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"accessibility.badges\\"><button aria-pressed=\\"false\\" class=\\"audit-badge badge toggle-button\\" title=\\"accessibility.badge.contrast.tooltip\\">accessibility.badge.contrast</button></span>"`;
+exports[`Badges component: contrast ratio fail render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"accessibility.badges\\"><span class=\\"audit-badge badge\\" title=\\"accessibility.badge.contrast.tooltip\\" aria-label=\\"accessibility.badge.contrast\\">accessibility.badge.contrast</span></span>"`;
 
 exports[`Badges component: contrast ratio success render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"accessibility.badges\\"></span>"`;
 
 exports[`Badges component: empty checks render 1`] = `null`;
 
 exports[`Badges component: no props render 1`] = `null`;
 
 exports[`Badges component: null checks render 1`] = `null`;
--- a/devtools/client/accessibility/test/jest/components/__snapshots__/contrast-badge.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/__snapshots__/contrast-badge.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ContrastBadge component: error render 1`] = `null`;
 
-exports[`ContrastBadge component: fail render 1`] = `"<button aria-pressed=\\"false\\" class=\\"audit-badge badge toggle-button\\" title=\\"accessibility.badge.contrast.tooltip\\">accessibility.badge.contrast</button>"`;
+exports[`ContrastBadge component: fail render 1`] = `"<span class=\\"audit-badge badge\\" title=\\"accessibility.badge.contrast.tooltip\\" aria-label=\\"accessibility.badge.contrast\\">accessibility.badge.contrast</span>"`;
 
 exports[`ContrastBadge component: success large text render 1`] = `null`;
 
 exports[`ContrastBadge component: success range render 1`] = `null`;
 
 exports[`ContrastBadge component: success render 1`] = `null`;
--- a/devtools/client/accessibility/test/jest/components/badge.test.js
+++ b/devtools/client/accessibility/test/jest/components/badge.test.js
@@ -4,73 +4,31 @@
 "use strict";
 
 const { mount } = require("enzyme");
 
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
 const { setupStore } = require("devtools/client/accessibility/test/jest/helpers");
 
-const { ToggleButton } = require("devtools/client/accessibility/components/Button");
-const ConnectedBadgeClass = require("devtools/client/accessibility/components/Badge");
-const BadgeClass = ConnectedBadgeClass.WrappedComponent;
-const Badge = createFactory(ConnectedBadgeClass);
-
-const { FILTERS } = require("devtools/client/accessibility/constants");
+const BadgeClass = require("devtools/client/accessibility/components/Badge");
+const Badge = createFactory(BadgeClass);
 
 describe("Badge component:", () => {
-  const props = {
-    label: "Contrast",
-    filterKey: FILTERS.CONTRAST,
-  };
+  const label = "Contrast";
+  const tooltip = "Does not meet WCAG standards for accessible text.";
+  const props = { label, tooltip };
 
-  it("basic render inactive", () => {
+  it("basic render", () => {
     const store = setupStore();
     const wrapper = mount(Provider({ store }, Badge(props)));
     expect(wrapper.html()).toMatchSnapshot();
 
     const badge = wrapper.find(BadgeClass);
-    expect(badge.prop("active")).toBe(false);
     expect(badge.children().length).toBe(1);
-
-    const toggleButton = badge.childAt(0);
-    expect(toggleButton.type()).toBe(ToggleButton);
-    expect(toggleButton.children().length).toBe(1);
-
-    const button = toggleButton.childAt(0);
-    expect(button.is("button")).toBe(true);
-    expect(button.hasClass("audit-badge")).toBe(true);
-    expect(button.hasClass("badge")).toBe(true);
-    expect(button.hasClass("toggle-button")).toBe(true);
-    expect(button.prop("aria-pressed")).toBe(false);
-    expect(button.text()).toBe("Contrast");
-  });
+    expect(badge.find(`span[aria-label="${label}"][title="${tooltip}"]`)).toHaveLength(1);
 
-  it("basic render active", () => {
-    const store = setupStore({
-      preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true }}},
-    });
-    const wrapper = mount(Provider({ store }, Badge(props)));
-    expect(wrapper.html()).toMatchSnapshot();
-    const badge = wrapper.find(BadgeClass);
-    expect(badge.prop("active")).toBe(true);
-
-    const button = wrapper.find("button");
-    expect(button.prop("aria-pressed")).toBe(true);
-  });
-
-  it("toggle filter", () => {
-    const store = setupStore();
-    const wrapper = mount(Provider({ store }, Badge(props)));
-    expect(wrapper.html()).toMatchSnapshot();
-
-    const badgeInstance = wrapper.find(BadgeClass).instance();
-    badgeInstance.toggleFilter = jest.fn();
-    wrapper.find("button.audit-badge.badge").simulate("keydown", { key: " " });
-    expect(badgeInstance.toggleFilter.mock.calls.length).toBe(1);
-
-    wrapper.find("button.audit-badge.badge").simulate("keydown", { key: "Enter" });
-    expect(badgeInstance.toggleFilter.mock.calls.length).toBe(2);
-
-    wrapper.find("button.audit-badge.badge").simulate("click");
-    expect(badgeInstance.toggleFilter.mock.calls.length).toBe(3);
+    const badgeText = badge.childAt(0);
+    expect(badgeText.hasClass("audit-badge")).toBe(true);
+    expect(badgeText.hasClass("badge")).toBe(true);
+    expect(badgeText.text()).toBe(label);
   });
 });
--- a/devtools/client/accessibility/test/jest/components/contrast-badge.test.js
+++ b/devtools/client/accessibility/test/jest/components/contrast-badge.test.js
@@ -9,17 +9,16 @@ const { shallow, mount } = require("enzy
 const { createFactory } = require("devtools/client/shared/vendor/react");
 
 const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
 const { setupStore } = require("devtools/client/accessibility/test/jest/helpers");
 
 const Badge = require("devtools/client/accessibility/components/Badge");
 const ContrastBadgeClass = require("devtools/client/accessibility/components/ContrastBadge");
 const ContrastBadge = createFactory(ContrastBadgeClass);
-const { FILTERS } = require("devtools/client/accessibility/constants");
 
 describe("ContrastBadge component:", () => {
   const store = setupStore();
 
   it("error render", () => {
     const wrapper = shallow(ContrastBadge({ error: true }));
     expect(wrapper.html()).toMatchSnapshot();
     expect(wrapper.isEmptyRender()).toBe(true);
@@ -65,12 +64,12 @@ describe("ContrastBadge component:", () 
 
     expect(wrapper.html()).toMatchSnapshot();
     expect(wrapper.children().length).toBe(1);
     const contrastBadge = wrapper.find(ContrastBadgeClass);
     const badge = contrastBadge.childAt(0);
     expect(badge.type()).toBe(Badge);
     expect(badge.props()).toMatchObject({
       label: "accessibility.badge.contrast",
-      filterKey: FILTERS.CONTRAST,
+      tooltip: "accessibility.badge.contrast.tooltip",
     });
   });
 });