devtools/client/accessibility/constants.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4 "use strict";
   5
   6 const {
   7   accessibility: {
   8     AUDIT_TYPE,
   9     ISSUE_TYPE: {
  10       [AUDIT_TYPE.KEYBOARD]: {
  11         FOCUSABLE_NO_SEMANTICS,
  12         FOCUSABLE_POSITIVE_TABINDEX,
  13         INTERACTIVE_NO_ACTION,
  14         INTERACTIVE_NOT_FOCUSABLE,
  15         MOUSE_INTERACTIVE_ONLY,
  16         NO_FOCUS_VISIBLE,
  17       },
  18       [AUDIT_TYPE.TEXT_LABEL]: {
  19         AREA_NO_NAME_FROM_ALT,
  20         DIALOG_NO_NAME,
  21         DOCUMENT_NO_TITLE,
  22         EMBED_NO_NAME,
  23         FIGURE_NO_NAME,
  24         FORM_FIELDSET_NO_NAME,
  25         FORM_FIELDSET_NO_NAME_FROM_LEGEND,
  26         FORM_NO_NAME,
  27         FORM_NO_VISIBLE_NAME,
  28         FORM_OPTGROUP_NO_NAME_FROM_LABEL,
  29         FRAME_NO_NAME,
  30         HEADING_NO_CONTENT,
  31         HEADING_NO_NAME,
  32         IFRAME_NO_NAME_FROM_TITLE,
  33         IMAGE_NO_NAME,
  34         INTERACTIVE_NO_NAME,
  35         MATHML_GLYPH_NO_NAME,
  36         TOOLBAR_NO_NAME,
  37       },
  38     },
  39   },
  40 } = require("resource://devtools/shared/constants.js");
  41
  42 // Used in accessible component for properties tree rendering.
  43 exports.TREE_ROW_HEIGHT = 21;
  44
  45 // Initial sidebar width.
  46 exports.SIDEBAR_WIDTH = "350px";
  47
  48 // When value is updated either in the tree or sidebar.
  49 exports.VALUE_FLASHING_DURATION = 500;
  50 // When new row is selected, flash highlighter.
  51 exports.VALUE_HIGHLIGHT_DURATION = 1000;
  52
  53 // If the panel width is smaller than given amount of pixels,
  54 // the sidebar automatically switches from 'landscape' to 'portrait' mode.
  55 exports.PORTRAIT_MODE_WIDTH = 700;
  56
  57 // Names for Redux actions.
  58 exports.FETCH_CHILDREN = "FETCH_CHILDREN";
  59 exports.UPDATE_DETAILS = "UPDATE_DETAILS";
  60 exports.RESET = "RESET";
  61 exports.SELECT = "SELECT";
  62 exports.HIGHLIGHT = "HIGHLIGHT";
  63 exports.UNHIGHLIGHT = "UNHIGHLIGHT";
  64 exports.ENABLE = "ENABLE";
  65 exports.UPDATE_CAN_BE_DISABLED = "UPDATE_CAN_BE_DISABLED";
  66 exports.UPDATE_CAN_BE_ENABLED = "UPDATE_CAN_BE_ENABLED";
  67 exports.UPDATE_PREF = "UPDATE_PREF";
  68 exports.FILTER_TOGGLE = "FILTER_TOGGLE";
  69 exports.AUDIT = "AUDIT";
  70 exports.AUDITING = "AUDITING";
  71 exports.AUDIT_PROGRESS = "AUDIT_PROGRESS";
  72 exports.SIMULATE = "SIMULATE";
  73 exports.UPDATE_DISPLAY_TABBING_ORDER = "UPDATE_DISPLAY_TABBING_ORDER";
  74
  75 // List of filters for accessibility checks.
  76 exports.FILTERS = {
  77   NONE: "NONE",
  78   ALL: "ALL",
  79   [AUDIT_TYPE.CONTRAST]: "CONTRAST",
  80   [AUDIT_TYPE.KEYBOARD]: "KEYBOARD",
  81   [AUDIT_TYPE.TEXT_LABEL]: "TEXT_LABEL",
  82 };
  83
  84 // Ordered accessible properties to be displayed by the accessible component.
  85 exports.ORDERED_PROPS = [
  86   "name",
  87   "role",
  88   "actions",
  89   "value",
  90   "DOMNode",
  91   "description",
  92   "keyboardShortcut",
  93   "childCount",
  94   "indexInParent",
  95   "states",
  96   "relations",
  97   "attributes",
  98 ];
  99
 100 // Accessible events (emitted by accessible front) that the accessible component
 101 // listens to for a current accessible.
 102 exports.ACCESSIBLE_EVENTS = [
 103   "actions-change",
 104   "attributes-change",
 105   "description-change",
 106   "name-change",
 107   "reorder",
 108   "shortcut-change",
 109   "states-change",
 110   "text-change",
 111   "value-change",
 112   "index-in-parent-change",
 113 ];
 114
 115 // Telemetry name constants.
 116 exports.A11Y_SERVICE_DURATION =
 117   "DEVTOOLS_ACCESSIBILITY_SERVICE_TIME_ACTIVE_SECONDS";
 118
 119 // URL constants
 120 exports.A11Y_LEARN_MORE_LINK =
 121   "https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/";
 122 exports.A11Y_CONTRAST_LEARN_MORE_LINK =
 123   "https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Perceivable/" +
 124   "Color_contrast?utm_source=devtools&utm_medium=a11y-panel-checks-color-contrast";
 125 exports.A11Y_SIMULATION_DOCUMENTATION_LINK =
 126   "https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/simulation/";
 127
 128 const A11Y_TEXT_LABEL_LINK_BASE =
 129   "https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names" +
 130   "?utm_source=devtools&utm_medium=a11y-panel-checks-text-label";
 131
 132 const A11Y_TEXT_LABEL_LINK_IDS = {
 133   [AREA_NO_NAME_FROM_ALT]:
 134     "Use_alt_attribute_to_label_area_elements_that_have_the_href_attribute",
 135   [DIALOG_NO_NAME]: "Dialogs_should_be_labeled",
 136   [DOCUMENT_NO_TITLE]: "Documents_must_have_a_title",
 137   [EMBED_NO_NAME]: "Embedded_content_must_be_labeled",
 138   [FIGURE_NO_NAME]: "Figures_with_optional_captions_should_be_labeled",
 139   [FORM_FIELDSET_NO_NAME]: "Fieldset_elements_must_be_labeled",
 140   [FORM_FIELDSET_NO_NAME_FROM_LEGEND]: "Use_a_legend_to_label_a_fieldset",
 141   [FORM_NO_NAME]: "Form_elements_must_be_labeled",
 142   [FORM_NO_VISIBLE_NAME]: "Form_elements_should_have_a_visible_text_label",
 143   [FORM_OPTGROUP_NO_NAME_FROM_LABEL]:
 144     "Use_label_attribute_on_optgroup_elements",
 145   [FRAME_NO_NAME]: "Frame_elements_must_be_labeled",
 146   [HEADING_NO_NAME]: "Headings_must_be_labeled",
 147   [HEADING_NO_CONTENT]: "Headings_should_have_visible_text_content",
 148   [IFRAME_NO_NAME_FROM_TITLE]: "Use_title_attribute_to_describe_iframe_content",
 149   [IMAGE_NO_NAME]: "Content_with_images_must_be_labeled",
 150   [INTERACTIVE_NO_NAME]: "Interactive_elements_must_be_labeled",
 151   [MATHML_GLYPH_NO_NAME]: "Use_alt_attribute_to_label_mglyph_elements",
 152   [TOOLBAR_NO_NAME]:
 153     "Toolbars_must_be_labeled_when_there_is_more_than_one_toolbar",
 154 };
 155
 156 const A11Y_TEXT_LABEL_LINKS = {};
 157 for (const key in A11Y_TEXT_LABEL_LINK_IDS) {
 158   A11Y_TEXT_LABEL_LINKS[key] =
 159     `${A11Y_TEXT_LABEL_LINK_BASE}#${A11Y_TEXT_LABEL_LINK_IDS[key]}`;
 160 }
 161 exports.A11Y_TEXT_LABEL_LINKS = A11Y_TEXT_LABEL_LINKS;
 162
 163 const A11Y_KEYBOARD_LINK_BASE =
 164   "https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Keyboard" +
 165   "?utm_source=devtools&utm_medium=a11y-panel-checks-keyboard";
 166
 167 const A11Y_KEYBOARD_LINK_IDS = {
 168   [FOCUSABLE_NO_SEMANTICS]:
 169     "Focusable_elements_should_have_interactive_semantics",
 170   [FOCUSABLE_POSITIVE_TABINDEX]:
 171     "Avoid_using_tabindex_attribute_greater_than_zero",
 172   [INTERACTIVE_NO_ACTION]:
 173     "Interactive_elements_must_be_able_to_be_activated_using_a_keyboard",
 174   [INTERACTIVE_NOT_FOCUSABLE]: "Interactive_elements_must_be_focusable",
 175   [MOUSE_INTERACTIVE_ONLY]:
 176     "Clickable_elements_must_be_focusable_and_should_have_interactive_semantics",
 177   [NO_FOCUS_VISIBLE]: "Focusable_element_must_have_focus_styling",
 178 };
 179
 180 const A11Y_KEYBOARD_LINKS = {};
 181 for (const key in A11Y_KEYBOARD_LINK_IDS) {
 182   A11Y_KEYBOARD_LINKS[key] =
 183     `${A11Y_KEYBOARD_LINK_BASE}#${A11Y_KEYBOARD_LINK_IDS[key]}`;
 184 }
 185 exports.A11Y_KEYBOARD_LINKS = A11Y_KEYBOARD_LINKS;
 186
 187 // Lists of preference names and keys.
 188 const PREFS = {
 189   SCROLL_INTO_VIEW: "SCROLL_INTO_VIEW",
 190 };
 191
 192 exports.PREFS = PREFS;
 193 exports.PREF_KEYS = {
 194   [PREFS.SCROLL_INTO_VIEW]: "devtools.accessibility.scroll-into-view",
 195 };