@ngbracket/a11y-devtools 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Duncan Faulkner and Lara Sanz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -6,8 +6,7 @@ back to **the component that rendered it** — the attribution React overlay too
 
 Report `♿ UserCardComponent — 2 issue(s)` instead of a wall of CSS selectors.
 
-Part of the `@ngbracket` Angular tooling family. See
-[`docs/findings.md`](docs/findings.md) for the research and scope.
+Part of the `@ngbracket` Angular tooling family.
 
 ## Status
 
@@ -89,7 +88,7 @@ npm run build   # tsc -> dist/ (ESM + .d.ts)
 ## Roadmap
 
 - **`host` / `hostDirectives` a11y** via `getDirectives(el)` — the runtime cases
-  the item-2 lint plugin can't see statically.
+  a static ESLint pass can't see.
 - Per-component filtering and a violation count badge.
 
 Done: attribution · axe scan · grouped console reporter · dev-only provider ·

package/dist/attribution.d.ts

@@ -12,6 +12,13 @@
 export interface NgDebugGlobal {
     getComponent(element: Element): unknown;
     getOwningComponent(element: Element | object): unknown;
+    getDirectives(element: Element | object): unknown[];
 }
 export declare function ngDebug(): NgDebugGlobal | undefined;
 export declare function resolveOwningComponentName(node: Element): string | null;
+/**
+ * Names of the directives applied directly to `node`, including those attached
+ * via `hostDirectives` — the runtime-only a11y cases the static lint plugin
+ * can't see. Empty when the debug global is absent or the node has none.
+ */
+export declare function resolveDirectiveNames(node: Element): string[];

package/dist/attribution.js

@@ -1,10 +1,19 @@
 export function ngDebug() {
     return globalThis.ng;
 }
