@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.
Files changed (115) hide show
  1. package/CHANGELOG.md +88 -7
  2. package/README.md +19 -3
  3. package/bin/surea11y-core.js +0 -0
  4. package/docs/API_STABILITY.md +2 -2
  5. package/docs/ARIA_DEPRECATION.md +95 -0
  6. package/docs/ENGINE_OPTIONS.md +14 -10
  7. package/docs/I18N.md +176 -20
  8. package/docs/INTEGRATION.md +28 -6
  9. package/docs/LIMITATIONS.md +1 -1
  10. package/docs/OUTPUT_SCHEMA.md +13 -3
  11. package/docs/REPORT.md +2 -0
  12. package/docs/RULE_AUTHORING.md +53 -0
  13. package/docs/RULE_CATALOG.md +6 -6
  14. package/docs/TROUBLESHOOTING.md +2 -2
  15. package/package.json +8 -1
  16. package/src/checks/automatic/aria-allowed-attr.js +661 -99
  17. package/src/checks/automatic/aria-allowed-role.js +14 -16
  18. package/src/checks/automatic/aria-braille-equivalent.js +17 -19
  19. package/src/checks/automatic/aria-conditional-attr.js +17 -19
  20. package/src/checks/automatic/aria-deprecated-role.js +122 -41
  21. package/src/checks/automatic/aria-hidden-body.js +2 -9
  22. package/src/checks/automatic/aria-hidden-focus.js +99 -18
  23. package/src/checks/automatic/aria-prohibited-attr.js +54 -55
  24. package/src/checks/automatic/aria-prohibited-children.js +26 -26
  25. package/src/checks/automatic/aria-required-attr.js +14 -17
  26. package/src/checks/automatic/aria-required-children.js +17 -20
  27. package/src/checks/automatic/aria-required-parent.js +17 -20
  28. package/src/checks/automatic/aria-roles-valid.js +66 -27
  29. package/src/checks/automatic/aria-valid-attr-value.js +18 -21
  30. package/src/checks/automatic/aria-valid-attr.js +14 -17
  31. package/src/checks/automatic/autocomplete-valid.js +52 -18
  32. package/src/checks/automatic/avoid-inline-spacing.js +192 -34
  33. package/src/checks/automatic/binary-control-name-present.js +30 -24
  34. package/src/checks/automatic/button-name-present.js +73 -45
  35. package/src/checks/automatic/canvas-text-alternative-present.js +15 -8
  36. package/src/checks/automatic/combobox-name-present.js +23 -18
  37. package/src/checks/automatic/css-orientation-lock.js +22 -22
  38. package/src/checks/automatic/definition-list-children-valid.js +18 -21
  39. package/src/checks/automatic/deprecated-elements-not-used.js +14 -16
  40. package/src/checks/automatic/dialog-name-present.js +24 -19
  41. package/src/checks/automatic/dlitem-parent-valid.js +15 -17
  42. package/src/checks/automatic/duplicate-id-aria.js +45 -37
  43. package/src/checks/automatic/form-control-programmatic-label-present.js +48 -4
  44. package/src/checks/automatic/form-control-single-label.js +109 -43
  45. package/src/checks/automatic/html-xml-lang-mismatch.js +2 -9
  46. package/src/checks/automatic/iframe-focusable-content.js +29 -31
  47. package/src/checks/automatic/iframe-name-present.js +15 -17
  48. package/src/checks/automatic/iframe-title-unique.js +18 -23
  49. package/src/checks/automatic/img-alt-present.js +16 -9
  50. package/src/checks/automatic/input-image-alt-present.js +99 -48
  51. package/src/checks/automatic/label-in-name.js +102 -33
  52. package/src/checks/automatic/language-page-present.js +5 -1
  53. package/src/checks/automatic/link-in-text-block.js +19 -21
  54. package/src/checks/automatic/link-name-present.js +75 -47
  55. package/src/checks/automatic/list-children-valid.js +15 -17
  56. package/src/checks/automatic/listbox-name-present.js +23 -18
  57. package/src/checks/automatic/listitem-parent-valid.js +14 -17
  58. package/src/checks/automatic/menuitem-name-present.js +24 -19
  59. package/src/checks/automatic/meta-refresh-no-exceptions.js +44 -18
  60. package/src/checks/automatic/meta-refresh-timing-absent.js +44 -21
  61. package/src/checks/automatic/meta-viewport-zoom-enabled.js +51 -32
  62. package/src/checks/automatic/meter-name-present.js +24 -19
  63. package/src/checks/automatic/nested-interactive-controls-absent.js +179 -51
  64. package/src/checks/automatic/object-text-alternative-present.js +14 -7
  65. package/src/checks/automatic/option-name-present.js +24 -19
  66. package/src/checks/automatic/progressbar-name-present.js +27 -22
  67. package/src/checks/automatic/searchbox-name-present.js +27 -18
  68. package/src/checks/automatic/server-side-image-map-absent.js +15 -18
  69. package/src/checks/automatic/slider-name-present.js +26 -19
  70. package/src/checks/automatic/spinbutton-name-present.js +27 -18
  71. package/src/checks/automatic/summary-name-present.js +24 -19
  72. package/src/checks/automatic/tab-name-present.js +24 -19
  73. package/src/checks/automatic/table-headers-attr-valid.js +15 -17
  74. package/src/checks/automatic/table-th-has-data-cells.js +82 -25
  75. package/src/checks/automatic/target-size-minimum.js +104 -81
  76. package/src/checks/automatic/td-has-header.js +15 -20
  77. package/src/checks/automatic/textbox-name-present.js +23 -18
  78. package/src/checks/automatic/tooltip-name-present.js +24 -19
  79. package/src/checks/automatic/treeitem-name-present.js +24 -19
  80. package/src/checks/automatic/valid-lang.js +31 -20
  81. package/src/checks/manual/accesskeys-manual.js +18 -19
  82. package/src/checks/manual/aria-checked-state-mismatch-manual.js +19 -22
  83. package/src/checks/{automatic/bypass-blocks-present.js → manual/bypass-blocks-present-manual.js} +98 -44
  84. package/src/checks/manual/empty-heading-manual.js +15 -17
  85. package/src/checks/manual/empty-table-header-manual.js +27 -30
  86. package/src/checks/manual/form-control-programmatic-label-quality-manual.js +2 -9
  87. package/src/checks/manual/heading-order-manual.js +17 -22
  88. package/src/checks/manual/image-redundant-alt-manual.js +14 -17
  89. package/src/checks/manual/input-image-alt-decorative-manual.js +24 -0
  90. package/src/checks/manual/label-title-only-manual.js +15 -17
  91. package/src/checks/manual/landmark-banner-is-top-level-manual.js +25 -39
  92. package/src/checks/manual/landmark-contentinfo-is-top-level-manual.js +21 -27
  93. package/src/checks/manual/landmark-main-is-top-level-manual.js +14 -17
  94. package/src/checks/manual/landmark-no-duplicate-banner-manual.js +2 -7
  95. package/src/checks/manual/landmark-no-duplicate-contentinfo-manual.js +2 -7
  96. package/src/checks/manual/landmark-no-duplicate-main-manual.js +2 -7
  97. package/src/checks/manual/landmark-one-main-manual.js +2 -9
  98. package/src/checks/manual/landmark-unique-manual.js +22 -27
  99. package/src/checks/manual/link-name-quality-manual.js +15 -17
  100. package/src/checks/manual/meta-viewport-large-manual.js +14 -17
  101. package/src/checks/manual/mouse-only-event-handlers-manual.js +17 -19
  102. package/src/checks/manual/page-has-heading-one-manual.js +2 -9
  103. package/src/checks/manual/presentation-role-conflict-manual.js +19 -21
  104. package/src/checks/manual/region-manual.js +13 -6
  105. package/src/checks/manual/scope-attr-valid-manual.js +14 -17
  106. package/src/checks/manual/skip-link-manual.js +39 -47
  107. package/src/checks/manual/tabindex-manual.js +14 -17
  108. package/src/checks/manual/table-duplicate-name-manual.js +14 -17
  109. package/src/core.js +8818 -4330
  110. package/src/report.js +14 -0
  111. package/src/sarif.js +2 -2
  112. package/surea11y.browser.js +4023 -3911
  113. package/surea11y.i18n.de.js +22 -0
  114. package/surea11y.i18n.es.js +22 -0
  115. 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-spacing properties with !important
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 elements with an inline style attribute that sets
13
- * line-height, letter-spacing, or word-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
- * None of those three properties are declared with `!important` in the
16
- * inline style. WCAG 1.4.12 (Text Spacing) requires that users be able
17
- * to override these properties via a user stylesheet without losing
18
- * content or functionality; `!important` on an inline declaration
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
- * - Static text-based parsing of the style attribute string (regex for
23
- * the three property names followed by `!important`), not computed
24
- * style.
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 with !important',
35
+ title: 'Inline style must not force text spacing below the WCAG metric',
31
36
  description:
