Bug 1564968 - add keyboard audit filter/badge to the accessibility panel. r=gl

Differential Revision: https://phabricator.services.mozilla.com/D43446 --HG-- rename : devtools/client/accessibility/components/TextLabelBadge.js => devtools/client/accessibility/components/KeyboardBadge.js extra : moz-landing-system : lando
2019-08-27 23:37:54 +00:00 · 2019-08-27 23:37:54 +00:00 · c094bf25b6
--- a/devtools/client/accessibility/components/AccessibilityTreeFilter.js
+++ b/devtools/client/accessibility/components/AccessibilityTreeFilter.js
@ -44,6 +44,7 @@ const FILTER_LABELS = {
  [FILTERS.NONE]: "accessibility.filter.none",
  [FILTERS.ALL]: "accessibility.filter.all2",
  [FILTERS.CONTRAST]: "accessibility.filter.contrast",
+  [FILTERS.KEYBOARD]: "accessibility.filter.keyboard",
  [FILTERS.TEXT_LABEL]: "accessibility.filter.textLabel",
 };

--- a/devtools/client/accessibility/components/AuditFilter.js
+++ b/devtools/client/accessibility/components/AuditFilter.js
@ -26,6 +26,10 @@ const AUDIT_TYPE_TO_FILTER = {
    filterKey: FILTERS.CONTRAST,
    validator: validateCheck,
  },
