Bug 1577759 - add strings and urls for a keyboard check type for non-focusable and non-semantic clickable elements. r=gl,fluent-reviewers,flod
authorYura Zenevich <yura.zenevich@gmail.com>
Sun, 01 Sep 2019 15:55:14 +0000
changeset 491202 de24dca77618399972b7589ed854b66ccc2a7778
parent 491201 bb93809181cf38ac5bb295ee4bfe148c72106689
child 491203 af6f58a905731171e5bbd6cf746537df4e658c71
push id94252
push useryura.zenevich@gmail.com
push dateMon, 02 Sep 2019 12:58:39 +0000
treeherderautoland@de24dca77618 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl, fluent-reviewers, flod
bugs1577759
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1577759 - add strings and urls for a keyboard check type for non-focusable and non-semantic clickable elements. r=gl,fluent-reviewers,flod Depends on D44232 Differential Revision: https://phabricator.services.mozilla.com/D44233
devtools/client/accessibility/components/KeyboardCheck.js
devtools/client/accessibility/constants.js
devtools/client/locales/en-US/accessibility.ftl
--- a/devtools/client/accessibility/components/KeyboardCheck.js
+++ b/devtools/client/accessibility/components/KeyboardCheck.js
@@ -20,16 +20,17 @@ const {
   accessibility: {
     AUDIT_TYPE: { KEYBOARD },
     ISSUE_TYPE: {
       [KEYBOARD]: {
         FOCUSABLE_NO_SEMANTICS,
         FOCUSABLE_POSITIVE_TABINDEX,
         INTERACTIVE_NO_ACTION,
         INTERACTIVE_NOT_FOCUSABLE,
+        MOUSE_INTERACTIVE_ONLY,
         NO_FOCUS_VISIBLE,
       },
     },
   },
 } = require("devtools/shared/constants");
 
 /**
  * A map from text label issues to annotation component properties.
@@ -51,16 +52,20 @@ const ISSUE_TO_ANNOTATION_MAP = {
   [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",
   },
+  [MOUSE_INTERACTIVE_ONLY]: {
+    href: A11Y_KEYBOARD_LINKS.MOUSE_INTERACTIVE_ONLY,
+    l10nId: "accessibility-keyboard-issue-mouse-only",
+  },
   [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,
--- a/devtools/client/accessibility/constants.js
+++ b/devtools/client/accessibility/constants.js
@@ -7,16 +7,17 @@ const {
   accessibility: {
     AUDIT_TYPE,
     ISSUE_TYPE: {
       [AUDIT_TYPE.KEYBOARD]: {
         FOCUSABLE_NO_SEMANTICS,
         FOCUSABLE_POSITIVE_TABINDEX,
         INTERACTIVE_NO_ACTION,
         INTERACTIVE_NOT_FOCUSABLE,
+        MOUSE_INTERACTIVE_ONLY,
         NO_FOCUS_VISIBLE,
       },
       [AUDIT_TYPE.TEXT_LABEL]: {
         AREA_NO_NAME_FROM_ALT,
         DIALOG_NO_NAME,
         DOCUMENT_NO_TITLE,
         EMBED_NO_NAME,
         FIGURE_NO_NAME,
@@ -169,16 +170,18 @@ const A11Y_KEYBOARD_LINK_BASE =
 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",
+  [MOUSE_INTERACTIVE_ONLY]:
+    "Clickable_elements_must_be_focusable_and_should_have_interactive_semantics",
   [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]
   }`;
--- a/devtools/client/locales/en-US/accessibility.ftl
+++ b/devtools/client/locales/en-US/accessibility.ftl
@@ -69,8 +69,10 @@ accessibility-keyboard-issue-semantics =
 
 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>
+
+accessibility-keyboard-issue-mouse-only = Clickable elements must be focusable and should have interactive semantics. <a>Learn more</a>