Bug 1577759 - add strings and urls for a keyboard check type for non-focusable and non-semantic clickable elements. r=gl,fluent-reviewers,flod, a=lizzard, l10n=flod DEVEDITION_70_0b4_BUILD1 DEVEDITION_70_0b4_RELEASE FIREFOX_70_0b4_BUILD3 FIREFOX_70_0b4_RELEASE
authorYura Zenevich <yura.zenevich@gmail.com>
Sun, 01 Sep 2019 15:55:14 +0000
changeset 551632 5da3c0a0771e9c2ff102bfc5d97d9bb5bb93788e
parent 551631 e21d8263617678e0d50197408f738a59e708268a
child 551633 37f6a56042462b800aadc29681c29f1e721b3706
push id11895
push userryanvm@gmail.com
push dateThu, 05 Sep 2019 17:45:12 +0000
treeherdermozilla-beta@5da3c0a0771e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl, fluent-reviewers, flod, lizzard
bugs1577759
milestone70.0
Bug 1577759 - add strings and urls for a keyboard check type for non-focusable and non-semantic clickable elements. r=gl,fluent-reviewers,flod, a=lizzard, l10n=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>