32
- 'Checks that inline style does not set line-height, letter-spacing, or word-spacing with !important, which blocks user text-spacing overrides.',
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
- applicableCount += 1;
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 re = new RegExp(prop.replace('-', '\\-') + '\\s*:[^;]*!important', 'i');
82
- if (re.test(raw)) flagged.push(prop);
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
- const stableSelector = helpers.buildSelector ? helpers.buildSelector(el) : 'html';
89
- const html = helpers.getOuterHtmlSnippet ? helpers.getOuterHtmlSnippet(el) : el.outerHTML || '';
90
-
91
- occurrences.push({
92
- selector: stableSelector,
93
- html,
94
- summary: `This element's inline style forces ${flagged.join(', ')} with !important, blocking user text-spacing overrides.`,
95
- hint: 'Remove !important from line-height/letter-spacing/word-spacing in inline styles so users can override text spacing.',
96
- i18n: {
97
- summaryKey: 'avoidInlineSpacing_summary_fail',
98
- hintKey: 'avoidInlineSpacing_hint_fail',
99
- params: { element: tag, properties: flagged.join(', ') }
100
- },
101
- data: {
102
- details: { reasonCode: 'INLINE_SPACING_IMPORTANT', element: tag, properties: flagged }
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.isAccTreeEligible === 'function' ? helpers.isAccTreeEligible : null;
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
- const selector =
157
- 'input[type="checkbox"], input[type="radio"], [role="checkbox"], [role="radio"], [role="switch"]';
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
- const stableSelector = helpers.buildSelector ? helpers.buildSelector(el) : 'html';
268
- const html = helpers.getOuterHtmlSnippet ? helpers.getOuterHtmlSnippet(el) : el.outerHTML || '';
269
-
270
- occurrences.push({
271
- selector: stableSelector,
272
- html,
273
- summary: 'This control has no accessible name.',
274
- hint: 'Provide a label, aria-label, aria-labelledby, or other accessible-name mechanism so assistive technologies can identify the control.',
275
- i18n: {
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
- visibilityFilter: eligInfo || { targetSet: 'acc', accEligible: null, reasons: [] }
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
- const eligResult = helpers.isAccTreeEligible ? helpers.isAccTreeEligible(el, ctx) : true;
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
- // A native <button> (or [role="button"]) whose role has been overridden to
108
- // one of these roles is no longer semantically a button — per the WAI-ARIA
109
- // Accessible Name and Description Computation spec these roles are
110
- // name-from-author-only, and their rendered content represents a VALUE,
111
- // not a NAME. E.g. <button role="combobox">List</button> where "List" is
112
- // the combobox's currently selected value, not a label — crediting it as
113
- // the accessible name would mask a missing name.
114
- const VALUE_ROLES = [
115
- 'textbox',
116
- 'progressbar',
117
- 'scrollbar',
118
- 'slider',
119
- 'spinbutton',
120
- 'combobox',
121
- 'listbox'
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') && !VALUE_ROLES.includes(roleNorm);
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
- const stableSelector = helpers.buildSelector ? helpers.buildSelector(el) : 'html';
141
- const html = helpers.getOuterHtmlSnippet
142
- ? helpers.getOuterHtmlSnippet(el)
143
- : el.outerHTML || '';
144
-
145
- occurrences.push({
146
- selector: stableSelector,
147
- html,
148
- summary: 'This button has no accessible name.',
149
- hint: 'Provide visible button text or a programmatic accessible-name mechanism (for example aria-label) so assistive technologies can identify the button.',
150
- i18n: {
151
- summaryKey: 'buttonNamePresent_summary_fail',
152
- hintKey: 'buttonNamePresent_hint_fail',
153
- params: { element: tag }
154
- },
155
- data: {
156
- visibilityFilter: eligInfo || { targetSet: 'acc', accEligible: null, reasons: [] },
157
- details: {
158
- reasonCode: 'name_missing',
159
- metrics: {
160
- trustedProgrammaticNameLength: trustedProgrammaticName.length,
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 that are exposed to assistive technologies.
13
- * Elements otherwise hidden from the accessibility tree remain applicable
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
- const isAccTreeEligible =
75
- helpers && typeof helpers.isAccTreeEligible === 'function' ? helpers.isAccTreeEligible : null;
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: eligible in the accessibility tree (with focusable/IDREF exceptions handled by helper).
101
- if (isAccTreeEligible) {
106
+ // Applicability: included in the accessibility tree.
107
+ if (isEligibleHelper) {
102
108
  const elig = (() => {
103
109
  try {
104
- return isAccTreeEligible(el, ctx);
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.isAccTreeEligible === 'function' ? helpers.isAccTreeEligible : null;
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
- selector: stableSelector,
232
- html,
233
- summary: 'This combobox has no accessible name.',
234
- hint: "Provide aria-label, aria-labelledby, or a title attribute — visible text content is not exposed as this combobox's accessible name.",
235
- i18n: {
236
- summaryKey: 'comboboxNamePresent_summary_fail',
237
- hintKey: 'comboboxNamePresent_hint_fail',
238
- params: {}
239
- },
240
- data: {
241
- details: { reasonCode: 'name_missing', controlType: 'combobox', methodTried: res.method },
242
- visibilityFilter: eligInfo || { targetSet: 'acc', accEligible: null, reasons: [] }
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) {