{"_id":"@a11y-gate/core","name":"@a11y-gate/core","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"name":"@a11y-gate/core","version":"0.1.2","repository":{"type":"git","url":"git+https://github.com/asankagit/a11y-gate.git"},"homepage":"https://github.com/asankagit/a11y-gate#readme","bugs":{"url":"https://github.com/asankagit/a11y-gate/issues"},"description":"Retrofitting WCAG compliance onto legacy React components","type":"module","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"}},"sideEffects":false,"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@types/react":"^18.3.3","@types/react-dom":"^18.3.0","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.1.0","typescript":"^5.4.5"},"publishConfig":{"access":"public"},"engines":{"node":">=18"},"_id":"@a11y-gate/core@0.1.2","gitHead":"9644fe7557307991ea050faecd249639adc1d482","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-+g63xQ98zH+epMF/J9F6UBvlCdGo8oLiLQsNHSWP2eLmpIGcHcVn06ress5yjxpO1B4hfoMLrW48Xzne5M9QrQ==","shasum":"b5c94440e5fe4463ada2d91020dd14868e28f87c","tarball":"https://registry.npmjs.org/@a11y-gate/core/-/core-0.1.2.tgz","fileCount":6,"unpackedSize":45980,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDdjPfE2QeUWje2D/obNSZf5/5Y48tcPjOqfkU4D/DmogIgO8iZg/qrZNP/JeBxeuJ/MDU6J4CmERvR7I8FsDe+mw8="}]},"_npmUser":{"name":"asanka-npm","email":"inbox2asanka@gmail.com"},"directories":{},"maintainers":[{"name":"asanka-npm","email":"inbox2asanka@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/core_0.1.2_1777820129656_0.06645750275291618"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-03T14:55:29.588Z","0.1.2":"2026-05-03T14:55:29.805Z","modified":"2026-05-03T14:55:30.008Z"},"maintainers":[{"name":"asanka-npm","email":"inbox2asanka@gmail.com"}],"description":"Retrofitting WCAG compliance onto legacy React components","homepage":"https://github.com/asankagit/a11y-gate#readme","repository":{"type":"git","url":"git+https://github.com/asankagit/a11y-gate.git"},"bugs":{"url":"https://github.com/asankagit/a11y-gate/issues"},"readme":"# @a11y-gate/core\n\nRuntime React library for WCAG 2.1 Level AA compliance on legacy components.\n\nWorks as a non-invasive wrapper — no modifications to source files required.\n\n## Install\n\n```bash\nnpm install @a11y-gate/core\n# or\npnpm add @a11y-gate/core\n```\n\n## Requirements\n\n- React >= 17\n- `a11y-gate.config.json` generated by `@a11y-gate/cli`\n\n## Usage\n\n### 1. Wrap your app root with `A11yGateProvider`\n\n```tsx\n// main.tsx or _app.tsx\nimport config from './a11y-gate.config.json';\nimport { A11yGateProvider } from '@a11y-gate/core';\n\nexport default function App() {\n  return (\n    <A11yGateProvider config={config}>\n      {/* your app */}\n    </A11yGateProvider>\n  );\n}\n```\n\n### 2. Wrap each legacy overlay component with `Shield`\n\n```tsx\nimport { Shield } from '@a11y-gate/core';\n\n// Somewhere in your component tree\n<Shield component=\"LegacyDrawer\">\n  <LegacyDrawer isOpen={open} onClose={close} title=\"Settings\" />\n</Shield>\n```\n\nThe `component` prop must match a `componentName` in your `a11y-gate.config.json`.\n\n## What Shield does\n\n| Feature | Behaviour |\n|---|---|\n| Focus trap | Traps Tab/Shift+Tab inside the overlay when `triggerProp === true` |\n| Escape key | Global listener calls `closeHandler` on the topmost active overlay |\n| Background inert | Applies `aria-hidden + inert` to `rootSelector` while any overlay is active |\n| Focus restore | Returns focus to the previously focused element when overlay closes |\n| Tab-order patching | Optionally adds reversible `tabIndex=0` to legacy interactive elements |\n| Tab-order preview | Optionally shows numbered tab-order badges in development |\n\n## Tab-order preview and patching\n\nEnable preview globally in `a11y-gate.config.json`:\n\n```json\n{\n  \"version\": \"1\",\n  \"tab_order_preview\": true,\n  \"tab_order_preview_production\": false,\n  \"tab_order_preview_scope\": \"both\",\n  \"components\": [\n    {\n      \"componentName\": \"LegacyPopup\",\n      \"componentType\": \"modal\",\n      \"triggerProp\": \"isOpen\",\n      \"closeHandler\": \"onClose\",\n      \"rootSelector\": \"#root\",\n      \"tabOrder\": {\n        \"auto\": true,\n        \"patches\": [\n          {\n            \"selector\": \"[data-action='close']\",\n            \"role\": \"button\",\n            \"label\": \"Close\"\n          }\n        ]\n      }\n    }\n  ]\n}\n```\n\n`tabOrder.auto` uses conservative heuristics for legacy clickable markup such as\n`[role=\"button\"]`, `[role=\"link\"]`, `[onclick]`, `[data-action]`,\n`[data-a11y-gate-tab]`, and visible pointer-style elements.\n\n`tabOrder.patches` is the reliable path for ambiguous legacy DOM. It adds\n`tabIndex=0` in DOM order, optional `role`, optional `aria-label`, and keyboard\nactivation for Enter/Space. All changes are restored when the overlay closes.\n\nThe preview is development-only by default. Production preview requires both\n`tab_order_preview: true` and `tab_order_preview_production: true`.\n\n`tab_order_preview_scope` controls where badges appear:\n\n| Scope | Behaviour |\n|---|---|\n| `overlay` | Default. Show badges only inside active `Shield` overlays |\n| `global` | Show badges across the whole page, including header/footer links |\n| `both` | Show global page badges and active overlay badges |\n\n## Bundle size\n\n~1.6kb gzipped (ESM). React is a peer dependency and not bundled.\n","readmeFilename":"README.md","_rev":"1-ece3c252ddd0c2dd1bc7dc6bc977750f"}