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

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",
 };
 

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,

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,
   };
 

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) {
+    if (error || score !== SCORES.FAIL) {
-      return null;
-    }
-
-    if (score !== SCORES.FAIL) {
       return null;
     }
 

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;

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) {
+    if (error || ![BEST_PRACTICES, FAIL, WARNING].includes(score)) {
-      return null;
-    }
-
-    if (![BEST_PRACTICES, FAIL, WARNING].includes(score)) {
       return null;
     }
 

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',

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",
 };
 

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,
   };
 }

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],
     },
   },
 ];

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],
     },
   },
 ];

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>"`;
 

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>"`;

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>"`;

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 },
           ],
         },

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);
+  });
+});

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