@echothink-ui/accessibility 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# @echothink-ui/accessibility
+
+Accessibility package for EchoThink app-domain websites.
+
+This package is part of the EchoThink-UI app-domain library. It is designed for normal website app domains rendered inside EchoThink Studio's Chromium shell, not for implementing the studio browser chrome itself.

package/dist/index.cjs

@@ -0,0 +1,97 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  VisuallyHidden: () => VisuallyHidden,
+  announce: () => announce,
+  getFocusableElements: () => getFocusableElements,
+  useReducedMotion: () => useReducedMotion
+});
+module.exports = __toCommonJS(index_exports);
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function VisuallyHidden({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        whiteSpace: "nowrap",
+        width: 1
+      },
+      children
+    }
+  );
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  });
+  React.useEffect(() => {
+    const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!query) return;
+    const listener = () => setReduced(query.matches);
+    query.addEventListener("change", listener);
+    return () => query.removeEventListener("change", listener);
+  }, []);
+  return reduced;
+}
+function getFocusableElements(root) {
+  return Array.from(
+    root.querySelectorAll(
+      "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])"
+    )
+  ).filter((element) => !element.hasAttribute("disabled"));
+}
+function announce(message, politeness = "polite") {
+  const region = document.createElement("div");
+  region.setAttribute("aria-live", politeness);
+  region.style.position = "absolute";
+  region.style.left = "-9999px";
+  region.textContent = message;
+  document.body.append(region);
+  window.setTimeout(() => region.remove(), 1e3);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VisuallyHidden,
+  announce,
+  getFocusableElements,
+  useReducedMotion
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport function VisuallyHidden({ children }: { children: React.ReactNode }) {\n  return (\n    <span\n      style={{\n        border: 0,\n        clip: \"rect(0 0 0 0)\",\n        height: 1,\n        margin: -1,\n        overflow: \"hidden\",\n        padding: 0,\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: 1\n      }}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport function useReducedMotion() {\n  const [reduced, setReduced] = React.useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches ?? false;\n  });\n\n  React.useEffect(() => {\n    const query = window.matchMedia?.(\"(prefers-reduced-motion: reduce)\");\n    if (!query) return;\n    const listener = () => setReduced(query.matches);\n    query.addEventListener(\"change\", listener);\n    return () => query.removeEventListener(\"change\", listener);\n  }, []);\n  return reduced;\n}\n\nexport function getFocusableElements(root: HTMLElement) {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(\n      \"a[href], button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])\"\n    )\n  ).filter((element) => !element.hasAttribute(\"disabled\"));\n}\n\nexport function announce(message: string, politeness: \"polite\" | \"assertive\" = \"polite\") {\n  const region = document.createElement(\"div\");\n  region.setAttribute(\"aria-live\", politeness);\n  region.style.position = \"absolute\";\n  region.style.left = \"-9999px\";\n  region.textContent = message;\n  document.body.append(region);\n  window.setTimeout(() => region.remove(), 1000);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AAInB;AAFG,SAAS,eAAe,EAAE,SAAS,GAAkC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,mBAAmB;AACjC,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,MAAM;AACjD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,aAAa,kCAAkC,EAAE,WAAW;AAAA,EAC5E,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,UAAM,QAAQ,OAAO,aAAa,kCAAkC;AACpE,QAAI,CAAC,MAAO;AACZ,UAAM,WAAW,MAAM,WAAW,MAAM,OAAO;AAC/C,UAAM,iBAAiB,UAAU,QAAQ;AACzC,WAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAAA,EAC3D,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AAEO,SAAS,qBAAqB,MAAmB;AACtD,SAAO,MAAM;AAAA,IACX,KAAK;AAAA,MACH;AAAA,IACF;AAAA,EACF,EAAE,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,UAAU,CAAC;AACzD;AAEO,SAAS,SAAS,SAAiB,aAAqC,UAAU;AACvF,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,SAAO,aAAa,aAAa,UAAU;AAC3C,SAAO,MAAM,WAAW;AACxB,SAAO,MAAM,OAAO;AACpB,SAAO,cAAc;AACrB,WAAS,KAAK,OAAO,MAAM;AAC3B,SAAO,WAAW,MAAM,OAAO,OAAO,GAAG,GAAI;AAC/C;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare function VisuallyHidden({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useReducedMotion(): boolean;
+export declare function getFocusableElements(root: HTMLElement): HTMLElement[];
+export declare function announce(message: string, politeness?: "polite" | "assertive"): void;

package/dist/index.js

@@ -0,0 +1,59 @@
+// src/index.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function VisuallyHidden({ children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        whiteSpace: "nowrap",
+        width: 1
+      },
+      children
+    }
+  );
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  });
+  React.useEffect(() => {
+    const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!query) return;
+    const listener = () => setReduced(query.matches);
+    query.addEventListener("change", listener);
+    return () => query.removeEventListener("change", listener);
+  }, []);
+  return reduced;
+}
+function getFocusableElements(root) {
+  return Array.from(
+    root.querySelectorAll(
+      "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])"
+    )
+  ).filter((element) => !element.hasAttribute("disabled"));
+}
+function announce(message, politeness = "polite") {
+  const region = document.createElement("div");
+  region.setAttribute("aria-live", politeness);
+  region.style.position = "absolute";
+  region.style.left = "-9999px";
+  region.textContent = message;
+  document.body.append(region);
+  window.setTimeout(() => region.remove(), 1e3);
+}
+export {
+  VisuallyHidden,
+  announce,
+  getFocusableElements,
+  useReducedMotion
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport function VisuallyHidden({ children }: { children: React.ReactNode }) {\n  return (\n    <span\n      style={{\n        border: 0,\n        clip: \"rect(0 0 0 0)\",\n        height: 1,\n        margin: -1,\n        overflow: \"hidden\",\n        padding: 0,\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: 1\n      }}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport function useReducedMotion() {\n  const [reduced, setReduced] = React.useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches ?? false;\n  });\n\n  React.useEffect(() => {\n    const query = window.matchMedia?.(\"(prefers-reduced-motion: reduce)\");\n    if (!query) return;\n    const listener = () => setReduced(query.matches);\n    query.addEventListener(\"change\", listener);\n    return () => query.removeEventListener(\"change\", listener);\n  }, []);\n  return reduced;\n}\n\nexport function getFocusableElements(root: HTMLElement) {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(\n      \"a[href], button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])\"\n    )\n  ).filter((element) => !element.hasAttribute(\"disabled\"));\n}\n\nexport function announce(message: string, politeness: \"polite\" | \"assertive\" = \"polite\") {\n  const region = document.createElement(\"div\");\n  region.setAttribute(\"aria-live\", politeness);\n  region.style.position = \"absolute\";\n  region.style.left = \"-9999px\";\n  region.textContent = message;\n  document.body.append(region);\n  window.setTimeout(() => region.remove(), 1000);\n}\n"],"mappings":";AAAA,YAAY,WAAW;AAInB;AAFG,SAAS,eAAe,EAAE,SAAS,GAAkC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,mBAAmB;AACjC,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,MAAM;AACjD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,aAAa,kCAAkC,EAAE,WAAW;AAAA,EAC5E,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,UAAM,QAAQ,OAAO,aAAa,kCAAkC;AACpE,QAAI,CAAC,MAAO;AACZ,UAAM,WAAW,MAAM,WAAW,MAAM,OAAO;AAC/C,UAAM,iBAAiB,UAAU,QAAQ;AACzC,WAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAAA,EAC3D,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AAEO,SAAS,qBAAqB,MAAmB;AACtD,SAAO,MAAM;AAAA,IACX,KAAK;AAAA,MACH;AAAA,IACF;AAAA,EACF,EAAE,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,UAAU,CAAC;AACzD;AAEO,SAAS,SAAS,SAAiB,aAAqC,UAAU;AACvF,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,SAAO,aAAa,aAAa,UAAU;AAC3C,SAAO,MAAM,WAAW;AACxB,SAAO,MAAM,OAAO;AACpB,SAAO,cAAc;AACrB,WAAS,KAAK,OAAO,MAAM;AAC3B,SAAO,WAAW,MAAM,OAAO,OAAO,GAAG,GAAI;AAC/C;","names":[]}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@echothink-ui/accessibility",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
+  },
+  "dependencies": {
+    "@echothink-ui/core": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --sourcemap --clean --external react --external react-dom && tsc -p tsconfig.json --declaration --emitDeclarationOnly --noEmit false --outDir dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --config ../../vitest.config.ts --passWithNoTests",
+    "lint": "eslint src"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+export function VisuallyHidden({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      style={{
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        whiteSpace: "nowrap",
+        width: 1
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  });
+
+  React.useEffect(() => {
+    const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!query) return;
+    const listener = () => setReduced(query.matches);
+    query.addEventListener("change", listener);
+    return () => query.removeEventListener("change", listener);
+  }, []);
+  return reduced;
+}
+
+export function getFocusableElements(root: HTMLElement) {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(
+      "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])"
+    )
+  ).filter((element) => !element.hasAttribute("disabled"));
+}
+
+export function announce(message: string, politeness: "polite" | "assertive" = "polite") {
+  const region = document.createElement("div");
+  region.setAttribute("aria-live", politeness);
+  region.style.position = "absolute";
+  region.style.left = "-9999px";
+  region.textContent = message;
+  document.body.append(region);
+  window.setTimeout(() => region.remove(), 1000);
+}