+  [AUDIT_TYPE.KEYBOARD]: {
+    filterKey: FILTERS.KEYBOARD,
+    validator: validateCheck,
+  },
  [AUDIT_TYPE.TEXT_LABEL]: {
    filterKey: FILTERS.TEXT_LABEL,
    validator: validateCheck,
--- a/devtools/client/accessibility/components/Badges.js
+++ b/devtools/client/accessibility/components/Badges.js
@ -21,6 +21,10 @@ loader.lazyGetter(this, "ContrastBadge", () =>
  createFactory(require("./ContrastBadge"))
 );

+loader.lazyGetter(this, "KeyboardBadge", () =>
+  createFactory(require("./KeyboardBadge"))
+);
+
 loader.lazyGetter(this, "TextLabelBadge", () =>
  createFactory(require("./TextLabelBadge"))
 );
@ -28,6 +32,7 @@ loader.lazyGetter(this, "TextLabelBadge", () =>
 function getComponentForAuditType(type) {
  const auditTypeToComponentMap = {
    [AUDIT_TYPE.CONTRAST]: ContrastBadge,
+    [AUDIT_TYPE.KEYBOARD]: KeyboardBadge,
    [AUDIT_TYPE.TEXT_LABEL]: TextLabelBadge,
  };

--- a/devtools/client/accessibility/components/ContrastBadge.js
+++ b/devtools/client/accessibility/components/ContrastBadge.js
@ -5,8 +5,8 @@

 // React
 const {
-  Component,
  createFactory,
+  PureComponent,
 } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");

@ -23,7 +23,7 @@ loader.lazyGetter(this, "Badge", () => createFactory(require("./Badge")));
 * failures association with a given accessibility object in the accessibility
 * tree.
 */
-class ContrastBadge extends Component {
+class ContrastBadge extends PureComponent {
  static get propTypes() {
    return {
      error: PropTypes.string,
@ -33,11 +33,7 @@ class ContrastBadge extends Component {

  render() {
    const { error, score } = this.props;
-    if (error) {
-      return null;
-    }
-
-    if (score !== SCORES.FAIL) {
+    if (error || score !== SCORES.FAIL) {
      return null;
    }

--- a/devtools/client/accessibility/components/KeyboardBadge.js
+++ b/devtools/client/accessibility/components/KeyboardBadge.js
@ -0,0 +1,49 @@
+/* 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 {
+  createFactory,
+  PureComponent,
+} = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const { L10N } = require("../utils/l10n");
+
+const {
+  accessibility: {
+    SCORES: { BEST_PRACTICES, FAIL, WARNING },
+  },
+} = require("devtools/shared/constants");
+
+loader.lazyGetter(this, "Badge", () => createFactory(require("./Badge")));
+
+/**
+ * Component for rendering a badge for keyboard accessibliity check failures
+ * association with a given accessibility object in the accessibility tree.
+ */
+class KeyboardBadge extends PureComponent {
+  static get propTypes() {
+    return {
+      error: PropTypes.string,
+      score: PropTypes.string,
+    };
+  }
+
+  render() {
+    const { error, score } = this.props;
+    if (error || ![BEST_PRACTICES, FAIL, WARNING].includes(score)) {
+      return null;
+    }
+
+    return Badge({
+      label: L10N.getStr("accessibility.badge.keyboard"),
+      tooltip: L10N.getStr("accessibility.badge.keyboard.tooltip"),
+    });
+  }
+}
+
+module.exports = KeyboardBadge;
--- a/devtools/client/accessibility/components/TextLabelBadge.js
+++ b/devtools/client/accessibility/components/TextLabelBadge.js
@ -6,8 +6,8 @@

 // React
 const {
-  Component,
  createFactory,
+  PureComponent,
 } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");

@ -26,7 +26,7 @@ loader.lazyGetter(this, "Badge", () => createFactory(require("./Badge")));
 * failures association with a given accessibility object in the accessibility
 * tree.
 */
-class TextLabelBadge extends Component {
+class TextLabelBadge extends PureComponent {
  static get propTypes() {
    return {
      error: PropTypes.string,
@ -36,11 +36,7 @@ class TextLabelBadge extends Component {

  render() {
    const { error, score } = this.props;
-    if (error) {
-      return null;
-    }
-
-    if (![BEST_PRACTICES, FAIL, WARNING].includes(score)) {
+    if (error || ![BEST_PRACTICES, FAIL, WARNING].includes(score)) {
      return null;
    }

--- a/devtools/client/accessibility/components/moz.build
+++ b/devtools/client/accessibility/components/moz.build
@ -20,6 +20,7 @@ DevToolsModules(
    'ColorContrastAccessibility.js',
    'ContrastBadge.js',
    'Description.js',
+    'KeyboardBadge.js',
    'KeyboardCheck.js',
    'LearnMoreLink.js',
    'MainFrame.js',
--- a/devtools/client/accessibility/constants.js
+++ b/devtools/client/accessibility/constants.js
@ -75,6 +75,7 @@ exports.FILTERS = {
  NONE: "NONE",
  ALL: "ALL",
  [AUDIT_TYPE.CONTRAST]: "CONTRAST",
+  [AUDIT_TYPE.KEYBOARD]: "KEYBOARD",
  [AUDIT_TYPE.TEXT_LABEL]: "TEXT_LABEL",
 };

--- a/devtools/client/accessibility/reducers/audit.js
+++ b/devtools/client/accessibility/reducers/audit.js
@ -25,6 +25,7 @@ function getInitialState() {
    filters: {
      [FILTERS.ALL]: false,
      [FILTERS.CONTRAST]: false,
+      [FILTERS.KEYBOARD]: false,
      [FILTERS.TEXT_LABEL]: false,
    },
    auditing: [],
@ -39,6 +40,7 @@ function allActiveFilters() {
  return {
    [FILTERS.ALL]: true,
    [FILTERS.CONTRAST]: true,
+    [FILTERS.KEYBOARD]: true,
    [FILTERS.TEXT_LABEL]: true,
  };
 }
--- a/devtools/client/accessibility/test/browser/browser_accessibility_panel_toolbar_checks.js
+++ b/devtools/client/accessibility/test/browser/browser_accessibility_panel_toolbar_checks.js
@ -26,7 +26,7 @@ const tests = [
  {
    desc: "Check initial state.",
    expected: {
-      activeToolbarFilters: [true, false, false, false],
+      activeToolbarFilters: [true, false, false, false, false],
    },
  },
  {
@ -35,7 +35,7 @@ const tests = [
      await toggleMenuItem(doc, 0, 1);
    },
    expected: {
-      activeToolbarFilters: [false, true, true, true],
+      activeToolbarFilters: [false, true, true, true, true],
    },
  },
  {
@ -44,7 +44,7 @@ const tests = [
      await toggleMenuItem(doc, 0, 1);
    },
    expected: {
-      activeToolbarFilters: [true, false, false, false],
+      activeToolbarFilters: [true, false, false, false, false],
    },
  },
  {
@ -53,7 +53,7 @@ const tests = [
      await toggleMenuItem(doc, 0, 2);
    },
    expected: {
-      activeToolbarFilters: [false, false, true, false],
+      activeToolbarFilters: [false, false, true, false, false],
    },
  },
  {
@ -62,7 +62,7 @@ const tests = [
      await toggleMenuItem(doc, 0, 2);
    },
    expected: {
-      activeToolbarFilters: [true, false, false, false],
+      activeToolbarFilters: [true, false, false, false, false],
    },
  },
  {
@ -71,7 +71,7 @@ const tests = [
      await toggleMenuItem(doc, 0, 2);
    },
    expected: {
-      activeToolbarFilters: [false, false, true, false],
+      activeToolbarFilters: [false, false, true, false, false],
    },
  },
  {
@ -80,7 +80,16 @@ const tests = [
      await toggleMenuItem(doc, 0, 3);
    },
    expected: {
-      activeToolbarFilters: [false, true, true, true],
+      activeToolbarFilters: [false, false, true, true, false],
+    },
+  },
+  {
+    desc: "Toggle third custom filter to activate.",
+    setup: async ({ doc }) => {
+      await toggleMenuItem(doc, 0, 4);
+    },
+    expected: {
+      activeToolbarFilters: [false, true, true, true, true],
    },
  },
  {
@ -89,7 +98,7 @@ const tests = [
      await toggleMenuItem(doc, 0, 0);
    },
    expected: {
-      activeToolbarFilters: [true, false, false, false],
+      activeToolbarFilters: [true, false, false, false, false],
    },
  },
 ];
--- a/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_toolbar.js
+++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_toolbar.js
@ -40,7 +40,7 @@ const tests = [
          selected: true,
        },
      ],
-      activeToolbarFilters: [true, false, false, false],
+      activeToolbarFilters: [true, false, false, false, false],
    },
  },
  {
@ -62,7 +62,7 @@ const tests = [
          badges: ["contrast"],
        },
      ],
-      activeToolbarFilters: [false, true, true, true],
+      activeToolbarFilters: [false, true, true, true, true],
    },
  },
  {
@ -96,7 +96,7 @@ const tests = [
          badges: ["contrast"],
        },
      ],
-      activeToolbarFilters: [true, false, false, false],
+      activeToolbarFilters: [true, false, false, false, false],
    },
  },
 ];
--- a/devtools/client/accessibility/test/jest/components/snapshots/accessibility-tree-filter.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/snapshots/accessibility-tree-filter.test.js.snap
@ -20,11 +20,11 @@ exports[`AccessibilityTreeFilter component: render filters after state changes 3

 exports[`AccessibilityTreeFilter component: render filters after state changes 4`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">accessibility.filter.all2</button></div>"`;

-exports[`AccessibilityTreeFilter component: render filters after state changes 5`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">accessibility.filter.textLabel</button></div>"`;
+exports[`AccessibilityTreeFilter component: render filters after state changes 5`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">accessibility.filter.keyboard, accessibility.filter.textLabel</button></div>"`;

-exports[`AccessibilityTreeFilter component: render filters after state changes 6`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">accessibility.filter.textLabel</button></div>"`;
+exports[`AccessibilityTreeFilter component: render filters after state changes 6`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">accessibility.filter.keyboard, accessibility.filter.textLabel</button></div>"`;

-exports[`AccessibilityTreeFilter component: render filters after state changes 7`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">accessibility.filter.textLabel</button></div>"`;
+exports[`AccessibilityTreeFilter component: render filters after state changes 7`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">accessibility.filter.keyboard, accessibility.filter.textLabel</button></div>"`;

 exports[`AccessibilityTreeFilter component: render filters after state changes 8`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">accessibility.filter.all2</button></div>"`;

--- a/devtools/client/accessibility/test/jest/components/snapshots/keyboard-badge.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/snapshots/keyboard-badge.test.js.snap
@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KeyboardBadge component: error render 1`] = `null`;
+
+exports[`KeyboardBadge component: fail render 1`] = `"<span class=\\"audit-badge badge\\" title=\\"accessibility.badge.keyboard.tooltip\\" aria-label=\\"accessibility.badge.keyboard\\">accessibility.badge.keyboard</span>"`;
+
+exports[`KeyboardBadge component: warning render 1`] = `"<span class=\\"audit-badge badge\\" title=\\"accessibility.badge.keyboard.tooltip\\" aria-label=\\"accessibility.badge.keyboard\\">accessibility.badge.keyboard</span>"`;
--- 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 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: 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 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: 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 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>"`;
--- a/devtools/client/accessibility/test/jest/components/accessibility-tree-filter.test.js
+++ b/devtools/client/accessibility/test/jest/components/accessibility-tree-filter.test.js
@ -82,6 +82,11 @@ describe("AccessibilityTreeFilter component:", () => {
          disabled: false,
          text: "accessibility.filter.contrast",
        },
+        {
+          active: false,
+          disabled: false,
+          text: "accessibility.filter.keyboard",
+        },
        {
          active: false,
          disabled: false,
@ -98,6 +103,7 @@ describe("AccessibilityTreeFilter component:", () => {
          filters: {
            [FILTERS.ALL]: true,
            [FILTERS.CONTRAST]: true,
+            [FILTERS.KEYBOARD]: true,
            [FILTERS.TEXT_LABEL]: true,
          },
          auditing: [],
@ -112,6 +118,7 @@ describe("AccessibilityTreeFilter component:", () => {
        { active: true, disabled: false },
        { active: true, disabled: false },
        { active: true, disabled: false },
+        { active: true, disabled: false },
      ],
    });
  });
@ -144,6 +151,7 @@ describe("AccessibilityTreeFilter component:", () => {
          filters: {
            [FILTERS.ALL]: false,
            [FILTERS.CONTRAST]: false,
+            [FILTERS.KEYBOARD]: false,
            [FILTERS.TEXT_LABEL]: false,
          },
          auditing: [FILTERS.CONTRAST],
@ -158,6 +166,7 @@ describe("AccessibilityTreeFilter component:", () => {
        { active: false, disabled: false },
        { active: false, disabled: true },
        { active: false, disabled: false },
+        { active: false, disabled: false },
      ],
    });
  });
@ -186,6 +195,7 @@ describe("AccessibilityTreeFilter component:", () => {
          filters: {
            [FILTERS.ALL]: false,
            [FILTERS.CONTRAST]: true,
+            [FILTERS.KEYBOARD]: false,
            [FILTERS.TEXT_LABEL]: false,
          },
          auditing: [FILTERS.CONTRAST],
@ -200,6 +210,7 @@ describe("AccessibilityTreeFilter component:", () => {
        { active: false, disabled: false },
        { active: true, disabled: true },
        { active: false, disabled: false },
+        { active: false, disabled: false },
      ],
    });
  });
@ -226,6 +237,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: false },
            { active: false, disabled: false },
            { active: false, disabled: false },
+            { active: false, disabled: false },
          ],
        },
      },
@ -240,6 +252,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: true },
            { active: false, disabled: true },
            { active: false, disabled: true },
+            { active: false, disabled: true },
          ],
        },
      },
@ -254,6 +267,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: false },
            { active: false, disabled: false },
            { active: false, disabled: false },
+            { active: false, disabled: false },
          ],
        },
      },
@ -268,6 +282,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: true, disabled: false },
            { active: true, disabled: false },
            { active: true, disabled: false },
+            { active: true, disabled: false },
          ],
        },
      },
