diff options
Diffstat (limited to 'devtools/client/accessibility/constants.js')
-rw-r--r-- | devtools/client/accessibility/constants.js | 197 |
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", +}; |