@surea11y/core 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +88 -7
- package/README.md +19 -3
- package/bin/surea11y-core.js +0 -0
- package/docs/API_STABILITY.md +2 -2
- package/docs/ARIA_DEPRECATION.md +95 -0
- package/docs/ENGINE_OPTIONS.md +14 -10
- package/docs/I18N.md +176 -20
- package/docs/INTEGRATION.md +28 -6
- package/docs/LIMITATIONS.md +1 -1
- package/docs/OUTPUT_SCHEMA.md +13 -3
- package/docs/REPORT.md +2 -0
- package/docs/RULE_AUTHORING.md +53 -0
- package/docs/RULE_CATALOG.md +6 -6
- package/docs/TROUBLESHOOTING.md +2 -2
- package/package.json +8 -1
- package/src/checks/automatic/aria-allowed-attr.js +661 -99
- package/src/checks/automatic/aria-allowed-role.js +14 -16
- package/src/checks/automatic/aria-braille-equivalent.js +17 -19
- package/src/checks/automatic/aria-conditional-attr.js +17 -19
- package/src/checks/automatic/aria-deprecated-role.js +122 -41
- package/src/checks/automatic/aria-hidden-body.js +2 -9
- package/src/checks/automatic/aria-hidden-focus.js +99 -18
- package/src/checks/automatic/aria-prohibited-attr.js +54 -55
- package/src/checks/automatic/aria-prohibited-children.js +26 -26
- package/src/checks/automatic/aria-required-attr.js +14 -17
- package/src/checks/automatic/aria-required-children.js +17 -20
- package/src/checks/automatic/aria-required-parent.js +17 -20
- package/src/checks/automatic/aria-roles-valid.js +66 -27
- package/src/checks/automatic/aria-valid-attr-value.js +18 -21
- package/src/checks/automatic/aria-valid-attr.js +14 -17
- package/src/checks/automatic/autocomplete-valid.js +52 -18
- package/src/checks/automatic/avoid-inline-spacing.js +192 -34
- package/src/checks/automatic/binary-control-name-present.js +30 -24
- package/src/checks/automatic/button-name-present.js +73 -45
- package/src/checks/automatic/canvas-text-alternative-present.js +15 -8
- package/src/checks/automatic/combobox-name-present.js +23 -18
- package/src/checks/automatic/css-orientation-lock.js +22 -22
- package/src/checks/automatic/definition-list-children-valid.js +18 -21
- package/src/checks/automatic/deprecated-elements-not-used.js +14 -16
- package/src/checks/automatic/dialog-name-present.js +24 -19
- package/src/checks/automatic/dlitem-parent-valid.js +15 -17
- package/src/checks/automatic/duplicate-id-aria.js +45 -37
- package/src/checks/automatic/form-control-programmatic-label-present.js +48 -4
- package/src/checks/automatic/form-control-single-label.js +109 -43
- package/src/checks/automatic/html-xml-lang-mismatch.js +2 -9
- package/src/checks/automatic/iframe-focusable-content.js +29 -31
- package/src/checks/automatic/iframe-name-present.js +15 -17
- package/src/checks/automatic/iframe-title-unique.js +18 -23
- package/src/checks/automatic/img-alt-present.js +16 -9
- package/src/checks/automatic/input-image-alt-present.js +99 -48
- package/src/checks/automatic/label-in-name.js +102 -33
- package/src/checks/automatic/language-page-present.js +5 -1
- package/src/checks/automatic/link-in-text-block.js +19 -21
- package/src/checks/automatic/link-name-present.js +75 -47
- package/src/checks/automatic/list-children-valid.js +15 -17
- package/src/checks/automatic/listbox-name-present.js +23 -18
- package/src/checks/automatic/listitem-parent-valid.js +14 -17
- package/src/checks/automatic/menuitem-name-present.js +24 -19
- package/src/checks/automatic/meta-refresh-no-exceptions.js +44 -18
- package/src/checks/automatic/meta-refresh-timing-absent.js +44 -21
- package/src/checks/automatic/meta-viewport-zoom-enabled.js +51 -32
- package/src/checks/automatic/meter-name-present.js +24 -19
- package/src/checks/automatic/nested-interactive-controls-absent.js +179 -51
- package/src/checks/automatic/object-text-alternative-present.js +14 -7
- package/src/checks/automatic/option-name-present.js +24 -19
- package/src/checks/automatic/progressbar-name-present.js +27 -22
- package/src/checks/automatic/searchbox-name-present.js +27 -18
- package/src/checks/automatic/server-side-image-map-absent.js +15 -18
- package/src/checks/automatic/slider-name-present.js +26 -19
- package/src/checks/automatic/spinbutton-name-present.js +27 -18
- package/src/checks/automatic/summary-name-present.js +24 -19
- package/src/checks/automatic/tab-name-present.js +24 -19
- package/src/checks/automatic/table-headers-attr-valid.js +15 -17
- package/src/checks/automatic/table-th-has-data-cells.js +82 -25
- package/src/checks/automatic/target-size-minimum.js +104 -81
- package/src/checks/automatic/td-has-header.js +15 -20
- package/src/checks/automatic/textbox-name-present.js +23 -18
- package/src/checks/automatic/tooltip-name-present.js +24 -19
- package/src/checks/automatic/treeitem-name-present.js +24 -19
- package/src/checks/automatic/valid-lang.js +31 -20
- package/src/checks/manual/accesskeys-manual.js +18 -19
- package/src/checks/manual/aria-checked-state-mismatch-manual.js +19 -22
- package/src/checks/{automatic/bypass-blocks-present.js → manual/bypass-blocks-present-manual.js} +98 -44
- package/src/checks/manual/empty-heading-manual.js +15 -17
- package/src/checks/manual/empty-table-header-manual.js +27 -30
- package/src/checks/manual/form-control-programmatic-label-quality-manual.js +2 -9
- package/src/checks/manual/heading-order-manual.js +17 -22
- package/src/checks/manual/image-redundant-alt-manual.js +14 -17
- package/src/checks/manual/input-image-alt-decorative-manual.js +24 -0
- package/src/checks/manual/label-title-only-manual.js +15 -17
- package/src/checks/manual/landmark-banner-is-top-level-manual.js +25 -39
- package/src/checks/manual/landmark-contentinfo-is-top-level-manual.js +21 -27
- package/src/checks/manual/landmark-main-is-top-level-manual.js +14 -17
- package/src/checks/manual/landmark-no-duplicate-banner-manual.js +2 -7
- package/src/checks/manual/landmark-no-duplicate-contentinfo-manual.js +2 -7
- package/src/checks/manual/landmark-no-duplicate-main-manual.js +2 -7
- package/src/checks/manual/landmark-one-main-manual.js +2 -9
- package/src/checks/manual/landmark-unique-manual.js +22 -27
- package/src/checks/manual/link-name-quality-manual.js +15 -17
- package/src/checks/manual/meta-viewport-large-manual.js +14 -17
- package/src/checks/manual/mouse-only-event-handlers-manual.js +17 -19
- package/src/checks/manual/page-has-heading-one-manual.js +2 -9
- package/src/checks/manual/presentation-role-conflict-manual.js +19 -21
- package/src/checks/manual/region-manual.js +13 -6
- package/src/checks/manual/scope-attr-valid-manual.js +14 -17
- package/src/checks/manual/skip-link-manual.js +39 -47
- package/src/checks/manual/tabindex-manual.js +14 -17
- package/src/checks/manual/table-duplicate-name-manual.js +14 -17
- package/src/core.js +8818 -4330
- package/src/report.js +14 -0
- package/src/sarif.js +2 -2
- package/surea11y.browser.js +4023 -3911
- package/surea11y.i18n.de.js +22 -0
- package/surea11y.i18n.es.js +22 -0
- package/surea11y.i18n.fr.js +22 -0
|
@@ -5,31 +5,36 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @check avoid-inline-spacing
|
|
7
7
|
* @atomic true
|
|
8
|
-
* @summary Inline style must not force text
|
|
8
|
+
* @summary Inline style must not force text spacing below the WCAG metric
|
|
9
9
|
* @standard WCAG 2.2
|
|
10
10
|
* @sc 1.4.12
|
|
11
11
|
* @applicability
|
|
12
|
-
* Applies to
|
|
13
|
-
* line-height, letter-spacing
|
|
12
|
+
* Applies to a rendered element with visible text of its own whose style
|
|
13
|
+
* attribute declares line-height, letter-spacing or word-spacing as
|
|
14
|
+
* `!important` with a real value. A CSS-wide keyword (inherit, initial,
|
|
15
|
+
* unset, revert) specifies no spacing of its own and is out of scope.
|
|
14
16
|
* @expectation
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* defeats that override (inline `!important` wins over nearly every
|
|
20
|
-
* other origin, including user stylesheets applied the normal way).
|
|
17
|
+
* Each such declaration already meets WCAG 1.4.12's own metric for that
|
|
18
|
+
* property, as a multiple of the font size: line-height at least 1.5,
|
|
19
|
+
* letter-spacing at least 0.12, word-spacing at least 0.16. A forced value
|
|
20
|
+
* that already satisfies the criterion leaves the user nothing to override.
|
|
21
21
|
* @implementation-notes
|
|
22
|
-
* -
|
|
23
|
-
*
|
|
24
|
-
*
|
|
22
|
+
* - Computed style resolves the cascade and the units; the declared value is
|
|
23
|
+
* only a fallback for environments that do not lay the document out. Spacing
|
|
24
|
+
* that resolves to neither is left unreported rather than failed.
|
|
25
|
+
* - Within one declaration block, importance outranks order, so the effective
|
|
26
|
+
* declaration is the last `!important` one for that property.
|
|
27
|
+
* - ACT 78fd32/24afc2/9e45ec additionally require the text to contain a soft
|
|
28
|
+
* wrap break, which cannot be determined without layout. Not implemented, so
|
|
29
|
+
* a forced value on text that never wraps is still reported.
|
|
25
30
|
*/
|
|
26
31
|
|
|
27
32
|
const id = 'avoid-inline-spacing';
|
|
28
33
|
|
|
29
34
|
const meta = {
|
|
30
|
-
title: 'Inline style must not force text spacing
|
|
35
|
+
title: 'Inline style must not force text spacing below the WCAG metric',
|
|
31
36
|
description:
|
|
32
|
-
'Checks that inline style
|
|
37
|
+
'Checks that where inline style forces line-height, letter-spacing or word-spacing with !important, the value already meets WCAG 1.4.12, so the user has nothing left to override.',
|
|
33
38
|
i18n: {
|
|
34
39
|
titleKey: 'avoidInlineSpacing_title',
|
|
35
40
|
descriptionKey: 'avoidInlineSpacing_description'
|
|
@@ -57,6 +62,20 @@ function runInPage(ctx) {
|
|
|
57
62
|
const { helpers, rule } = ctx;
|
|
58
63
|
|
|
59
64
|
const SPACING_PROPS = ['line-height', 'letter-spacing', 'word-spacing'];
|
|
65
|
+
// WCAG 1.4.12's own metrics, as multiples of the font size.
|
|
66
|
+
const MIN_RATIO = { 'line-height': 1.5, 'letter-spacing': 0.12, 'word-spacing': 0.16 };
|
|
67
|
+
// Only these two take the value from the parent, leaving this declaration
|
|
68
|
+
// specifying no spacing of its own. `initial` and `revert` resolve to a
|
|
69
|
+
// concrete value (`normal` for all three properties), so they stay in scope.
|
|
70
|
+
const INHERITED_KEYWORDS = ['inherit', 'unset'];
|
|
71
|
+
// No user agent's `normal` line height reaches 1.5, so a forced `normal`
|
|
72
|
+
// always falls short of the metric.
|
|
73
|
+
const NORMAL_LINE_HEIGHT_RATIO = 1.2;
|
|
74
|
+
const CAMEL = {
|
|
75
|
+
'line-height': 'lineHeight',
|
|
76
|
+
'letter-spacing': 'letterSpacing',
|
|
77
|
+
'word-spacing': 'wordSpacing'
|
|
78
|
+
};
|
|
60
79
|
|
|
61
80
|
const nodes = helpers.queryAllSmart
|
|
62
81
|
? helpers.queryAllSmart('[style]')
|
|
@@ -65,6 +84,136 @@ function runInPage(ctx) {
|
|
|
65
84
|
const occurrences = [];
|
|
66
85
|
let applicableCount = 0;
|
|
67
86
|
|
|
87
|
+
// Within one declaration block, importance wins over order, so the last
|
|
88
|
+
// important declaration is the one that takes effect. Passed Example 5 of ACT
|
|
89
|
+
// 78fd32 turns on this and Passed Example 6 on the non-important half.
|
|
90
|
+
function effectiveDeclaration(raw, prop) {
|
|
91
|
+
const re = new RegExp('(?:^|;)\\s*' + prop + '\\s*:\\s*([^;]*)', 'gi');
|
|
92
|
+
let chosen = null;
|
|
93
|
+
let m;
|
|
94
|
+
while ((m = re.exec(raw))) {
|
|
95
|
+
const value = String(m[1] || '').trim();
|
|
96
|
+
const important = /!\s*important\s*$/i.test(value);
|
|
97
|
+
const clean = value.replace(/!\s*important\s*$/i, '').trim();
|
|
98
|
+
if (!clean) continue;
|
|
99
|
+
if (!chosen || important || !chosen.important) {
|
|
100
|
+
if (chosen && chosen.important && !important) continue;
|
|
101
|
+
chosen = { value: clean, important };
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
return chosen;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
function hasVisibleTextChild(el) {
|
|
108
|
+
let kids;
|
|
109
|
+
try {
|
|
110
|
+
kids = el.childNodes ? Array.from(el.childNodes) : [];
|
|
111
|
+
} catch {
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
return kids.some((n) => n && n.nodeType === 3 && String(n.nodeValue || '').trim() !== '');
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
function isRendered(el) {
|
|
118
|
+
if (helpers.isDomVisibleEligible) {
|
|
119
|
+
try {
|
|
120
|
+
return !!helpers.isDomVisibleEligible(el, ctx, { targetSet: 'dom' }).eligible;
|
|
121
|
+
} catch {
|
|
122
|
+
return true;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
return true;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
const px = (v) => {
|
|
129
|
+
const n = parseFloat(v);
|
|
130
|
+
return Number.isFinite(n) && /px\s*$/.test(String(v)) ? n : null;
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
function computedStyleOf(el) {
|
|
134
|
+
if (helpers && typeof helpers.computedStyle === 'function') {
|
|
135
|
+
try {
|
|
136
|
+
const cs = helpers.computedStyle(el);
|
|
137
|
+
if (cs) return cs;
|
|
138
|
+
} catch {
|
|
139
|
+
// fall through to the realm's own view
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
try {
|
|
143
|
+
const view = el.ownerDocument && el.ownerDocument.defaultView;
|
|
144
|
+
if (view && typeof view.getComputedStyle === 'function') return view.getComputedStyle(el);
|
|
145
|
+
} catch {
|
|
146
|
+
// no computed style available
|
|
147
|
+
}
|
|
148
|
+
return null;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// ACT scopes these rules to text visible on screen, and text pushed far off
|
|
152
|
+
// canvas is the one hidden shape the shared eligibility check keeps eligible.
|
|
153
|
+
function isOffScreen(el) {
|
|
154
|
+
if (!helpers.getVisibilityHintsInfo) return false;
|
|
155
|
+
try {
|
|
156
|
+
const info = helpers.getVisibilityHintsInfo(el, ctx, {});
|
|
157
|
+
return !!(info && Array.isArray(info.hints) && info.hints.indexOf('offscreen') !== -1);
|
|
158
|
+
} catch {
|
|
159
|
+
return false;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// A realm that does not lay the document out reports font-size as the CSS
|
|
164
|
+
// absolute-size keyword rather than a length. Resolving those keeps px-valued
|
|
165
|
+
// spacing checkable there, and cannot manufacture a failure: a font size
|
|
166
|
+
// larger than assumed only makes a px ratio smaller.
|
|
167
|
+
const ABSOLUTE_FONT_SIZES = {
|
|
168
|
+
'xx-small': 9,
|
|
169
|
+
'x-small': 10,
|
|
170
|
+
small: 13,
|
|
171
|
+
medium: 16,
|
|
172
|
+
large: 18,
|
|
173
|
+
'x-large': 24,
|
|
174
|
+
'xx-large': 32
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
function fontSizeOf(cs) {
|
|
178
|
+
if (!cs) return null;
|
|
179
|
+
const direct = px(cs.fontSize);
|
|
180
|
+
if (direct !== null) return direct;
|
|
181
|
+
const keyword = String(cs.fontSize || '')
|
|
182
|
+
.trim()
|
|
183
|
+
.toLowerCase();
|
|
184
|
+
return ABSOLUTE_FONT_SIZES[keyword] || null;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/**
|
|
188
|
+
* The spacing as a multiple of the font size, or null when it cannot be
|
|
189
|
+
* resolved. Computed style is preferred because it already applies the
|
|
190
|
+
* cascade and unit resolution; the declared value is only a fallback for
|
|
191
|
+
* environments that do not lay the document out.
|
|
192
|
+
*/
|
|
193
|
+
function spacingRatio(el, prop, declared) {
|
|
194
|
+
const cs = computedStyleOf(el);
|
|
195
|
+
const fontSize = fontSizeOf(cs);
|
|
196
|
+
if (cs && fontSize) {
|
|
197
|
+
const used = px(cs[CAMEL[prop]]);
|
|
198
|
+
if (used !== null) return used / fontSize;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
const v = String(declared || '')
|
|
202
|
+
.trim()
|
|
203
|
+
.toLowerCase();
|
|
204
|
+
// `normal`, and the keywords that resolve to it, add nothing for the two
|
|
205
|
+
// spacing properties and stay under the metric for line height.
|
|
206
|
+
if (v === 'normal' || v === 'initial' || v === 'revert' || v === 'revert-layer') {
|
|
207
|
+
return prop === 'line-height' ? NORMAL_LINE_HEIGHT_RATIO : 0;
|
|
208
|
+
}
|
|
209
|
+
if (/^[0-9.]+$/.test(v)) return parseFloat(v);
|
|
210
|
+
if (/em$/.test(v)) return parseFloat(v);
|
|
211
|
+
if (/%$/.test(v)) return parseFloat(v) / 100;
|
|
212
|
+
const asPx = px(v);
|
|
213
|
+
if (asPx !== null && fontSize) return asPx / fontSize;
|
|
214
|
+
return null;
|
|
215
|
+
}
|
|
216
|
+
|
|
68
217
|
for (const el of nodes) {
|
|
69
218
|
if (!el || !el.getAttribute) continue;
|
|
70
219
|
const raw = String(el.getAttribute('style') || '');
|
|
@@ -74,34 +223,43 @@ function runInPage(ctx) {
|
|
|
74
223
|
const hasAnySpacingProp = SPACING_PROPS.some((p) => lower.includes(p));
|
|
75
224
|
if (!hasAnySpacingProp) continue;
|
|
76
225
|
|
|
77
|
-
|
|
226
|
+
// The rule is about text the user needs to re-space, so an element with no
|
|
227
|
+
// text of its own, or none that renders, is not a target.
|
|
228
|
+
if (!hasVisibleTextChild(el) || !isRendered(el) || isOffScreen(el)) continue;
|
|
78
229
|
|
|
79
230
|
const flagged = [];
|
|
231
|
+
let inScope = false;
|
|
80
232
|
for (const prop of SPACING_PROPS) {
|
|
81
|
-
const
|
|
82
|
-
if (
|
|
233
|
+
const decl = effectiveDeclaration(raw, prop);
|
|
234
|
+
if (!decl || !decl.important) continue;
|
|
235
|
+
if (INHERITED_KEYWORDS.indexOf(decl.value.toLowerCase()) !== -1) continue;
|
|
236
|
+
inScope = true;
|
|
237
|
+
const ratio = spacingRatio(el, prop, decl.value);
|
|
238
|
+
// Unresolvable spacing is left alone: this engine reserves fail for
|
|
239
|
+
// high-confidence violations.
|
|
240
|
+
if (ratio === null) continue;
|
|
241
|
+
if (ratio < MIN_RATIO[prop]) flagged.push(prop);
|
|
83
242
|
}
|
|
84
243
|
|
|
244
|
+
if (inScope) applicableCount += 1;
|
|
85
245
|
if (!flagged.length) continue;
|
|
86
246
|
|
|
87
247
|
const tag = el.tagName.toLowerCase();
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
});
|
|
248
|
+
|
|
249
|
+
occurrences.push(
|
|
250
|
+
helpers.reportOccurrence(el, {
|
|
251
|
+
summary: `This element's inline style forces ${flagged.join(', ')} with !important below the WCAG text-spacing metric, so the user cannot raise it.`,
|
|
252
|
+
hint: 'Remove !important from line-height/letter-spacing/word-spacing in inline styles, or set a value that already meets the metric (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em).',
|
|
253
|
+
i18n: {
|
|
254
|
+
summaryKey: 'avoidInlineSpacing_summary_fail',
|
|
255
|
+
hintKey: 'avoidInlineSpacing_hint_fail',
|
|
256
|
+
params: { element: tag, properties: flagged.join(', ') }
|
|
257
|
+
},
|
|
258
|
+
data: {
|
|
259
|
+
details: { reasonCode: 'INLINE_SPACING_IMPORTANT', element: tag, properties: flagged }
|
|
260
|
+
}
|
|
261
|
+
})
|
|
262
|
+
);
|
|
105
263
|
}
|
|
106
264
|
|
|
107
265
|
if (applicableCount === 0) {
|
|
@@ -137,9 +137,16 @@ function runInPage(ctx) {
|
|
|
137
137
|
return '';
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
+
// Naming rules apply only to elements included in the accessibility tree
|
|
141
|
+
// (ACT c487ae and siblings), which excludes focusable aria-hidden content.
|
|
142
|
+
// aria-hidden-focus (ACT 6cfa84) covers that markup instead.
|
|
140
143
|
function isEligibleAcc(helpers, el, ctx) {
|
|
141
144
|
const fn =
|
|
142
|
-
helpers && typeof helpers.
|
|
145
|
+
helpers && typeof helpers.isIncludedInAccessibilityTree === 'function'
|
|
146
|
+
? helpers.isIncludedInAccessibilityTree
|
|
147
|
+
: helpers && typeof helpers.isAccTreeEligible === 'function'
|
|
148
|
+
? helpers.isAccTreeEligible
|
|
149
|
+
: null;
|
|
143
150
|
if (!fn) return true;
|
|
144
151
|
try {
|
|
145
152
|
const r = fn(el, ctx);
|
|
@@ -153,8 +160,9 @@ function runInPage(ctx) {
|
|
|
153
160
|
const occurrences = [];
|
|
154
161
|
let applicableCount = 0;
|
|
155
162
|
|
|
156
|
-
|
|
157
|
-
|
|
163
|
+
// Native checkbox/radio without an explicit role belongs to
|
|
164
|
+
// form-control-programmatic-label-present.
|
|
165
|
+
const selector = '[role="checkbox"], [role="radio"], [role="switch"]';
|
|
158
166
|
const nodes = helpers.queryAllSmart
|
|
159
167
|
? helpers.queryAllSmart(selector)
|
|
160
168
|
: helpers.queryAll(selector);
|
|
@@ -264,28 +272,26 @@ function runInPage(ctx) {
|
|
|
264
272
|
}
|
|
265
273
|
})()
|
|
266
274
|
: null;
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
summaryKey: 'binaryControlNamePresent_summary_fail',
|
|
277
|
-
hintKey: 'binaryControlNamePresent_hint_fail',
|
|
278
|
-
params: { controlType }
|
|
279
|
-
},
|
|
280
|
-
data: {
|
|
281
|
-
details: {
|
|
282
|
-
reasonCode: 'name_missing',
|
|
283
|
-
controlType,
|
|
284
|
-
methodTried: res.method
|
|
275
|
+
|
|
276
|
+
occurrences.push(
|
|
277
|
+
helpers.reportOccurrence(el, {
|
|
278
|
+
summary: 'This control has no accessible name.',
|
|
279
|
+
hint: 'Provide a label, aria-label, aria-labelledby, or other accessible-name mechanism so assistive technologies can identify the control.',
|
|
280
|
+
i18n: {
|
|
281
|
+
summaryKey: 'binaryControlNamePresent_summary_fail',
|
|
282
|
+
hintKey: 'binaryControlNamePresent_hint_fail',
|
|
283
|
+
params: { controlType }
|
|
285
284
|
},
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
285
|
+
data: {
|
|
286
|
+
details: {
|
|
287
|
+
reasonCode: 'name_missing',
|
|
288
|
+
controlType,
|
|
289
|
+
methodTried: res.method
|
|
290
|
+
},
|
|
291
|
+
visibilityFilter: eligInfo || { targetSet: 'acc', accEligible: null, reasons: [] }
|
|
292
|
+
}
|
|
293
|
+
})
|
|
294
|
+
);
|
|
289
295
|
}
|
|
290
296
|
|
|
291
297
|
if (applicableCount === 0) {
|
|
@@ -78,7 +78,14 @@ function runInPage(ctx) {
|
|
|
78
78
|
|
|
79
79
|
for (const el of nodes) {
|
|
80
80
|
// isAccTreeEligible returns { eligible, reasons }, not a boolean.
|
|
81
|
-
|
|
81
|
+
// Naming rules apply only to elements included in the accessibility tree
|
|
82
|
+
// (ACT c487ae), which excludes focusable aria-hidden content;
|
|
83
|
+
// aria-hidden-focus (ACT 6cfa84) covers that markup instead.
|
|
84
|
+
const eligResult = helpers.isIncludedInAccessibilityTree
|
|
85
|
+
? helpers.isIncludedInAccessibilityTree(el, ctx)
|
|
86
|
+
: helpers.isAccTreeEligible
|
|
87
|
+
? helpers.isAccTreeEligible(el, ctx)
|
|
88
|
+
: true;
|
|
82
89
|
const eligible =
|
|
83
90
|
typeof eligResult === 'boolean' ? eligResult : !!(eligResult && eligResult.eligible);
|
|
84
91
|
if (!eligible) continue;
|
|
@@ -104,24 +111,50 @@ function runInPage(ctx) {
|
|
|
104
111
|
inputValueName = getInputButtonValueName(el);
|
|
105
112
|
}
|
|
106
113
|
|
|
107
|
-
//
|
|
108
|
-
//
|
|
109
|
-
//
|
|
110
|
-
// name-from-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
'
|
|
116
|
-
'
|
|
117
|
-
'
|
|
118
|
-
'
|
|
119
|
-
'
|
|
120
|
-
'
|
|
121
|
-
'
|
|
114
|
+
// ARIA 1.2 "Name From: author, contents". Every other known role is
|
|
115
|
+
// name-from-author-only: <button role="combobox">List</button> exposes a
|
|
116
|
+
// value, not a label. An unknown role falls back to the implicit role.
|
|
117
|
+
// <generated:aria-name-from-content>
|
|
118
|
+
const NAME_FROM_CONTENT_ROLES = [
|
|
119
|
+
'button',
|
|
120
|
+
'cell',
|
|
121
|
+
'checkbox',
|
|
122
|
+
'columnheader',
|
|
123
|
+
'doc-backlink',
|
|
124
|
+
'doc-biblioref',
|
|
125
|
+
'doc-glossref',
|
|
126
|
+
'doc-noteref',
|
|
127
|
+
'graphics-object',
|
|
128
|
+
'gridcell',
|
|
129
|
+
'heading',
|
|
130
|
+
'link',
|
|
131
|
+
'menuitem',
|
|
132
|
+
'menuitemcheckbox',
|
|
133
|
+
'menuitemradio',
|
|
134
|
+
'option',
|
|
135
|
+
'radio',
|
|
136
|
+
'row',
|
|
137
|
+
'rowgroup',
|
|
138
|
+
'rowheader',
|
|
139
|
+
'switch',
|
|
140
|
+
'tab',
|
|
141
|
+
'tooltip',
|
|
142
|
+
'treeitem'
|
|
122
143
|
];
|
|
144
|
+
// </generated:aria-name-from-content>
|
|
145
|
+
const isKnownRoleToken =
|
|
146
|
+
helpers && helpers.aria && typeof helpers.aria.isKnownRole === 'function'
|
|
147
|
+
? (() => {
|
|
148
|
+
try {
|
|
149
|
+
return !!helpers.aria.isKnownRole(roleNorm);
|
|
150
|
+
} catch {
|
|
151
|
+
return false;
|
|
152
|
+
}
|
|
153
|
+
})()
|
|
154
|
+
: false;
|
|
123
155
|
const isContentNameCandidate =
|
|
124
|
-
(tag === 'button' || role === 'button') &&
|
|
156
|
+
(tag === 'button' || role === 'button') &&
|
|
157
|
+
(!roleNorm || !isKnownRoleToken || NAME_FROM_CONTENT_ROLES.includes(roleNorm));
|
|
125
158
|
const contentName =
|
|
126
159
|
!trustedProgrammaticName && !inputValueName && isContentNameCandidate
|
|
127
160
|
? getConservativeSubtreeText(el)
|
|
@@ -137,35 +170,30 @@ function runInPage(ctx) {
|
|
|
137
170
|
? helpers.getEligibilityInfo(el, ctx, { targetSet: 'acc' })
|
|
138
171
|
: null;
|
|
139
172
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
inputValueNameLength: inputValueName.length,
|
|
162
|
-
contentNameLength: contentName.length,
|
|
163
|
-
explicitProgrammatic: explicitProg ? 1 : 0
|
|
164
|
-
},
|
|
165
|
-
refs: { accessibleName: nameInfo || null }
|
|
173
|
+
occurrences.push(
|
|
174
|
+
helpers.reportOccurrence(el, {
|
|
175
|
+
summary: 'This button has no accessible name.',
|
|
176
|
+
hint: 'Provide visible button text or a programmatic accessible-name mechanism (for example aria-label) so assistive technologies can identify the button.',
|
|
177
|
+
i18n: {
|
|
178
|
+
summaryKey: 'buttonNamePresent_summary_fail',
|
|
179
|
+
hintKey: 'buttonNamePresent_hint_fail',
|
|
180
|
+
params: { element: tag }
|
|
181
|
+
},
|
|
182
|
+
data: {
|
|
183
|
+
visibilityFilter: eligInfo || { targetSet: 'acc', accEligible: null, reasons: [] },
|
|
184
|
+
details: {
|
|
185
|
+
reasonCode: 'name_missing',
|
|
186
|
+
metrics: {
|
|
187
|
+
trustedProgrammaticNameLength: trustedProgrammaticName.length,
|
|
188
|
+
inputValueNameLength: inputValueName.length,
|
|
189
|
+
contentNameLength: contentName.length,
|
|
190
|
+
explicitProgrammatic: explicitProg ? 1 : 0
|
|
191
|
+
},
|
|
192
|
+
refs: { accessibleName: nameInfo || null }
|
|
193
|
+
}
|
|
166
194
|
}
|
|
167
|
-
}
|
|
168
|
-
|
|
195
|
+
})
|
|
196
|
+
);
|
|
169
197
|
}
|
|
170
198
|
}
|
|
171
199
|
|
|
@@ -9,9 +9,8 @@
|
|
|
9
9
|
* @standard WCAG 2.2
|
|
10
10
|
* @sc 1.1.1
|
|
11
11
|
* @applicability
|
|
12
|
-
* Applies to <canvas> elements
|
|
13
|
-
*
|
|
14
|
-
* if they are focusable (tabbable) or referenced by IDREF relationships (per engine eligibility checks).
|
|
12
|
+
* Applies to <canvas> elements included in the accessibility tree.
|
|
13
|
+
* Hidden elements are excluded whether or not they are focusable.
|
|
15
14
|
* @expectation
|
|
16
15
|
* Each applicable <canvas> provides a text alternative via fallback content or an accessible name.
|
|
17
16
|
*/
|
|
@@ -71,8 +70,15 @@ function runInPage(ctx) {
|
|
|
71
70
|
const getEligibilityInfo =
|
|
72
71
|
helpers && typeof helpers.getEligibilityInfo === 'function' ? helpers.getEligibilityInfo : null;
|
|
73
72
|
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
// aria-hidden removes the canvas from the accessibility tree, so a text
|
|
74
|
+
// alternative on it cannot reach anyone; aria-hidden-focus reports a
|
|
75
|
+
// focusable one. Matches the other non-text-content rules.
|
|
76
|
+
const isEligibleHelper =
|
|
77
|
+
helpers && typeof helpers.isIncludedInAccessibilityTree === 'function'
|
|
78
|
+
? helpers.isIncludedInAccessibilityTree
|
|
79
|
+
: helpers && typeof helpers.isAccTreeEligible === 'function'
|
|
80
|
+
? helpers.isAccTreeEligible
|
|
81
|
+
: null;
|
|
76
82
|
|
|
77
83
|
const getTextAlternativeInfo =
|
|
78
84
|
helpers && typeof helpers.getTextAlternativeInfo === 'function'
|
|
@@ -97,15 +103,16 @@ function runInPage(ctx) {
|
|
|
97
103
|
for (const el of canvases) {
|
|
98
104
|
if (!el) continue;
|
|
99
105
|
|
|
100
|
-
// Applicability:
|
|
101
|
-
if (
|
|
106
|
+
// Applicability: included in the accessibility tree.
|
|
107
|
+
if (isEligibleHelper) {
|
|
102
108
|
const elig = (() => {
|
|
103
109
|
try {
|
|
104
|
-
return
|
|
110
|
+
return isEligibleHelper(el, ctx);
|
|
105
111
|
} catch {
|
|
106
112
|
return { eligible: true, reasons: [] };
|
|
107
113
|
}
|
|
108
114
|
})();
|
|
115
|
+
if (elig === false) continue;
|
|
109
116
|
if (elig && elig.eligible === false) continue;
|
|
110
117
|
}
|
|
111
118
|
|
|
@@ -124,9 +124,16 @@ function runInPage(ctx) {
|
|
|
124
124
|
return '';
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
+
// Naming rules apply only to elements included in the accessibility tree
|
|
128
|
+
// (ACT c487ae and siblings), which excludes focusable aria-hidden content.
|
|
129
|
+
// aria-hidden-focus (ACT 6cfa84) covers that markup instead.
|
|
127
130
|
function isEligibleAcc(helpers, el, ctx) {
|
|
128
131
|
const fn =
|
|
129
|
-
helpers && typeof helpers.
|
|
132
|
+
helpers && typeof helpers.isIncludedInAccessibilityTree === 'function'
|
|
133
|
+
? helpers.isIncludedInAccessibilityTree
|
|
134
|
+
: helpers && typeof helpers.isAccTreeEligible === 'function'
|
|
135
|
+
? helpers.isAccTreeEligible
|
|
136
|
+
: null;
|
|
130
137
|
if (!fn) return true;
|
|
131
138
|
try {
|
|
132
139
|
const r = fn(el, ctx);
|
|
@@ -224,24 +231,22 @@ function runInPage(ctx) {
|
|
|
224
231
|
}
|
|
225
232
|
})()
|
|
226
233
|
: null;
|
|
227
|
-
const stableSelector = helpers.buildSelector ? helpers.buildSelector(el) : 'html';
|
|
228
|
-
const html = helpers.getOuterHtmlSnippet ? helpers.getOuterHtmlSnippet(el) : el.outerHTML || '';
|
|
229
234
|
|
|
230
|
-
occurrences.push(
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
}
|
|
244
|
-
|
|
235
|
+
occurrences.push(
|
|
236
|
+
helpers.reportOccurrence(el, {
|
|
237
|
+
summary: 'This combobox has no accessible name.',
|
|
238
|
+
hint: "Provide aria-label, aria-labelledby, or a title attribute — visible text content is not exposed as this combobox's accessible name.",
|
|
239
|
+
i18n: {
|
|
240
|
+
summaryKey: 'comboboxNamePresent_summary_fail',
|
|
241
|
+
hintKey: 'comboboxNamePresent_hint_fail',
|
|
242
|
+
params: {}
|
|
243
|
+
},
|
|
244
|
+
data: {
|
|
245
|
+
details: { reasonCode: 'name_missing', controlType: 'combobox', methodTried: res.method },
|
|
246
|
+
visibilityFilter: eligInfo || { targetSet: 'acc', accEligible: null, reasons: [] }
|
|
247
|
+
}
|
|
248
|
+
})
|
|
249
|
+
);
|
|
245
250
|
}
|
|
246
251
|
|
|
247
252
|
if (applicableCount === 0) {
|