{"_id":"@asanka-npm/a11y-gate-core","_rev":"2-2fbd8850dfdfc581d775175de251e6b7","name":"@asanka-npm/a11y-gate-core","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"name":"@asanka-npm/a11y-gate-core","version":"0.1.2","_id":"@asanka-npm/a11y-gate-core@0.1.2","maintainers":[{"name":"asanka-npm","email":"inbox2asanka@gmail.com"}],"homepage":"https://github.com/asankagit/a11y-gate#readme","bugs":{"url":"https://github.com/asankagit/a11y-gate/issues"},"dist":{"shasum":"b6511ce264259de879ca662f390dec96f59ab288","tarball":"https://registry.npmjs.org/@asanka-npm/a11y-gate-core/-/a11y-gate-core-0.1.2.tgz","fileCount":6,"integrity":"sha512-+dVaiO4sTP9gWs9fTP9YWkdrfwY8lg22dZ5js7qbLl3mKiP7Pv9sbCuDFhlfNkDQmAc5wyJYBHQskLs54eBihg==","signatures":[{"sig":"MEUCID3mtbeRIKvbPQjlJlhY4MH4ECK1aWWA4yhvKnZtIJeaAiEAt677RKjX1Zr78Aduu1M0vJXB633OYPPIUSFqGBp8LFI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45991},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"99092ad45e693c98fe546ddd3f15039f3facfa96","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"asanka-npm","email":"inbox2asanka@gmail.com"},"repository":{"url":"git+https://github.com/asankagit/a11y-gate.git","type":"git"},"_npmVersion":"10.9.3","description":"Retrofitting WCAG compliance onto legacy React components","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.4.5","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y-gate-core_0.1.2_1777816836242_0.0014651352950538765","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to @a11y-gate/core"}},"time":{"created":"2026-05-03T14:00:36.038Z","modified":"2026-05-03T15:00:56.584Z","0.1.2":"2026-05-03T14:00:36.377Z"},"bugs":{"url":"https://github.com/asankagit/a11y-gate/issues"},"homepage":"https://github.com/asankagit/a11y-gate#readme","repository":{"url":"git+https://github.com/asankagit/a11y-gate.git","type":"git"},"description":"Retrofitting WCAG compliance onto legacy React components","maintainers":[{"name":"asanka-npm","email":"inbox2asanka@gmail.com"}],"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"}