tewip-ai 0.58.0 → 0.59.0

package/dist/engine/access/checks.js

@@ -6,9 +6,9 @@
 // div that only answers to a mouse. The ones that need a rendered page (contrast, focus order,
 // whether alt text is any good) are not attempted here and are listed in NOT_CHECKED instead.
 import { inside, labelledBy } from './markup.js';
-import { ARIA, INTERACTIVE, UNLABELLED_TYPES, at, clickHandler, decorative, hiddenFromEveryone, keyHandler, notRendered, show, tabIndexOf } from './element.js';
+import { ARIA, INTERACTIVE, UNLABELLED_TYPES, at, clickHandler, customElement, decorative, hiddenFromEveryone, keyHandler, notRendered, show, tabIndexOf } from './element.js';
 /** Checks that look at one element at a time. */
-function perElement(t, file, labelFor, openLabels, ancestorKey, namedByComponent = new Set(), boundLabels = new Set()) {
+function perElement(t, file, labelFor, openLabels, ancestorKey, namedByComponent = new Set(), boundLabels = new Set(), labelledByAComponent = false) {
     const out = [];
     const place = at(t, file);
     const name = labelledBy(t);
@@ -47,13 +47,15 @@ function perElement(t, file, labelFor, openLabels, ancestorKey, namedByComponent
         const bound = ['asp-for', 'formControlName', 'v-model', 'data-valmsg-for'].some((key) => typeof t.attrs[key] === 'string' && boundLabels.has(`${key}=${t.attrs[key]}`));
         const linked = bound || (typeof t.attrs.id === 'string' && labelFor.has(t.attrs.id));
         if (!name.named && !linked && openLabels === 0) {
-            if (name.unknown || t.dynamic.has('id') || t.dynamic.has('style') || (typeof t.attrs.id === 'string' && namedByComponent.has(t.attrs.id))) {
+            if (labelledByAComponent || name.unknown || t.dynamic.has('id') || t.dynamic.has('style') || (typeof t.attrs.id === 'string' && namedByComponent.has(t.attrs.id))) {
                 out.push({ rule: nameRule, confidence: 'ask-a-person', ...place,
-                    why: typeof t.attrs.id === 'string' && namedByComponent.has(t.attrs.id)
-                        ? `no <label for> is written here, but a component in this file names id="${t.attrs.id}" in one of its props, so the label may be rendered there`
-                        : t.dynamic.has('style')
-                            ? 'no label can be read here, and its style is an expression, so whether this is displayed at all cannot be read from the markup'
-                            : 'no label, aria-label or wrapping <label> can be read here, and part of the element is an expression',
+                    why: labelledByAComponent
+                        ? 'no label is written on this control, but it sits inside a custom element that contains a label - a component that binds the two when it renders, which this file cannot show'
+                        : typeof t.attrs.id === 'string' && namedByComponent.has(t.attrs.id)
+                            ? `no <label for> is written here, but a component in this file names id="${t.attrs.id}" in one of its props, so the label may be rendered there`
+                            : t.dynamic.has('style')
+                                ? 'no label can be read here, and its style is an expression, so whether this is displayed at all cannot be read from the markup'
+                                : 'no label, aria-label or wrapping <label> can be read here, and part of the element is an expression',
                     next: 'confirm the field is labelled at runtime; if not, add aria-label or a <label for>' });
             }
             else {
@@ -87,7 +89,11 @@ function perElement(t, file, labelFor, openLabels, ancestorKey, namedByComponent
     // world is built - a backdrop div closes on click, and Escape closes it from the dialog itself.
     // WCAG 2.1.1 asks that the *function* be reachable from the keyboard, not that this particular
     // div be focusable. Excalidraw's Modal.tsx is exactly this shape, and calling it a blocker is wrong.
-    if (clickHandler(t) && !INTERACTIVE.has(t.name) && !t.component && !t.attrs.role && tabindex === null && !keyHandler(t) && !ancestorKey) {
+    // `!customElement(t)` as well as `!t.component`: `<mat-checkbox (click)="toggle()">` is a checkbox
+    // that Angular renders with full keyboard handling, and `<mat-list-item>` likewise. Reading the
+    // markup alone they look like bare tags carrying a click. A `<tr (click)>` beside them in the same
+    // file is a genuine barrier, and still reported as one - table rows really are not focusable.
+    if (clickHandler(t) && !INTERACTIVE.has(t.name) && !t.component && !customElement(t) && !t.attrs.role && tabindex === null && !keyHandler(t) && !ancestorKey) {
         out.push({ rule: 'click-without-keyboard', confidence: 'barrier', ...place,
             why: 'it responds to a click, but it has no role, no tabindex and no key handler, so the keyboard cannot reach or fire it',
             next: 'use a <button>, or add role="button", tabindex="0" and a key handler' });
@@ -160,7 +166,28 @@ export function checkFile(source, all, file, isDocument = false) {
     let openLabels = 0;
     let interactiveDepth = 0;
     let lastHeading = 0;
-    /** The elements currently open around this one, and whether each handles keys. */
+    /**
+     * The elements currently open around this one: whether each handles keys, whether it is a custom
+     * element, and whether a label has appeared inside it.
+     *
+     * A custom element does its own labelling and does it somewhere else. Angular Material writes
+     *
+     *     <mat-form-field>
+     *       <mat-label>Title</mat-label>
+     *       <input matInput type="text">
+     *     </mat-form-field>
+     *
+     * and `MatFormField` generates the id on the input and the `for` on the label when it renders.
+     * The label is real; it is simply not expressed here. Reading the markup alone, Tewip called 426
+     * inputs in **the Angular team's own accessibility-focused component library** unlabelled.
+     *
+     * The same family as PatternFly's `<FormGroup fieldId>` in Phase 43 and ASP.NET's `asp-for` in
+     * Phase 45. This is the third spelling: the component wraps the label and the control together.
+     *
+     * A dash in the name is what marks a custom element - no standard HTML element has one - and the
+     * label must actually appear inside it, so an ordinary `<my-card>` around a bare input is still a
+     * barrier rather than a shrug.
+     */
     const open = [];
     for (const [i, t] of all.entries()) {
         if (t.name === 'label')
@@ -174,9 +201,15 @@ export function checkFile(source, all, file, isDocument = false) {
                 open.length = from;
             continue;
         }
-        out.push(...perElement(t, file, labelFor, Math.max(openLabels - (t.name === 'label' ? 1 : 0), 0), open.some((o) => o.keys), namedByComponent, boundLabels));
+        // A label, or a component that is one by name - `<mat-label>`, `<ion-label>`, `<sl-label>`.
+        if (t.name === 'label' || /(^|-)labels?$/.test(t.name))
+            for (const o of open)
+                if (o.custom)
+                    o.sawLabel = true;
+        const labelledByAComponent = open.some((o) => o.custom && o.sawLabel);
+        out.push(...perElement(t, file, labelFor, Math.max(openLabels - (t.name === 'label' ? 1 : 0), 0), open.some((o) => o.keys), namedByComponent, boundLabels, labelledByAComponent));
         if (!t.selfClosing)
-            open.push({ name: t.name, keys: keyHandler(t) });
+            open.push({ name: t.name, keys: keyHandler(t), custom: t.name.includes('-'), sawLabel: false });
         const id = t.attrs.id;
         if (isDocument && id && !t.dynamic.has('id')) {
             if (seenIds.has(id)) {

package/dist/engine/access/element.js

@@ -29,8 +29,44 @@ export const ARIA = new Set([
     'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext',
 ]);
 /** A click handler, in any of the four dialects this scanner reads. */
+/**
+ * A click handler, in any of the spellings the frameworks use.
+ *
+ * This was a list of four exact names, and two whole frameworks wrote theirs differently:
+ *
+ *   - **Angular** binds events as `(click)="..."`. angular/components has **414** of them and Tewip
+ *     saw none, so `click-without-keyboard` could never fire in any Angular project at all. The
+ *     library reported zero, which looked like a clean result and was blindness.
+ *   - **Vue** allows modifiers, so the attribute is `@click.stop` or `@click.prevent` rather than
+ *     `@click`. nocodb has **455** of those.
+ *
+ * Svelte was already covered both ways - `on:click` and Svelte 5's `onclick` - which is why this
+ * only showed up when a third framework was finally pointed at.
+ *
+ * `keyHandler` below had no such problem because it matches on a substring; the trade is that this
+ * one has to name the shapes, so that `data-click-target` is not read as a handler.
+ */
+// Angular's `(click)="go()"` reaches here as an attribute plainly named `click`, because the
+// attribute reader strips the parentheses - which is also why `keyHandler` below already worked for
+// Angular and this did not: it matches on a substring and this matched on an exact name. No standard
+// HTML attribute is called `click`, so taking the bare form costs nothing.
+const CLICK = /^(?:on)?(?:click|dblclick)$|^(?:@|v-on:|on:)(?:click|dblclick)(?:[.|][\w.|$-]*)?$/i;
+/**
+ * A custom element: a component in markup that does not spell its name with a capital.
+ *
+ * `t.component` catches React's `<Select>` and `<Foo.Bar>`, and misses every web component and every
+ * Angular or Ionic element - `<mat-checkbox>`, `<mat-list-item>`, `<ion-button>`. A dash in the name
+ * is what the HTML spec reserves for them, and no standard element has one.
+ *
+ * It matters wherever Tewip is about to say something certain about an element whose behaviour is
+ * written somewhere else. `<mat-checkbox (click)="x()">` is a real checkbox with real keyboard
+ * handling once Angular renders it; reading the markup alone it looks like a bare tag with a click.
+ */
+export function customElement(t) {
+    return t.name.includes('-');
+}
 export function clickHandler(t) {
-    return ['onclick', '@click', 'v-on:click', 'on:click'].some((a) => a in t.attrs || t.dynamic.has(a));
+    return [...Object.keys(t.attrs), ...t.dynamic].some((a) => CLICK.test(a));
 }
 export function keyHandler(t) {
     return Object.keys(t.attrs).concat([...t.dynamic]).some((a) => /key(down|up|press)/i.test(a));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tewip-ai",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "mcpName": "io.github.hmamut39/tewip",
   "description": "Tewip finds why each failing test failed - real bug, flaky test, environment, test data or changed selector - for any stack, from the command line, CI, or your editor.",
   "keywords": [