summaryrefslogtreecommitdiffstats
path: root/devtools/client/accessibility/constants.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/accessibility/constants.js')
-rw-r--r--devtools/client/accessibility/constants.js197
1 files changed, 197 insertions, 0 deletions
diff --git a/devtools/client/accessibility/constants.js b/devtools/client/accessibility/constants.js
new file mode 100644
index 0000000000..192c5eaf8c
--- /dev/null
+++ b/devtools/client/accessibility/constants.js
@@ -0,0 +1,197 @@
+/* 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 {
+ 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,
+ FORM_FIELDSET_NO_NAME,
+ FORM_FIELDSET_NO_NAME_FROM_LEGEND,
+ FORM_NO_NAME,
+ FORM_NO_VISIBLE_NAME,
+ FORM_OPTGROUP_NO_NAME_FROM_LABEL,
+ FRAME_NO_NAME,
+ HEADING_NO_CONTENT,
+ HEADING_NO_NAME,
+ IFRAME_NO_NAME_FROM_TITLE,
+ IMAGE_NO_NAME,
+ INTERACTIVE_NO_NAME,
+ MATHML_GLYPH_NO_NAME,
+ TOOLBAR_NO_NAME,
+ },
+ },
+ },
+} = require("resource://devtools/shared/constants.js");
+
+// Used in accessible component for properties tree rendering.
+exports.TREE_ROW_HEIGHT = 21;
+
+// Initial sidebar width.
+exports.SIDEBAR_WIDTH = "350px";
+
+// When value is updated either in the tree or sidebar.
+exports.VALUE_FLASHING_DURATION = 500;
+// When new row is selected, flash highlighter.
+exports.VALUE_HIGHLIGHT_DURATION = 1000;
+
+// If the panel width is smaller than given amount of pixels,
+// the sidebar automatically switches from 'landscape' to 'portrait' mode.
+exports.PORTRAIT_MODE_WIDTH = 700;
+
+// Names for Redux actions.
+exports.FETCH_CHILDREN = "FETCH_CHILDREN";
+exports.UPDATE_DETAILS = "UPDATE_DETAILS";
+exports.RESET = "RESET";
+exports.SELECT = "SELECT";
+exports.HIGHLIGHT = "HIGHLIGHT";
+exports.UNHIGHLIGHT = "UNHIGHLIGHT";
+exports.ENABLE = "ENABLE";
+exports.UPDATE_CAN_BE_DISABLED = "UPDATE_CAN_BE_DISABLED";
+exports.UPDATE_CAN_BE_ENABLED = "UPDATE_CAN_BE_ENABLED";
+exports.UPDATE_PREF = "UPDATE_PREF";
+exports.FILTER_TOGGLE = "FILTER_TOGGLE";
+exports.AUDIT = "AUDIT";
+exports.AUDITING = "AUDITING";
+exports.AUDIT_PROGRESS = "AUDIT_PROGRESS";
+exports.SIMULATE = "SIMULATE";
+exports.UPDATE_DISPLAY_TABBING_ORDER = "UPDATE_DISPLAY_TABBING_ORDER";
+
+// List of filters for accessibility checks.
+exports.FILTERS = {
+ NONE: "NONE",
+ ALL: "ALL",
+ [AUDIT_TYPE.CONTRAST]: "CONTRAST",
+ [AUDIT_TYPE.KEYBOARD]: "KEYBOARD",
+ [AUDIT_TYPE.TEXT_LABEL]: "TEXT_LABEL",
+};
+
+// Ordered accessible properties to be displayed by the accessible component.
+exports.ORDERED_PROPS = [
+ "name",
+ "role",
+ "actions",
+ "value",
+ "DOMNode",
+ "description",
+ "keyboardShortcut",
+ "childCount",
+ "indexInParent",
+ "states",
+ "relations",
+ "attributes",
+];
+
+// Accessible events (emitted by accessible front) that the accessible component
+// listens to for a current accessible.
+exports.ACCESSIBLE_EVENTS = [
+ "actions-change",
+ "attributes-change",
+ "description-change",
+ "name-change",
+ "reorder",
+ "shortcut-change",
+ "states-change",
+ "text-change",
+ "value-change",
+ "index-in-parent-change",
+];
+
+// Telemetry name constants.
+exports.A11Y_SERVICE_DURATION =
+ "DEVTOOLS_ACCESSIBILITY_SERVICE_TIME_ACTIVE_SECONDS";
+
+// URL constants
+exports.A11Y_LEARN_MORE_LINK =
+ "https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/";
+exports.A11Y_CONTRAST_LEARN_MORE_LINK =
+ "https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Perceivable/" +
+ "Color_contrast?utm_source=devtools&utm_medium=a11y-panel-checks-color-contrast";
+exports.A11Y_SIMULATION_DOCUMENTATION_LINK =
+ "https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/simulation/";
+
+const A11Y_TEXT_LABEL_LINK_BASE =
+ "https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names" +
+ "?utm_source=devtools&utm_medium=a11y-panel-checks-text-label";
+
+const A11Y_TEXT_LABEL_LINK_IDS = {
+ [AREA_NO_NAME_FROM_ALT]:
+ "Use_alt_attribute_to_label_area_elements_that_have_the_href_attribute",
+ [DIALOG_NO_NAME]: "Dialogs_should_be_labeled",
+ [DOCUMENT_NO_TITLE]: "Documents_must_have_a_title",
+ [EMBED_NO_NAME]: "Embedded_content_must_be_labeled",
+ [FIGURE_NO_NAME]: "Figures_with_optional_captions_should_be_labeled",
+ [FORM_FIELDSET_NO_NAME]: "Fieldset_elements_must_be_labeled",
+ [FORM_FIELDSET_NO_NAME_FROM_LEGEND]: "Use_a_legend_to_label_a_fieldset",
+ [FORM_NO_NAME]: "Form_elements_must_be_labeled",
+ [FORM_NO_VISIBLE_NAME]: "Form_elements_should_have_a_visible_text_label",
+ [FORM_OPTGROUP_NO_NAME_FROM_LABEL]:
+ "Use_label_attribute_on_optgroup_elements",
+ [FRAME_NO_NAME]: "Frame_elements_must_be_labeled",
+ [HEADING_NO_NAME]: "Headings_must_be_labeled",
+ [HEADING_NO_CONTENT]: "Headings_should_have_visible_text_content",
+ [IFRAME_NO_NAME_FROM_TITLE]: "Use_title_attribute_to_describe_iframe_content",
+ [IMAGE_NO_NAME]: "Content_with_images_must_be_labeled",
+ [INTERACTIVE_NO_NAME]: "Interactive_elements_must_be_labeled",
+ [MATHML_GLYPH_NO_NAME]: "Use_alt_attribute_to_label_mglyph_elements",
+ [TOOLBAR_NO_NAME]:
+ "Toolbars_must_be_labeled_when_there_is_more_than_one_toolbar",
+};
+
+const A11Y_TEXT_LABEL_LINKS = {};
+for (const key in A11Y_TEXT_LABEL_LINK_IDS) {
+ A11Y_TEXT_LABEL_LINKS[
+ key
+ ] = `${A11Y_TEXT_LABEL_LINK_BASE}#${A11Y_TEXT_LABEL_LINK_IDS[key]}`;
+}
+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",
+ [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]}`;
+}
+exports.A11Y_KEYBOARD_LINKS = A11Y_KEYBOARD_LINKS;
+
+// Lists of preference names and keys.
+const PREFS = {
+ SCROLL_INTO_VIEW: "SCROLL_INTO_VIEW",
+};
+
+exports.PREFS = PREFS;
+exports.PREF_KEYS = {
+ [PREFS.SCROLL_INTO_VIEW]: "devtools.accessibility.scroll-into-view",
+};