Bug 1564968 - add keyboard check section within accessibility panel sidebar checks. r=gl,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D43445

--HG--
extra : moz-landing-system : lando

devtools/client/accessibility/components/Checks.js

@@ -19,6 +19,7 @@ const ColorContrastCheck = createFactory(
   require("./ColorContrastAccessibility").ColorContrastCheck
 );
 const TextLabelCheck = createFactory(require("./TextLabelCheck"));
+const KeyboardCheck = createFactory(require("./KeyboardCheck"));
 const { L10N } = require("../utils/l10n");
 
 const {
@@ -49,6 +50,10 @@ class Checks extends Component {
     return ColorContrastCheck(contrastRatio);
   }
 
+  [AUDIT_TYPE.KEYBOARD](keyboardCheck) {
+    return KeyboardCheck(keyboardCheck);
+  }
+
   [AUDIT_TYPE.TEXT_LABEL](textLabelCheck) {
     return TextLabelCheck(textLabelCheck);
   }

devtools/client/accessibility/components/KeyboardCheck.js

@@ -0,0 +1,87 @@
+/* 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 ReactDOM = require("devtools/client/shared/vendor/react-dom-factories");
+
+const Check = createFactory(
+  require("devtools/client/accessibility/components/Check")
+);
+
+const { A11Y_KEYBOARD_LINKS } = require("../constants");
+const {
+  accessibility: {
+    AUDIT_TYPE: { KEYBOARD },
+    ISSUE_TYPE: {
+      [KEYBOARD]: {
+        FOCUSABLE_NO_SEMANTICS,
+        FOCUSABLE_POSITIVE_TABINDEX,
+        INTERACTIVE_NO_ACTION,
+        INTERACTIVE_NOT_FOCUSABLE,
+        NO_FOCUS_VISIBLE,
+      },
+    },
+  },
+} = require("devtools/shared/constants");
+
+/**
+ * A map from text label issues to annotation component properties.
+ */
+const ISSUE_TO_ANNOTATION_MAP = {
+  [FOCUSABLE_NO_SEMANTICS]: {
+    href: A11Y_KEYBOARD_LINKS.FOCUSABLE_NO_SEMANTICS,
+    l10nId: "accessibility-keyboard-issue-semantics",
+  },
+  [FOCUSABLE_POSITIVE_TABINDEX]: {
+    href: A11Y_KEYBOARD_LINKS.FOCUSABLE_POSITIVE_TABINDEX,
+    l10nId: "accessibility-keyboard-issue-tabindex",
+    args: {
+      get code() {
+        return ReactDOM.code({}, "tabindex");
+      },
+    },
+  },
+  [INTERACTIVE_NO_ACTION]: {
+    href: A11Y_KEYBOARD_LINKS.INTERACTIVE_NO_ACTION,
+    l10nId: "accessibility-keyboard-issue-action",
+  },
+  [INTERACTIVE_NOT_FOCUSABLE]: {
+    href: A11Y_KEYBOARD_LINKS.INTERACTIVE_NOT_FOCUSABLE,
+    l10nId: "accessibility-keyboard-issue-focusable",
+  },
+  [NO_FOCUS_VISIBLE]: {
+    href: A11Y_KEYBOARD_LINKS.NO_FOCUS_VISIBLE,
+    l10nId: "accessibility-keyboard-issue-focus-visible",
+  },
+};
+
+/**
+ * Component for rendering a check for text label accessibliity check failures,
+ * warnings and best practices suggestions association with a given
+ * accessibility object in the accessibility tree.
+ */
+class KeyboardCheck extends PureComponent {
+  static get propTypes() {
+    return {
+      issue: PropTypes.string.isRequired,
+      score: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    return Check({
+      ...this.props,
+      getAnnotation: issue => ISSUE_TO_ANNOTATION_MAP[issue],
+      id: "accessibility-keyboard-header",
+    });
+  }
+}
+
+module.exports = KeyboardCheck;

devtools/client/accessibility/components/moz.build

@@ -20,6 +20,7 @@ DevToolsModules(
     'ColorContrastAccessibility.js',
     'ContrastBadge.js',
     'Description.js',
+    'KeyboardCheck.js',
     'LearnMoreLink.js',
     'MainFrame.js',
     'RightSidebar.js',

devtools/client/accessibility/constants.js

@@ -7,6 +7,13 @@ const {
   accessibility: {
     AUDIT_TYPE,
     ISSUE_TYPE: {
+      [AUDIT_TYPE.KEYBOARD]: {
+        FOCUSABLE_NO_SEMANTICS,
+        FOCUSABLE_POSITIVE_TABINDEX,
+        INTERACTIVE_NO_ACTION,
+        INTERACTIVE_NOT_FOCUSABLE,
+        NO_FOCUS_VISIBLE,
+      },
       [AUDIT_TYPE.TEXT_LABEL]: {
         AREA_NO_NAME_FROM_ALT,
         DIALOG_NO_NAME,
@@ -151,6 +158,29 @@ for (const key in A11Y_TEXT_LABEL_LINK_IDS) {
 }
 exports.A11Y_TEXT_LABEL_LINKS = A11Y_TEXT_LABEL_LINKS;
 
+const A11Y_KEYBOARD_LINK_BASE =
+  "https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Keyboard" +
+  "?utm_source=devtools&utm_medium=a11y-panel-checks-keyboard";
+
+const A11Y_KEYBOARD_LINK_IDS = {
+  [FOCUSABLE_NO_SEMANTICS]:
+    "Focusable_elements_should_have_interactive_semantics",
+  [FOCUSABLE_POSITIVE_TABINDEX]:
+    "Avoid_using_tabindex_attribute_greater_than_zero",
+  [INTERACTIVE_NO_ACTION]:
+    "Interactive_elements_must_be_able_to_be_activated_using_a_keyboard",
+  [INTERACTIVE_NOT_FOCUSABLE]: "Interactive_elements_must_be_focusable",
+  [NO_FOCUS_VISIBLE]: "Focusable_element_must_have_focus_styling",
+};
+
+const A11Y_KEYBOARD_LINKS = {};
+for (const key in A11Y_KEYBOARD_LINK_IDS) {
+  A11Y_KEYBOARD_LINKS[key] = `${A11Y_KEYBOARD_LINK_BASE}#${
+    A11Y_KEYBOARD_LINK_IDS[key]
+  }`;
+}
+exports.A11Y_KEYBOARD_LINKS = A11Y_KEYBOARD_LINKS;
+
 // Lists of preference names and keys.
 const PREFS = {
   SCROLL_INTO_VIEW: "SCROLL_INTO_VIEW",

devtools/client/accessibility/test/jest/components/__snapshots__/keyboard-check.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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/keyboard-check.test.js

@@ -0,0 +1,45 @@
+/* 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 { mount } = require("enzyme");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const KeyboardCheckClass = require("devtools/client/accessibility/components/KeyboardCheck");
+const KeyboardCheck = createFactory(KeyboardCheckClass);
+
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
+const {
+  testCustomCheck,
+} = require("devtools/client/accessibility/test/jest/helpers");
+
+const {
+  accessibility: {
+    AUDIT_TYPE: { KEYBOARD },
+    ISSUE_TYPE: {
+      [KEYBOARD]: { INTERACTIVE_NO_ACTION, FOCUSABLE_NO_SEMANTICS },
+    },
+    SCORES: { FAIL, WARNING },
+  },
+} = require("devtools/shared/constants");
+
+describe("KeyboardCheck component:", () => {
+  const testProps = [
+    { score: FAIL, issue: INTERACTIVE_NO_ACTION },
+    { score: WARNING, issue: FOCUSABLE_NO_SEMANTICS },
+  ];
+
+  for (const props of testProps) {
+    it(`${props.score} render`, () => {
+      const wrapper = mount(
+        LocalizationProvider({ bundles: [] }, KeyboardCheck(props))
+      );
+
+      const keyboardCheck = wrapper.find(KeyboardCheckClass);
+      testCustomCheck(keyboardCheck, props);
+    });
+  }
+});

devtools/client/locales/en-US/accessibility.ftl

@@ -8,6 +8,8 @@ accessibility-learn-more = Learn more
 
 accessibility-text-label-header = Text Labels and Names
 
+accessibility-keyboard-header = Keyboard
+
 ## Text entries that are used as text alternative for icons that depict accessibility isses.
 
 accessibility-warning =
@@ -58,3 +60,17 @@ accessibility-text-label-issue-interactive = Interactive elements must be labele
 accessibility-text-label-issue-optgroup-label2 = Use a <code>label</code> attribute to label an <span>optgroup</span>. <a>Learn more</a>
 
 accessibility-text-label-issue-toolbar = Toolbars must be labeled when there is more than one toolbar. <a>Learn more</a>
+
+## Text entries for a paragraph used in the accessibility panel sidebar's checks section
+## that describe that currently selected accessible object has a keyboard accessibility
+## issue.
+
+accessibility-keyboard-issue-semantics = Focusable elements should have interactive semantics. <a>Learn more</a>
+
+accessibility-keyboard-issue-tabindex = Avoid using <code>tabindex</code> attribute greater than zero. <a>Learn more</a>
+
+accessibility-keyboard-issue-action = Interactive elements must be able to be activated using a keyboard. <a>Learn more</a>
+
+accessibility-keyboard-issue-focusable = Interactive elements must be focusable. <a>Learn more</a>
+
+accessibility-keyboard-issue-focus-visible = Focusable element may be missing focus styling. <a>Learn more</a>