wcag-scanner 1.2.62 → 1.2.64

package/dist/react/WcagDevOverlay.js

@@ -238,8 +238,15 @@ const WcagDevOverlay = ({ level = 'AA', rules, position = 'bottom-right', deboun
             clearAllHighlights();
     }, [open]);
     // ── Scan ────────────────────────────────────────────────────────────────
+    const scanningRef = (0, react_1.useRef)(false);
     const scan = (0, react_1.useCallback)(async () => {
+        var _a;
+        if (scanningRef.current)
+            return;
+        scanningRef.current = true;
         setScanning(true);
+        // Pause observer while scanning to prevent scan-triggered mutations causing rescans
+        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
         try {
             const opts = { level, rules };
             const res = await (0, browserScanner_1.scanBrowserPage)(opts);
@@ -247,7 +254,17 @@ const WcagDevOverlay = ({ level = 'AA', rules, position = 'bottom-right', deboun
             setLastScan(new Date());
         }
         finally {
+            scanningRef.current = false;
             setScanning(false);
+            // Reconnect observer after scan settles
+            if (observerRef.current) {
+                observerRef.current.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['class', 'hidden', 'aria-hidden', 'role', 'alt', 'src', 'href'],
+                });
+            }
         }
     }, [level, rules]);
     (0, react_1.useEffect)(() => { scan(); }, [scan]);
@@ -265,7 +282,9 @@ const WcagDevOverlay = ({ level = 'AA', rules, position = 'bottom-right', deboun
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter: ['class', 'style', 'hidden', 'aria-hidden', 'role', 'alt', 'src', 'href'],
+            // 'style' intentionally excluded — our highlight helper modifies inline styles
+            // on page elements which would cause an infinite rescan loop
+            attributeFilter: ['class', 'hidden', 'aria-hidden', 'role', 'alt', 'src', 'href'],
         });
         return () => {
             var _a;
@@ -413,13 +432,11 @@ const WcagDevOverlay = ({ level = 'AA', rules, position = 'bottom-right', deboun
         fontSize: 13,
         fontWeight: active ? 600 : 400,
         color: active ? '#7c3aed' : '#64748b',
-        borderBottom: active ? '2px solid #7c3aed' : '2px solid transparent',
         cursor: 'pointer',
         background: 'none',
         border: 'none',
-        borderBottomColor: active ? '#7c3aed' : 'transparent',
-        borderBottomStyle: 'solid',
-        borderBottomWidth: 2,
+        // Use inset box-shadow instead of borderBottom to avoid shorthand/longhand conflict
+        boxShadow: active ? 'inset 0 -2px 0 #7c3aed' : 'none',
         whiteSpace: 'nowrap',
     });
     const filterSelectStyle = {

package/dist/react/init.d.ts

@@ -2,10 +2,9 @@
  * initWcagOverlay — auto-injects the WCAG Dev Inspector overlay.
  *
  * Call this from any file (js / ts / jsx / tsx) in your app entry point.
- * It is a no-op outside of development (process.env.NODE_ENV !== 'development').
+ * It is a no-op in production builds.
  *
  * @example
- *   // main.ts / index.js / App.tsx — one line is all you need:
  *   import { initWcagOverlay } from 'wcag-scanner/react';
  *   initWcagOverlay();
  *

package/dist/react/init.js

@@ -3,88 +3,54 @@
  * initWcagOverlay — auto-injects the WCAG Dev Inspector overlay.
  *
  * Call this from any file (js / ts / jsx / tsx) in your app entry point.
- * It is a no-op outside of development (process.env.NODE_ENV !== 'development').
+ * It is a no-op in production builds.
  *
  * @example
- *   // main.ts / index.js / App.tsx — one line is all you need:
  *   import { initWcagOverlay } from 'wcag-scanner/react';
  *   initWcagOverlay();
  *
  *   // With options:
  *   initWcagOverlay({ level: 'AAA', position: 'bottom-left', debounce: 500 });
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initWcagOverlay = initWcagOverlay;
+const react_1 = __importDefault(require("react"));
+const WcagDevOverlay_1 = require("./WcagDevOverlay");
 function initWcagOverlay(options = {}) {
-    // Only run in browser + development
-    if (typeof window === 'undefined')
+    if (typeof window === 'undefined' || typeof document === 'undefined')
         return;
     if (typeof process !== 'undefined' && process.env.NODE_ENV === 'production')
         return;
     const mount = () => {
-        // Don't mount twice
         if (document.querySelector('[data-wcag-overlay-root]'))
             return;
         const container = document.createElement('div');
         container.setAttribute('data-wcag-overlay-root', 'true');
         document.body.appendChild(container);
-        // Dynamically import React + ReactDOM to avoid bundling them twice
-        Promise.all([
-            Promise.resolve().then(() => __importStar(require('react'))),
-            Promise.resolve().then(() => __importStar(require('react-dom'))),
-            Promise.resolve().then(() => __importStar(require('./WcagDevOverlay'))),
-        ]).then(([React, ReactDOM, { WcagDevOverlay }]) => {
-            var _a, _b;
-            const ReactAny = React;
-            const r = (_a = ReactAny.default) !== null && _a !== void 0 ? _a : ReactAny;
-            const el = r.createElement(WcagDevOverlay, options);
-            // Vite/ESM may wrap the module under .default
-            const rdAny = ReactDOM;
-            const rd = (_b = rdAny.default) !== null && _b !== void 0 ? _b : rdAny;
-            // React 18: createRoot
-            if (rd.createRoot) {
-                rd.createRoot(container).render(el);
-            }
-            else {
-                // React 17 fallback
-                rd.render(el, container);
-            }
-        }).catch((err) => {
+        const el = react_1.default.createElement(WcagDevOverlay_1.WcagDevOverlay, options);
+        // React 18+: use createRoot from react-dom/client
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const { createRoot } = require('react-dom/client');
+            createRoot(container).render(el);
+            return;
+        }
+        catch (_a) {
+            // react-dom/client not available — React 17
+        }
+        // React 17 fallback
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const ReactDOM = require('react-dom');
+            ReactDOM.render(el, container);
+        }
+        catch (err) {
             console.warn('[wcag-scanner] Failed to mount overlay:', err);
-        });
+            document.body.removeChild(container);
+        }
     };
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', mount, { once: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wcag-scanner",
-  "version": "1.2.62",
+  "version": "1.2.64",
   "description": "Scan HTML for WCAG accessibility violations with AI-powered fix suggestions",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",