tewip-ai 0.57.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/dist/engine/schema/dialect-rules.js

@@ -46,11 +46,16 @@ const DJANGO = [
         instead: 'for a large table, work in batches with atomic = False on the migration and make it resumable. For a small one this is fine - Tewip cannot see how many rows there are',
     },
     {
-        find: /AddIndex\(|AddConstraint\(/i,
+        // The model is named, for two reasons. A finding that says "adds an index or constraint" without
+        // saying to what is most of the way to useless, and `createdHere` - which stops an index on a
+        // table created moments earlier from counting as a lock - matches on the table name, so with no
+        // name it could never suppress anything here. Django writes it `AddIndex(model_name="order", ...)`.
+        find: /(?:AddIndex|AddConstraint)\s*\([\s\S]{0,120}?model_name\s*=\s*["']([\w]+)["']/i,
         unless: /AddIndexConcurrently|AddConstraintNotValid|atomic\s*=\s*False/,
         risk: 'locks-writes',
-        what: () => 'adds an index or constraint, which Django builds with a lock unless told otherwise',
+        what: (m) => `adds an index or constraint to ${m[1]}, which Django builds with a lock unless told otherwise`,
         instead: 'AddIndexConcurrently / AddConstraintNotValid from django.contrib.postgres.operations, with atomic = False on the migration',
+        table: (m) => m[1],
     },
 ];
 /** Rails migrations. */

package/dist/engine/schema/migration-files.js

@@ -4,7 +4,8 @@
 // across a whole checkout rather than across a diff and that file went past the 300-line rule.
 // Keeping it in one place is the point: the alternative was a copy of these patterns in a script,
 // and two definitions of "is this a migration" drift the moment one of them is fixed.
-import { readdirSync, statSync } from 'node:fs';
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { dialectOf } from './frameworks.js';
 import { join, relative } from 'node:path';
 // A directory called `migration/` says what is probably in it, not what every file in it is. This
 // matched *anything* underneath one, so Keycloak's `docs/guides/migration/index.adoc` and its 113
@@ -70,8 +71,29 @@ export function migrationsUnder(root, limit = 20_000) {
                 continue;
             }
             const rel = relative(root, full).replaceAll(String.fromCharCode(92), '/');
-            if (SCHEMA_FILE.test(rel) || MIGRATION.test(rel) || NAMED_MIGRATION.test(rel))
-                found.push(rel);
+            if (!SCHEMA_FILE.test(rel) && !MIGRATION.test(rel) && !NAMED_MIGRATION.test(rel))
+                continue;
+            // And it has to look like one inside. Phase 44 stopped a directory called `migration/` from
+            // claiming every file under it by extension; discourse shows that was not enough. `lib/migration/
+            // helpers.rb` is a library module, `table_dropper.rb` is a class, and
+            // `migrations/converters/config/locales/migrations.en.yml` is a locale file - all three were
+            // selected, none could be read, and all three were reported as migrations Tewip could not read.
+            // 550 of discourse's 3,095, which is a "could not read" list that is mostly library code.
+            //
+            // `dialectOf` is the one definition of what a migration is written in, so it decides here too:
+            // a file whose dialect is unknown is not an unreadable migration, it is not a migration.
+            if (info.size > 2_000_000)
+                continue;
+            let text = '';
+            try {
+                text = readFileSync(full, 'utf8');
+            }
+            catch {
+                continue;
+            }
+            if (dialectOf(rel, text) === 'unknown')
+                continue;
+            found.push(rel);
         }
     };
     walk(root, 0);

package/dist/engine/schema/schema-command.js

@@ -46,6 +46,11 @@ function createdHere(text) {
     // EF Core puts the name on the line after the call, so these have to reach across a newline.
     const FRAMEWORK_CREATES = [
         /migrationBuilder\s*\.\s*CreateTable\s*\([\s\S]{0,80}?name\s*:\s*["']([\w$.]+)["']/gi,
+        // Django names the model rather than the table, and so does its AddIndex, so the two match each
+        // other. Saleor never exercises this - Django convention puts CreateModel and AddIndex in
+        // separate migrations - but every other dialect here has its create form registered and this
+        // one did not, which is the kind of gap that waits for a project with different habits.
+        /migrations\s*\.\s*CreateModel\s*\([\s\S]{0,60}?name\s*=\s*["']([\w]+)["']/gi,
         /queryInterface\s*\.\s*createTable\s*\(\s*["']([\w$.]+)["']/gi,
         /knex\s*\.\s*schema\s*\.\s*createTable\s*\(\s*["']([\w$.]+)["']/gi,
         /Schema\s*::\s*create\s*\(\s*["']([\w$.]+)["']/gi,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tewip-ai",
-  "version": "0.57.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": [