@alew896/a11y-reader 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function A11yOverlay(): react_jsx_runtime.JSX.Element;
+
+declare function useA11yReader(): {
+    current: string;
+    logs: string[];
+};
+
+export { A11yOverlay, useA11yReader };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function A11yOverlay(): react_jsx_runtime.JSX.Element;
+
+declare function useA11yReader(): {
+    current: string;
+    logs: string[];
+};
+
+export { A11yOverlay, useA11yReader };

package/dist/index.js

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  A11yOverlay: () => A11yOverlay,
+  useA11yReader: () => useA11yReader
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/A11yOverlay.tsx
+var import_react2 = require("react");
+
+// src/useA11yReader.tsx
+var import_react = require("react");
+
+// src/utils/getA11yText.ts
+function getA11yText(el) {
+  const role = el.getAttribute("role") || el.tagName.toLowerCase();
+  const label = el.getAttribute("aria-label") || el.textContent?.trim() || "";
+  const checked = el.getAttribute("aria-checked") === "true" || el.checked;
+  const state = checked ? "checked" : "";
+  return [role, label, state].filter(Boolean).join("  ");
+}
+
+// src/useA11yReader.tsx
+function useA11yReader() {
+  const [current, setCurrent] = (0, import_react.useState)("");
+  const [logs, setLogs] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
+    const handler = (e) => {
+      const el = e.target;
+      const text = getA11yText(el);
+      setCurrent(text);
+      setLogs((prev) => [text, ...prev.slice(0, 20)]);
+    };
+    document.addEventListener("focusin", handler);
+    return () => {
+      document.removeEventListener("focusin", handler);
+    };
+  }, []);
+  return { current, logs };
+}
+
+// src/A11yOverlay.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function A11yOverlay() {
+  const { current, logs } = useA11yReader();
+  const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    let isDragging = false;
+    el.onmousedown = () => isDragging = true;
+    document.onmouseup = () => isDragging = false;
+    document.onmousemove = (e) => {
+      if (!isDragging) return;
+      el.style.left = e.pageX + "px";
+      el.style.top = e.pageY + "px";
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      style: {
+        position: "fixed",
+        top: 20,
+        right: 20,
+        width: 300,
+        background: "#111",
+        color: "#fff",
+        padding: 10,
+        borderRadius: 8,
+        zIndex: 9999,
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: "bold" }, children: "A11y Reader" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: 10 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Current:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: current })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 10, maxHeight: 150, overflow: "auto" }, children: logs.map((log, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: log }, i)) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  A11yOverlay,
+  useA11yReader
+});

package/dist/index.mjs

@@ -0,0 +1,82 @@
+// src/A11yOverlay.tsx
+import { useRef, useEffect as useEffect2 } from "react";
+
+// src/useA11yReader.tsx
+import { useEffect, useState } from "react";
+
+// src/utils/getA11yText.ts
+function getA11yText(el) {
+  const role = el.getAttribute("role") || el.tagName.toLowerCase();
+  const label = el.getAttribute("aria-label") || el.textContent?.trim() || "";
+  const checked = el.getAttribute("aria-checked") === "true" || el.checked;
+  const state = checked ? "checked" : "";
+  return [role, label, state].filter(Boolean).join("  ");
+}
+
+// src/useA11yReader.tsx
+function useA11yReader() {
+  const [current, setCurrent] = useState("");
+  const [logs, setLogs] = useState([]);
+  useEffect(() => {
+    const handler = (e) => {
+      const el = e.target;
+      const text = getA11yText(el);
+      setCurrent(text);
+      setLogs((prev) => [text, ...prev.slice(0, 20)]);
+    };
+    document.addEventListener("focusin", handler);
+    return () => {
+      document.removeEventListener("focusin", handler);
+    };
+  }, []);
+  return { current, logs };
+}
+
+// src/A11yOverlay.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function A11yOverlay() {
+  const { current, logs } = useA11yReader();
+  const ref = useRef(null);
+  useEffect2(() => {
+    const el = ref.current;
+    if (!el) return;
+    let isDragging = false;
+    el.onmousedown = () => isDragging = true;
+    document.onmouseup = () => isDragging = false;
+    document.onmousemove = (e) => {
+      if (!isDragging) return;
+      el.style.left = e.pageX + "px";
+      el.style.top = e.pageY + "px";
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      style: {
+        position: "fixed",
+        top: 20,
+        right: 20,
+        width: 300,
+        background: "#111",
+        color: "#fff",
+        padding: 10,
+        borderRadius: 8,
+        zIndex: 9999,
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: "bold" }, children: "A11y Reader" }),
+        /* @__PURE__ */ jsxs("div", { style: { marginTop: 10 }, children: [
+          /* @__PURE__ */ jsx("strong", { children: "Current:" }),
+          /* @__PURE__ */ jsx("div", { children: current })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { marginTop: 10, maxHeight: 150, overflow: "auto" }, children: logs.map((log, i) => /* @__PURE__ */ jsx("div", { children: log }, i)) })
+      ]
+    }
+  );
+}
+export {
+  A11yOverlay,
+  useA11yReader
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@alew896/a11y-reader",
+  "version": "0.1.0",
+  "description": "A11y text-based screen reader simulator overlay for React apps",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+
+  "files": ["dist"],
+
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format esm,cjs",
+    "prepublishOnly": "npm run build"
+  },
+
+  "keywords": ["a11y", "accessibility", "screen-reader", "aria", "react"],
+  "author": "Chirag Athwani",
+  "license": "MIT",
+
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  }
+}