mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 11:15:34 +00:00
7c45433d96
Depends on D44232 Differential Revision: https://phabricator.services.mozilla.com/D44233 --HG-- extra : moz-landing-system : lando
200 lines
6.5 KiB
JavaScript
200 lines
6.5 KiB
JavaScript
/* 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("devtools/shared/constants");
|
|
|
|
// 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.DISABLE = "DISABLE";
|
|
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";
|
|
|
|
// 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";
|
|
exports.A11Y_SERVICE_ENABLED_COUNT =
|
|
"devtools.accessibility.service_enabled_count";
|
|
|
|
// URL constants
|
|
exports.A11Y_LEARN_MORE_LINK =
|
|
"https://developer.mozilla.org/docs/Tools/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://developer.mozilla.org/docs/Tools/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",
|
|
};
|