constants.js (6630B)
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 const { getMdnLinkParams } = ChromeUtils.importESModule( 43 "resource://devtools/shared/mdn.mjs" 44 ); 45 46 // Used in accessible component for properties tree rendering. 47 exports.TREE_ROW_HEIGHT = 21; 48 49 // Initial sidebar width. 50 exports.SIDEBAR_WIDTH = "350px"; 51 52 // When value is updated either in the tree or sidebar. 53 exports.VALUE_FLASHING_DURATION = 500; 54 // When new row is selected, flash highlighter. 55 exports.VALUE_HIGHLIGHT_DURATION = 1000; 56 57 // If the panel width is smaller than given amount of pixels, 58 // the sidebar automatically switches from 'landscape' to 'portrait' mode. 59 exports.PORTRAIT_MODE_WIDTH = 700; 60 61 // Names for Redux actions. 62 exports.FETCH_CHILDREN = "FETCH_CHILDREN"; 63 exports.UPDATE_DETAILS = "UPDATE_DETAILS"; 64 exports.RESET = "RESET"; 65 exports.SELECT = "SELECT"; 66 exports.HIGHLIGHT = "HIGHLIGHT"; 67 exports.UNHIGHLIGHT = "UNHIGHLIGHT"; 68 exports.ENABLE = "ENABLE"; 69 exports.UPDATE_CAN_BE_DISABLED = "UPDATE_CAN_BE_DISABLED"; 70 exports.UPDATE_CAN_BE_ENABLED = "UPDATE_CAN_BE_ENABLED"; 71 exports.UPDATE_PREF = "UPDATE_PREF"; 72 exports.FILTER_TOGGLE = "FILTER_TOGGLE"; 73 exports.AUDIT = "AUDIT"; 74 exports.AUDITING = "AUDITING"; 75 exports.AUDIT_PROGRESS = "AUDIT_PROGRESS"; 76 exports.SIMULATE = "SIMULATE"; 77 exports.UPDATE_DISPLAY_TABBING_ORDER = "UPDATE_DISPLAY_TABBING_ORDER"; 78 79 // List of filters for accessibility checks. 80 exports.FILTERS = { 81 NONE: "NONE", 82 ALL: "ALL", 83 [AUDIT_TYPE.CONTRAST]: "CONTRAST", 84 [AUDIT_TYPE.KEYBOARD]: "KEYBOARD", 85 [AUDIT_TYPE.TEXT_LABEL]: "TEXT_LABEL", 86 }; 87 88 // Ordered accessible properties to be displayed by the accessible component. 89 exports.ORDERED_PROPS = [ 90 "name", 91 "role", 92 "actions", 93 "value", 94 "DOMNode", 95 "description", 96 "keyboardShortcut", 97 "childCount", 98 "indexInParent", 99 "states", 100 "relations", 101 "attributes", 102 ]; 103 104 // Accessible events (emitted by accessible front) that the accessible component 105 // listens to for a current accessible. 106 exports.ACCESSIBLE_EVENTS = [ 107 "actions-change", 108 "attributes-change", 109 "description-change", 110 "name-change", 111 "reorder", 112 "shortcut-change", 113 "states-change", 114 "text-change", 115 "value-change", 116 "index-in-parent-change", 117 ]; 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/Guides/Understanding_WCAG/Perceivable/" + 124 "Color_contrast?" + 125 getMdnLinkParams("a11y-panel-checks-color-contrast"); 126 exports.A11Y_SIMULATION_DOCUMENTATION_LINK = 127 "https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/simulation/"; 128 129 const A11Y_TEXT_LABEL_LINK_BASE = 130 "https://developer.mozilla.org/docs/Web/Accessibility/Guides/Understanding_WCAG/Text_labels_and_names?" + 131 getMdnLinkParams("a11y-panel-checks-text-label"); 132 133 const A11Y_TEXT_LABEL_LINK_IDS = { 134 [AREA_NO_NAME_FROM_ALT]: 135 "Use_alt_attribute_to_label_area_elements_that_have_the_href_attribute", 136 [DIALOG_NO_NAME]: "Dialogs_should_be_labeled", 137 [DOCUMENT_NO_TITLE]: "Documents_must_have_a_title", 138 [EMBED_NO_NAME]: "Embedded_content_must_be_labeled", 139 [FIGURE_NO_NAME]: "Figures_with_optional_captions_should_be_labeled", 140 [FORM_FIELDSET_NO_NAME]: "Fieldset_elements_must_be_labeled", 141 [FORM_FIELDSET_NO_NAME_FROM_LEGEND]: "Use_a_legend_to_label_a_fieldset", 142 [FORM_NO_NAME]: "Form_elements_must_be_labeled", 143 [FORM_NO_VISIBLE_NAME]: "Form_elements_should_have_a_visible_text_label", 144 [FORM_OPTGROUP_NO_NAME_FROM_LABEL]: 145 "Use_label_attribute_on_optgroup_elements", 146 [FRAME_NO_NAME]: "Frame_elements_must_be_labeled", 147 [HEADING_NO_NAME]: "Headings_must_be_labeled", 148 [HEADING_NO_CONTENT]: "Headings_should_have_visible_text_content", 149 [IFRAME_NO_NAME_FROM_TITLE]: "Use_title_attribute_to_describe_iframe_content", 150 [IMAGE_NO_NAME]: "Content_with_images_must_be_labeled", 151 [INTERACTIVE_NO_NAME]: "Interactive_elements_must_be_labeled", 152 [MATHML_GLYPH_NO_NAME]: "Use_alt_attribute_to_label_mglyph_elements", 153 [TOOLBAR_NO_NAME]: 154 "Toolbars_must_be_labeled_when_there_is_more_than_one_toolbar", 155 }; 156 157 const A11Y_TEXT_LABEL_LINKS = {}; 158 for (const key in A11Y_TEXT_LABEL_LINK_IDS) { 159 A11Y_TEXT_LABEL_LINKS[key] = 160 `${A11Y_TEXT_LABEL_LINK_BASE}#${A11Y_TEXT_LABEL_LINK_IDS[key]}`; 161 } 162 exports.A11Y_TEXT_LABEL_LINKS = A11Y_TEXT_LABEL_LINKS; 163 164 const A11Y_KEYBOARD_LINK_BASE = 165 "https://developer.mozilla.org/docs/Web/Accessibility/Guides/Understanding_WCAG/Keyboard?" + 166 getMdnLinkParams("a11y-panel-checks-keyboard"); 167 168 const A11Y_KEYBOARD_LINK_IDS = { 169 [FOCUSABLE_NO_SEMANTICS]: 170 "Focusable_elements_should_have_interactive_semantics", 171 [FOCUSABLE_POSITIVE_TABINDEX]: 172 "Avoid_using_tabindex_attribute_greater_than_zero", 173 [INTERACTIVE_NO_ACTION]: 174 "Interactive_elements_must_be_able_to_be_activated_using_a_keyboard", 175 [INTERACTIVE_NOT_FOCUSABLE]: "Interactive_elements_must_be_focusable", 176 [MOUSE_INTERACTIVE_ONLY]: 177 "Clickable_elements_must_be_focusable_and_should_have_interactive_semantics", 178 [NO_FOCUS_VISIBLE]: "Focusable_element_must_have_focus_styling", 179 }; 180 181 const A11Y_KEYBOARD_LINKS = {}; 182 for (const key in A11Y_KEYBOARD_LINK_IDS) { 183 A11Y_KEYBOARD_LINKS[key] = 184 `${A11Y_KEYBOARD_LINK_BASE}#${A11Y_KEYBOARD_LINK_IDS[key]}`; 185 } 186 exports.A11Y_KEYBOARD_LINKS = A11Y_KEYBOARD_LINKS; 187 188 // Lists of preference names and keys. 189 const PREFS = { 190 SCROLL_INTO_VIEW: "SCROLL_INTO_VIEW", 191 }; 192 193 exports.PREFS = PREFS; 194 exports.PREF_KEYS = { 195 [PREFS.SCROLL_INTO_VIEW]: "devtools.accessibility.scroll-into-view", 196 };