+/**
+ * Angular's dev output can emit class names with a leading underscore
+ * (e.g. `_Login` for `Login`); strip it so attribution shows the authored name.
+ */
+function cleanName(name) {
+    if (!name)
+        return null;
+    return name.replace(/^_+/, '') || null;
+}
 function nameOf(instance) {
     if (!instance || typeof instance !== 'object')
         return null;
-    return instance.constructor.name ?? null;
+    return cleanName(instance.constructor.name ?? null);
 }
 export function resolveOwningComponentName(node) {
     const ng = ngDebug();
@@ -13,3 +22,27 @@ export function resolveOwningComponentName(node) {
     const component = ng.getComponent(node) ?? ng.getOwningComponent(node);
     return nameOf(component);
 }
+/**
+ * Names of the directives applied directly to `node`, including those attached
+ * via `hostDirectives` — the runtime-only a11y cases the static lint plugin
+ * can't see. Empty when the debug global is absent or the node has none.
+ */
+export function resolveDirectiveNames(node) {
+    const ng = ngDebug();
+    if (!ng?.getDirectives)
+        return [];
+    let directives;
+    try {
+        directives = ng.getDirectives(node) ?? [];
+    }
+    catch {
+        return []; // node isn't part of a live view
+    }
+    const names = [];
+    for (const directive of directives) {
+        const name = nameOf(directive);
+        if (name)
+            names.push(name);
+    }
+    return names;
+}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { provideA11yDevtools, type A11yDevtoolsOptions } from './provider';
-export { runA11yScan, type RunOptions } from './runner';
-export { scan, type A11yFinding, type Impact } from './scan';
-export { logFindings, type Logger } from './report';
-export { resolveOwningComponentName, ngDebug, type NgDebugGlobal } from './attribution';
-export { createOverlay, OVERLAY_ATTR, OVERLAY_EXCLUDE_SELECTOR, type A11yOverlay, type OverlayOptions, } from './overlay';
+export { provideA11yDevtools, type A11yDevtoolsOptions } from './provider.js';
+export { runA11yScan, type RunOptions } from './runner.js';
+export { scan, type A11yFinding, type Impact } from './scan.js';
+export { logFindings, type Logger } from './report.js';
+export { resolveOwningComponentName, ngDebug, type NgDebugGlobal } from './attribution.js';
+export { createOverlay, OVERLAY_ATTR, OVERLAY_EXCLUDE_SELECTOR, type A11yOverlay, type OverlayOptions, } from './overlay.js';

package/dist/index.js

@@ -1,6 +1,6 @@
-export { provideA11yDevtools } from './provider';
-export { runA11yScan } from './runner';
-export { scan } from './scan';
-export { logFindings } from './report';
-export { resolveOwningComponentName, ngDebug } from './attribution';
-export { createOverlay, OVERLAY_ATTR, OVERLAY_EXCLUDE_SELECTOR, } from './overlay';
+export { provideA11yDevtools } from './provider.js';
+export { runA11yScan } from './runner.js';
+export { scan } from './scan.js';
+export { logFindings } from './report.js';
+export { resolveOwningComponentName, ngDebug } from './attribution.js';
+export { createOverlay, OVERLAY_ATTR, OVERLAY_EXCLUDE_SELECTOR, } from './overlay.js';

package/dist/overlay.d.ts

@@ -1,4 +1,4 @@
-import type { A11yFinding } from './scan';
+import type { A11yFinding } from './scan.js';
 /**
  * Attribute marking the overlay's own DOM. `scan()` excludes anything under it
  * so the tool never reports violations against its own highlights.

package/dist/provider.d.ts

@@ -1,5 +1,5 @@
 import { type EnvironmentProviders } from '@angular/core';
-import type { Logger } from './report';
+import type { Logger } from './report.js';
 export interface A11yDevtoolsOptions {
     /** Element/Document to scan. Defaults to `document`. */
     root?: () => Element | Document;

package/dist/provider.js

@@ -1,7 +1,7 @@
 import { ApplicationRef, DestroyRef, inject, isDevMode, makeEnvironmentProviders, provideEnvironmentInitializer, } from '@angular/core';
 import { debounceTime, filter } from 'rxjs';
-import { runA11yScan } from './runner';
-import { createOverlay } from './overlay';
+import { runA11yScan } from './runner.js';
+import { createOverlay } from './overlay.js';
 /**
  * Dev-only in-app accessibility auditing. Rescans whenever the application
  * settles (zoneless-aware, via `ApplicationRef.isStable`) and reports each

package/dist/report.d.ts

@@ -1,4 +1,4 @@
-import type { A11yFinding } from './scan';
+import type { A11yFinding } from './scan.js';
 /** Minimal console-shaped sink, so reporting is testable without the real console. */
 export interface Logger {
     groupCollapsed(label: string): void;

package/dist/report.js

@@ -17,10 +17,12 @@ export function logFindings(findings, logger = console) {
         else
             byComponent.set(key, [finding]);
     }
+    logger.info(`♿ a11y-devtools: ${findings.length} issue(s) across ${byComponent.size} component(s)`);
     for (const [component, items] of byComponent) {
         logger.groupCollapsed(`♿ ${component} — ${items.length} issue(s)`);
         for (const finding of items) {
-            logger.warn(`${finding.impact ?? 'n/a'} · ${finding.id}: ${finding.help}`, `\n  ${finding.target}\n  ${finding.helpUrl}`);
+            const via = finding.directives.length ? ` [via ${finding.directives.join(', ')}]` : '';
+            logger.warn(`${finding.impact ?? 'n/a'} · ${finding.id}: ${finding.help}${via}`, `\n  ${finding.target}\n  ${finding.helpUrl}`);
         }
         logger.groupEnd();
     }

package/dist/runner.d.ts

@@ -1,5 +1,5 @@
-import { type A11yFinding } from './scan';
-import { type Logger } from './report';
+import { type A11yFinding } from './scan.js';
+import { type Logger } from './report.js';
 export interface RunOptions {
     /** Log grouped findings to the console. Default true. */
     log?: boolean;

package/dist/runner.js

@@ -1,5 +1,5 @@
-import { scan } from './scan';
-import { logFindings } from './report';
+import { scan } from './scan.js';
+import { logFindings } from './report.js';
 /** Scan `root`, optionally report, and return the findings. */
 export async function runA11yScan(root, options = {}) {
     const findings = await scan(root ?? document);

package/dist/scan.d.ts

@@ -9,6 +9,8 @@ export interface A11yFinding {
     helpUrl: string;
     /** Owning component name, or null when attribution isn't available (prod). */
     component: string | null;
+    /** Directives on the flagged node (incl. hostDirectives); [] when none/unavailable. */
+    directives: string[];
     /** CSS selector axe reported for the node. */
     target: string;
     html: string;

package/dist/scan.js

@@ -1,5 +1,5 @@
-import { resolveOwningComponentName } from './attribution';
-import { OVERLAY_EXCLUDE_SELECTOR } from './overlay';
+import { resolveDirectiveNames, resolveOwningComponentName } from './attribution.js';
+import { OVERLAY_EXCLUDE_SELECTOR } from './overlay.js';
 // axe-core is a singleton and throws if a run starts while another is in flight.
 // Chain runs so overlapping callers (e.g. rapid rescans) serialize safely.
 let runChain = Promise.resolve();
@@ -37,6 +37,7 @@ async function runAxeOnce(root, options) {
                 help: violation.help,
                 helpUrl: violation.helpUrl,
                 component: element ? resolveOwningComponentName(element) : null,
+                directives: element ? resolveDirectiveNames(element) : [],
                 target,
                 html: node.html,
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngbracket/a11y-devtools",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Dev-only in-app accessibility auditing for Angular that maps each axe violation back to the component that rendered it — the attribution React overlay tools can't do.",
   "license": "MIT",
   "author": "Duncan Faulkner",
@@ -10,7 +10,7 @@
   "homepage": "https://ngbracket.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ngbracket/a11y-devtools"
+    "url": "git+https://github.com/ngbracket/a11y-devtools.git"
   },
   "keywords": [
     "angular",
@@ -29,7 +29,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist"