@a.nemreen/a11y 0.1.3 → 0.1.6

package/README.md

@@ -75,6 +75,10 @@ Accessibility.mount();
 
 [https://nemreen.info/a11y](https://nemreen.info/a11y)
 
+## Architecture
+
+[arc42](docs/architecture/README.md) (what to document) and [C4](docs/architecture/c4/README.md) (how to visualize it) — goals, context, building blocks, runtime, decisions, and known risks.
+
 ## License
 
 MIT © [Ahmed Nemreen](https://nemreen.info)

package/dist/index.cjs

@@ -475,7 +475,8 @@ function createSkipLink(options = {}) {
   position: absolute;
   inset-inline-start: 1rem;
   top: 1rem;
-  z-index: 10000;
+  z-index: 2147483647;
+  pointer-events: auto;
   padding: 0.5rem 1rem;
   border-radius: 0.375rem;
   background: #fff;
@@ -660,7 +661,10 @@ function getCopy(locale) {
 
 // src/icons.ts
 var ICONS = {
-  access: '<path d="M12 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-1 7h2l1.5 4H16l-1 2h-1.2L12.5 11h-1L10.2 15H9l-1-2h1.5L11 9Zm-5.5 9.5L8 14l1.2 1.6L12 12l2.8 3.6L16 14l2.5 4.5H5.5Z"/>',
+  /**
+   * GDS access icon (exact markup from the design system).
+   */
+  access: '<path fill="currentColor" d="M16.853 8.265a.75.75 0 0 1 .294 1.47l-4.397.88v2.24l1.946 4.867a.75.75 0 1 1-1.392.556L12 15.02l-1.304 3.258a.75.75 0 1 1-1.392-.556l1.946-4.867v-2.24l-4.397-.88a.75.75 0 1 1 .294-1.47l4.853.97zM12 5.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5"/><path fill="currentColor" fill-rule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25m0 1.5a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5" clip-rule="evenodd"/>',
   close: '<path d="M6.7 6.7a1 1 0 0 1 1.4 0L12 10.6l3.9-3.9a1 1 0 1 1 1.4 1.4L13.4 12l3.9 3.9a1 1 0 0 1-1.4 1.4L12 13.4l-3.9 3.9a1 1 0 0 1-1.4-1.4L10.6 12 6.7 8.1a1 1 0 0 1 0-1.4Z"/>',
   flash: '<path d="M13 2 4 14h7l-1 8 10-14h-7l1-6Z"/>',
   eye: '<path d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"/>',
@@ -702,6 +706,9 @@ var STROKE_ICONS = /* @__PURE__ */ new Set([
 ]);
 function iconSvg(name, size = 18) {
   const path = ICONS[name] ?? ICONS.access;
+  if (name === "access") {
+    return `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="a11y-icon" width="${size}" height="${size}" aria-hidden="true" focusable="false">${path}</svg>`;
+  }
   if (STROKE_ICONS.has(name)) {
     return `<svg class="a11y-icon" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${path}</svg>`;
   }
@@ -761,6 +768,8 @@ var A11yWidget = class {
       e.preventDefault();
       this.draggingMask = true;
     };
+    this.topObserver = null;
+    this.topFrame = 0;
     this.ctrl = ctrl;
     this.position = options.position ?? "end";
     this.stack = Math.max(0, options.stack ?? 0);
@@ -778,11 +787,16 @@ var A11yWidget = class {
     document.addEventListener("keydown", this.onKeyDown);
     document.addEventListener("pointermove", this.onPointerMove);
     document.addEventListener("pointerup", this.onPointerUp);
+    this.keepOnTop();
     this.render();
   }
   destroy() {
     this.unsub?.();
     this.unsub = null;
+    this.topObserver?.disconnect();
+    this.topObserver = null;
+    if (this.topFrame) cancelAnimationFrame(this.topFrame);
+    this.topFrame = 0;
     this.rootEl?.removeEventListener("click", this.onRootClick);
     this.rootEl?.removeEventListener("pointerdown", this.onRootPointerDown);
     document.removeEventListener("keydown", this.onKeyDown);
@@ -792,6 +806,25 @@ var A11yWidget = class {
     this.rootEl?.remove();
     this.rootEl = null;
   }
+  /** Stay the last child so equal-z-index overlays appended later cannot cover us. */
+  keepOnTop() {
+    const parent = this.rootEl?.parentElement;
+    if (!parent || !this.rootEl) return;
+    const bump = () => {
+      if (!this.rootEl || this.rootEl.parentElement !== parent) return;
+      if (parent.lastElementChild === this.rootEl) return;
+      parent.appendChild(this.rootEl);
+    };
+    this.topObserver = new MutationObserver(() => {
+      if (this.topFrame) return;
+      this.topFrame = requestAnimationFrame(() => {
+        this.topFrame = 0;
+        bump();
+      });
+    });
+    this.topObserver.observe(parent, { childList: true });
+    bump();
+  }
   copy() {
     return getCopy(this.ctrl.locale);
   }

package/dist/index.d.cts

@@ -142,9 +142,13 @@ declare class A11yWidget {
     private onPointerUp;
     private onRootClick;
     private onRootPointerDown;
+    private topObserver;
+    private topFrame;
     constructor(ctrl: A11yController, options?: A11yWidgetOptions);
     mount(): void;
     destroy(): void;
+    /** Stay the last child so equal-z-index overlays appended later cannot cover us. */
+    private keepOnTop;
     private copy;
     private fabBottom;
     private activeChips;

package/dist/index.d.ts

@@ -142,9 +142,13 @@ declare class A11yWidget {
     private onPointerUp;
     private onRootClick;
     private onRootPointerDown;
+    private topObserver;
+    private topFrame;
     constructor(ctrl: A11yController, options?: A11yWidgetOptions);
     mount(): void;
     destroy(): void;
+    /** Stay the last child so equal-z-index overlays appended later cannot cover us. */
+    private keepOnTop;
     private copy;
     private fabBottom;
     private activeChips;

package/dist/index.js

@@ -473,7 +473,8 @@ function createSkipLink(options = {}) {
   position: absolute;
   inset-inline-start: 1rem;
   top: 1rem;
-  z-index: 10000;
+  z-index: 2147483647;
+  pointer-events: auto;
   padding: 0.5rem 1rem;
   border-radius: 0.375rem;
   background: #fff;
@@ -658,7 +659,10 @@ function getCopy(locale) {
 
 // src/icons.ts
 var ICONS = {
-  access: '<path d="M12 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-1 7h2l1.5 4H16l-1 2h-1.2L12.5 11h-1L10.2 15H9l-1-2h1.5L11 9Zm-5.5 9.5L8 14l1.2 1.6L12 12l2.8 3.6L16 14l2.5 4.5H5.5Z"/>',
+  /**
+   * GDS access icon (exact markup from the design system).
+   */
+  access: '<path fill="currentColor" d="M16.853 8.265a.75.75 0 0 1 .294 1.47l-4.397.88v2.24l1.946 4.867a.75.75 0 1 1-1.392.556L12 15.02l-1.304 3.258a.75.75 0 1 1-1.392-.556l1.946-4.867v-2.24l-4.397-.88a.75.75 0 1 1 .294-1.47l4.853.97zM12 5.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5"/><path fill="currentColor" fill-rule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25m0 1.5a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5" clip-rule="evenodd"/>',
   close: '<path d="M6.7 6.7a1 1 0 0 1 1.4 0L12 10.6l3.9-3.9a1 1 0 1 1 1.4 1.4L13.4 12l3.9 3.9a1 1 0 0 1-1.4 1.4L12 13.4l-3.9 3.9a1 1 0 0 1-1.4-1.4L10.6 12 6.7 8.1a1 1 0 0 1 0-1.4Z"/>',
   flash: '<path d="M13 2 4 14h7l-1 8 10-14h-7l1-6Z"/>',
   eye: '<path d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"/>',
@@ -700,6 +704,9 @@ var STROKE_ICONS = /* @__PURE__ */ new Set([
 ]);
 function iconSvg(name, size = 18) {
   const path = ICONS[name] ?? ICONS.access;
+  if (name === "access") {
+    return `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="a11y-icon" width="${size}" height="${size}" aria-hidden="true" focusable="false">${path}</svg>`;
+  }
   if (STROKE_ICONS.has(name)) {
     return `<svg class="a11y-icon" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${path}</svg>`;
   }
@@ -759,6 +766,8 @@ var A11yWidget = class {
       e.preventDefault();
       this.draggingMask = true;
     };
+    this.topObserver = null;
+    this.topFrame = 0;
     this.ctrl = ctrl;
     this.position = options.position ?? "end";
     this.stack = Math.max(0, options.stack ?? 0);
@@ -776,11 +785,16 @@ var A11yWidget = class {
     document.addEventListener("keydown", this.onKeyDown);
     document.addEventListener("pointermove", this.onPointerMove);
     document.addEventListener("pointerup", this.onPointerUp);
+    this.keepOnTop();
     this.render();
   }
   destroy() {
     this.unsub?.();
     this.unsub = null;
+    this.topObserver?.disconnect();
+    this.topObserver = null;
+    if (this.topFrame) cancelAnimationFrame(this.topFrame);
+    this.topFrame = 0;
     this.rootEl?.removeEventListener("click", this.onRootClick);
     this.rootEl?.removeEventListener("pointerdown", this.onRootPointerDown);
     document.removeEventListener("keydown", this.onKeyDown);
@@ -790,6 +804,25 @@ var A11yWidget = class {
     this.rootEl?.remove();
     this.rootEl = null;
   }
+  /** Stay the last child so equal-z-index overlays appended later cannot cover us. */
+  keepOnTop() {
+    const parent = this.rootEl?.parentElement;
+    if (!parent || !this.rootEl) return;
+    const bump = () => {
+      if (!this.rootEl || this.rootEl.parentElement !== parent) return;
+      if (parent.lastElementChild === this.rootEl) return;
+      parent.appendChild(this.rootEl);
+    };
+    this.topObserver = new MutationObserver(() => {
+      if (this.topFrame) return;
+      this.topFrame = requestAnimationFrame(() => {
+        this.topFrame = 0;
+        bump();
+      });
+    });
+    this.topObserver.observe(parent, { childList: true });
+    bump();
+  }
   copy() {
     return getCopy(this.ctrl.locale);
   }

package/dist/styles.css

@@ -279,6 +279,13 @@ html {
   --a11y-fab-size: 3.5rem;
   --a11y-fab-edge: 2rem;
   --a11y-fab-stack-step: 4.25rem;
+  /* Beat host overlays (modals, CDK, 2147483000 FABs). Override via --a11y-z. */
+  --a11y-z: 2147483647;
+  position: fixed;
+  inset: 0;
+  z-index: var(--a11y-z);
+  isolation: isolate;
+  pointer-events: none;
   /* Isolate widget chrome from page font-scale / spacing modes */
   font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   font-size: 14px;
@@ -294,6 +301,12 @@ html {
   word-spacing: normal;
 }
 
+.a11y-fab,
+.a11y-layer,
+.a11y-mask-toolbar {
+  pointer-events: auto;
+}
+
 .a11y-fab {
   position: fixed;
   z-index: 390;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a.nemreen/a11y",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "Framework-agnostic accessibility tools widget — profiles, readable experience, visual filters. Works with Angular, React, Vue, and plain HTML.",
   "author": {
     "name": "Ahmed Nemreen",
@@ -24,8 +24,15 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "default": "./dist/index.js"
     },
     "./styles.css": "./dist/styles.css"
   },