@ -282,6 +297,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: false },
            { active: false, disabled: false },
            { active: true, disabled: false },
+            { active: true, disabled: false },
          ],
        },
      },
@ -296,6 +312,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: false },
            { active: false, disabled: true },
            { active: true, disabled: false },
+            { active: true, disabled: false },
          ],
        },
      },
@ -310,6 +327,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: false },
            { active: false, disabled: false },
            { active: true, disabled: false },
+            { active: true, disabled: false },
          ],
        },
      },
@ -324,6 +342,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: true, disabled: false },
            { active: true, disabled: false },
            { active: true, disabled: false },
+            { active: true, disabled: false },
          ],
        },
      },
@ -338,6 +357,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: false },
            { active: false, disabled: false },
            { active: false, disabled: false },
+            { active: false, disabled: false },
          ],
        },
      },
@ -351,6 +371,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: true, disabled: true },
            { active: false, disabled: false },
            { active: false, disabled: false },
+            { active: false, disabled: false },
            { active: false, disabled: true },
          ],
        },
@ -366,6 +387,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: false },
            { active: false, disabled: false },
            { active: false, disabled: false },
+            { active: false, disabled: false },
          ],
        },
      },
@ -379,6 +401,7 @@ describe("AccessibilityTreeFilter component:", () => {
            { active: false, disabled: false },
            { active: false, disabled: false },
            { active: false, disabled: false },
+            { active: false, disabled: false },
            { active: true, disabled: false },
          ],
        },
