TextLabelCheck.js (6967B)
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 // React 7 const { 8 createFactory, 9 PureComponent, 10 } = require("resource://devtools/client/shared/vendor/react.mjs"); 11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 12 const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 13 14 const Check = createFactory( 15 require("resource://devtools/client/accessibility/components/Check.js") 16 ); 17 18 const { 19 A11Y_TEXT_LABEL_LINKS, 20 } = require("resource://devtools/client/accessibility/constants.js"); 21 const { 22 accessibility: { 23 AUDIT_TYPE: { TEXT_LABEL }, 24 ISSUE_TYPE: { 25 [TEXT_LABEL]: { 26 AREA_NO_NAME_FROM_ALT, 27 DIALOG_NO_NAME, 28 DOCUMENT_NO_TITLE, 29 EMBED_NO_NAME, 30 FIGURE_NO_NAME, 31 FORM_FIELDSET_NO_NAME, 32 FORM_FIELDSET_NO_NAME_FROM_LEGEND, 33 FORM_NO_NAME, 34 FORM_NO_VISIBLE_NAME, 35 FORM_OPTGROUP_NO_NAME_FROM_LABEL, 36 FRAME_NO_NAME, 37 HEADING_NO_CONTENT, 38 HEADING_NO_NAME, 39 IFRAME_NO_NAME_FROM_TITLE, 40 IMAGE_NO_NAME, 41 INTERACTIVE_NO_NAME, 42 MATHML_GLYPH_NO_NAME, 43 TOOLBAR_NO_NAME, 44 }, 45 }, 46 }, 47 } = require("resource://devtools/shared/constants.js"); 48 49 /** 50 * A map from text label issues to annotation component properties. 51 */ 52 const ISSUE_TO_ANNOTATION_MAP = { 53 [AREA_NO_NAME_FROM_ALT]: { 54 href: A11Y_TEXT_LABEL_LINKS.AREA_NO_NAME_FROM_ALT, 55 l10nId: "accessibility-text-label-issue-area", 56 args: { 57 get code() { 58 return ReactDOM.code({}, "alt"); 59 }, 60 // Note: there is no way right now to use custom elements in privileged 61 // content. We have to use something like <div> since we can't provide 62 // three args with the same name. 63 get div() { 64 return ReactDOM.code({}, "area"); 65 }, 66 // Note: there is no way right now to use custom elements in privileged 67 // content. We have to use something like <span> since we can't provide 68 // three args with the same name. 69 get span() { 70 return ReactDOM.code({}, "href"); 71 }, 72 }, 73 }, 74 [DIALOG_NO_NAME]: { 75 href: A11Y_TEXT_LABEL_LINKS.DIALOG_NO_NAME, 76 l10nId: "accessibility-text-label-issue-dialog", 77 }, 78 [DOCUMENT_NO_TITLE]: { 79 href: A11Y_TEXT_LABEL_LINKS.DOCUMENT_NO_TITLE, 80 l10nId: "accessibility-text-label-issue-document-title", 81 args: { 82 get code() { 83 return ReactDOM.code({}, "title"); 84 }, 85 }, 86 }, 87 [EMBED_NO_NAME]: { 88 href: A11Y_TEXT_LABEL_LINKS.EMBED_NO_NAME, 89 l10nId: "accessibility-text-label-issue-embed", 90 }, 91 [FIGURE_NO_NAME]: { 92 href: A11Y_TEXT_LABEL_LINKS.FIGURE_NO_NAME, 93 l10nId: "accessibility-text-label-issue-figure", 94 }, 95 [FORM_FIELDSET_NO_NAME]: { 96 href: A11Y_TEXT_LABEL_LINKS.FORM_FIELDSET_NO_NAME, 97 l10nId: "accessibility-text-label-issue-fieldset", 98 args: { 99 get code() { 100 return ReactDOM.code({}, "fieldset"); 101 }, 102 }, 103 }, 104 [FORM_FIELDSET_NO_NAME_FROM_LEGEND]: { 105 href: A11Y_TEXT_LABEL_LINKS.FORM_FIELDSET_NO_NAME_FROM_LEGEND, 106 l10nId: "accessibility-text-label-issue-fieldset-legend2", 107 args: { 108 get code() { 109 return ReactDOM.code({}, "legend"); 110 }, 111 // Note: there is no way right now to use custom elements in privileged 112 // content. We have to use something like <span> since we can't provide 113 // two args with the same name. 114 get span() { 115 return ReactDOM.code({}, "fieldset"); 116 }, 117 }, 118 }, 119 [FORM_NO_NAME]: { 120 href: A11Y_TEXT_LABEL_LINKS.FORM_NO_NAME, 121 l10nId: "accessibility-text-label-issue-form", 122 }, 123 [FORM_NO_VISIBLE_NAME]: { 124 href: A11Y_TEXT_LABEL_LINKS.FORM_NO_VISIBLE_NAME, 125 l10nId: "accessibility-text-label-issue-form-visible", 126 }, 127 [FORM_OPTGROUP_NO_NAME_FROM_LABEL]: { 128 href: A11Y_TEXT_LABEL_LINKS.FORM_OPTGROUP_NO_NAME_FROM_LABEL, 129 l10nId: "accessibility-text-label-issue-optgroup-label2", 130 args: { 131 get code() { 132 return ReactDOM.code({}, "label"); 133 }, 134 // Note: there is no way right now to use custom elements in privileged 135 // content. We have to use something like <span> since we can't provide 136 // two args with the same name. 137 get span() { 138 return ReactDOM.code({}, "optgroup"); 139 }, 140 }, 141 }, 142 [FRAME_NO_NAME]: { 143 href: A11Y_TEXT_LABEL_LINKS.FRAME_NO_NAME, 144 l10nId: "accessibility-text-label-issue-frame", 145 args: { 146 get code() { 147 return ReactDOM.code({}, "frame"); 148 }, 149 }, 150 }, 151 [HEADING_NO_CONTENT]: { 152 href: A11Y_TEXT_LABEL_LINKS.HEADING_NO_CONTENT, 153 l10nId: "accessibility-text-label-issue-heading-content", 154 }, 155 [HEADING_NO_NAME]: { 156 href: A11Y_TEXT_LABEL_LINKS.HEADING_NO_NAME, 157 l10nId: "accessibility-text-label-issue-heading", 158 }, 159 [IFRAME_NO_NAME_FROM_TITLE]: { 160 href: A11Y_TEXT_LABEL_LINKS.IFRAME_NO_NAME_FROM_TITLE, 161 l10nId: "accessibility-text-label-issue-iframe", 162 args: { 163 get code() { 164 return ReactDOM.code({}, "title"); 165 }, 166 // Note: there is no way right now to use custom elements in privileged 167 // content. We have to use something like <span> since we can't provide 168 // two args with the same name. 169 get span() { 170 return ReactDOM.code({}, "iframe"); 171 }, 172 }, 173 }, 174 [IMAGE_NO_NAME]: { 175 href: A11Y_TEXT_LABEL_LINKS.IMAGE_NO_NAME, 176 l10nId: "accessibility-text-label-issue-image", 177 }, 178 [INTERACTIVE_NO_NAME]: { 179 href: A11Y_TEXT_LABEL_LINKS.INTERACTIVE_NO_NAME, 180 l10nId: "accessibility-text-label-issue-interactive", 181 }, 182 [MATHML_GLYPH_NO_NAME]: { 183 href: A11Y_TEXT_LABEL_LINKS.MATHML_GLYPH_NO_NAME, 184 l10nId: "accessibility-text-label-issue-glyph", 185 args: { 186 get code() { 187 return ReactDOM.code({}, "alt"); 188 }, 189 // Note: there is no way right now to use custom elements in privileged 190 // content. We have to use something like <span> since we can't provide 191 // two args with the same name. 192 get span() { 193 return ReactDOM.code({}, "mglyph"); 194 }, 195 }, 196 }, 197 [TOOLBAR_NO_NAME]: { 198 href: A11Y_TEXT_LABEL_LINKS.TOOLBAR_NO_NAME, 199 l10nId: "accessibility-text-label-issue-toolbar", 200 }, 201 }; 202 203 /** 204 * Component for rendering a check for text label accessibliity check failures, 205 * warnings and best practices suggestions association with a given 206 * accessibility object in the accessibility tree. 207 */ 208 class TextLabelCheck extends PureComponent { 209 static get propTypes() { 210 return { 211 issue: PropTypes.string.isRequired, 212 score: PropTypes.string.isRequired, 213 }; 214 } 215 216 render() { 217 return Check({ 218 ...this.props, 219 getAnnotation: issue => ISSUE_TO_ANNOTATION_MAP[issue], 220 id: "accessibility-text-label-header", 221 }); 222 } 223 } 224 225 module.exports = TextLabelCheck;