--- a/devtools/client/accessibility/test/jest/components/keyboard-badge.test.js
+++ b/devtools/client/accessibility/test/jest/components/keyboard-badge.test.js
@ -0,0 +1,71 @@
+/* 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";
+
+const { shallow, 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 Badge = require("devtools/client/accessibility/components/Badge");
+const KeyboardBadgeClass = require("devtools/client/accessibility/components/KeyboardBadge");
+const KeyboardBadge = createFactory(KeyboardBadgeClass);
+const {
+  accessibility: { SCORES },
+} = require("devtools/shared/constants");
+
+function testBadge(wrapper) {
+  expect(wrapper.html()).toMatchSnapshot();
+  expect(wrapper.children().length).toBe(1);
+  const keyboardBadge = wrapper.find(KeyboardBadgeClass);
+  const badge = keyboardBadge.childAt(0);
+  expect(badge.type()).toBe(Badge);
+  expect(badge.props()).toMatchObject({
+    label: "accessibility.badge.keyboard",
+    tooltip: "accessibility.badge.keyboard.tooltip",
+  });
+}
+
+describe("KeyboardBadge component:", () => {
+  const store = setupStore();
+
+  it("error render", () => {
+    const wrapper = shallow(KeyboardBadge({ error: true }));
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
+  it("fail render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        KeyboardBadge({
+          score: SCORES.FAIL,
+        })
+      )
+    );
+
+    testBadge(wrapper);
+  });
+
+  it("warning render", () => {
+    const wrapper = mount(
+      Provider(
+        { store },
+        KeyboardBadge({
+          score: SCORES.WARNING,
+        })
+      )
+    );
+
+    testBadge(wrapper);
+  });
+});
--- a/devtools/client/locales/en-US/accessibility.properties
+++ b/devtools/client/locales/en-US/accessibility.properties
@ -181,6 +181,11 @@ accessibility.filter.contrast=Contrast
 # filters the tree based on text label and name accessibility failures within it.
 accessibility.filter.textLabel=Text Labels

+# LOCALIZATION NOTE (accessibility.filter.keyboard): A title text for the filter
+# that is rendered within the accessibility panel toolbar for a menu item that
+# filters the tree based on keyboard accessibility failures within it.
+accessibility.filter.keyboard=Keyboard
+
 # LOCALIZATION NOTE (accessibility.badge.contrast): A title text for the badge
 # that is rendered within the accessible row in the accessibility tree for a
 # given accessible object that does not satisfy the WCAG guideline for colour
@ -193,6 +198,12 @@ accessibility.badge.contrast=contrast
 # WCAG guideline for colour contrast.
 accessibility.badge.contrast.warning=contrast warning

+# LOCALIZATION NOTE (accessibility.badge.keyboard): A title text for the
+# badge that is rendered within the accessible row in the accessibility tree for
+# a given accessible object that does not satisfy the WCAG guideline for
+# keyboard accessibility.
+accessibility.badge.keyboard=keyboard
+
 # LOCALIZATION NOTE (accessibility.badge.textLabel): A title text for the
 # badge that is rendered within the accessible row in the accessibility tree for
 # a given accessible object that does not satisfy the WCAG guideline for text
@ -205,6 +216,12 @@ accessibility.badge.textLabel=text label
 # satisfy the WCAG guideline for colour contrast.
 accessibility.badge.contrast.tooltip=Does not meet WCAG standards for accessible text.

+# LOCALIZATION NOTE (accessibility.badge.keyboard.tooltip): A title text
+# for the badge tooltip that is rendered on mouse hover over the badge in the
+# accessible row in the accessibility tree for a given accessible object that
+# does not satisfy the WCAG guideline for keyboard accessibility.
+accessibility.badge.keyboard.tooltip=Does not meet WCAG standards for keyboard accessibility.
+
 # LOCALIZATION NOTE (accessibility.badge.textLabel.tooltip): A title text
 # for the badge tooltip that is rendered on mouse hover over the badge in the
 # accessible row in the accessibility tree for a given accessible object that