{"_id":"@crisruedap/a11y-lens","_rev":"4-e2102feda44f25e32a20e4427cae973f","name":"@crisruedap/a11y-lens","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@crisruedap/a11y-lens","version":"1.0.0","keywords":["storybook","accessibility","a11y","react","addon","wcag"],"author":"","license":"MIT","_id":"@crisruedap/a11y-lens@1.0.0","maintainers":[{"name":"crisruedap","email":"crisruedap@gmail.com"}],"homepage":"https://github.com/CrisRuedaP/a11y-lens","bugs":{"url":"https://github.com/CrisRuedaP/a11y-lens/issues"},"dist":{"shasum":"8584dae7457957ca0c7126d017f901f162301077","tarball":"https://registry.npmjs.org/@crisruedap/a11y-lens/-/a11y-lens-1.0.0.tgz","fileCount":18,"integrity":"sha512-h5wVxZfr2+zfp0YrMzC5+oE/5qtbSDCtvIWyNA2S6KnKHBsuL4QbHhVg7pMnFoch475QTv0LK5+pS2cSqJQ/Pw==","signatures":[{"sig":"MEYCIQCMgux5ADsB/EgRde+4x2bQYonIT8wffI1wGWFTdSGN+wIhAMFIgE4HrL2F9V2ER4DZzAybcabq7ZnuytOXpzzTgMgy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":61899},"main":"./dist/preset.js","types":"./dist/preset.d.ts","module":"./dist/preset.mjs","exports":{".":{"types":"./dist/preset.d.ts","import":"./dist/preset.mjs","require":"./dist/preset.js"},"./preset":{"types":"./dist/preset.d.ts","import":"./dist/preset.mjs","require":"./dist/preset.js"},"./manager":{"types":"./dist/manager.d.ts","import":"./dist/manager.mjs","require":"./dist/manager.js"},"./preview":{"types":"./dist/preview.d.ts","import":"./dist/preview.mjs","require":"./dist/preview.js"}},"gitHead":"ee3f95fb59796238136f8d56d03152a78c8dcd81","scripts":{"test":"vitest","build":"tsup","test:ui":"vitest --ui","storybook":"storybook dev -p 6006","prepublishOnly":"pnpm build","build-storybook":"storybook build"},"_npmUser":{"name":"crisruedap","email":"crisruedap@gmail.com"},"repository":{"url":"git+https://github.com/CrisRuedaP/a11y-lens.git","type":"git"},"_npmVersion":"10.8.2","description":"A Storybook addon that explains accessibility issues with human impact — who is affected, what they experience, and how to fix it","directories":{},"_nodeVersion":"20.19.5","dependencies":{"dom-accessibility-api":"^0.7.1"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.33.0","devDependencies":{"tsup":"^8.5.1","vite":"^5.0.0","jsdom":"^24.0.0","react":"^18.0.0","vitest":"^2.0.0","react-dom":"^18.0.0","storybook":"^8.6.0","@vitest/ui":"^2.0.0","typescript":"^5.0.0","@types/node":"^25.9.2","@types/react":"^18.0.0","@storybook/react":"^8.6.0","@storybook/types":"^8.6.0","@types/react-dom":"^18.0.0","@storybook/addon-a11y":"^8.6.0","@storybook/addon-docs":"^8.6.0","@storybook/components":"^8.6.18","@storybook/react-vite":"^8.6.0","@storybook/core-events":"^8.6.14","@storybook/manager-api":"^8.6.0","@storybook/preview-api":"^8.6.18","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","storybook":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y-lens_1.0.0_1780931361909_0.9390204307922845","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@crisruedap/a11y-lens","version":"1.0.1","keywords":["storybook","accessibility","a11y","react","addon","wcag"],"author":"","license":"MIT","_id":"@crisruedap/a11y-lens@1.0.1","maintainers":[{"name":"crisruedap","email":"crisruedap@gmail.com"}],"homepage":"https://github.com/CrisRuedaP/a11y-lens","bugs":{"url":"https://github.com/CrisRuedaP/a11y-lens/issues"},"dist":{"shasum":"dbf060b0019b61e5c08fcb4350bc37aca2b0b810","tarball":"https://registry.npmjs.org/@crisruedap/a11y-lens/-/a11y-lens-1.0.1.tgz","fileCount":18,"integrity":"sha512-uHyxAtS5qZ4BYDfxqP5CjaUzRGStvWeEsvBgzDUSVbrw2MTONB/dj+SrzsTXO1r130JA0nIjCUJeJc3IoLe7iA==","signatures":[{"sig":"MEYCIQC5qxDZ4hnzzuGxYGw1wRDNEmbcj9yUkXZOAwAbIOWbzwIhANSGWKBz4KQD2kW3NtGbRqDT4TogMsMMf0no9MhBDw5p","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62198},"main":"./dist/preset.js","types":"./dist/preset.d.ts","module":"./dist/preset.mjs","exports":{".":{"types":"./dist/preset.d.ts","import":"./dist/preset.mjs","require":"./dist/preset.js"},"./preset":{"types":"./dist/preset.d.ts","import":"./dist/preset.mjs","require":"./dist/preset.js"},"./manager":{"types":"./dist/manager.d.ts","import":"./dist/manager.mjs","require":"./dist/manager.js"},"./preview":{"types":"./dist/preview.d.ts","import":"./dist/preview.mjs","require":"./dist/preview.js"}},"gitHead":"0c6f96358750be92564cb75f0aeced2c124c556a","scripts":{"test":"vitest","build":"tsup","test:ui":"vitest --ui","storybook":"storybook dev -p 6006","prepublishOnly":"pnpm build","build-storybook":"storybook build"},"_npmUser":{"name":"crisruedap","email":"crisruedap@gmail.com"},"repository":{"url":"git+https://github.com/CrisRuedaP/a11y-lens.git","type":"git"},"_npmVersion":"10.8.2","description":"A Storybook addon that explains accessibility issues with human impact — who is affected, what they experience, and how to fix it","directories":{},"_nodeVersion":"20.19.5","dependencies":{"dom-accessibility-api":"^0.7.1"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.33.0","devDependencies":{"tsup":"^8.5.1","vite":"^5.0.0","jsdom":"^24.0.0","react":"^18.0.0","vitest":"^2.0.0","react-dom":"^18.0.0","storybook":"^8.6.0","@vitest/ui":"^2.0.0","typescript":"^5.0.0","@types/node":"^25.9.2","@types/react":"^18.0.0","@storybook/react":"^8.6.0","@storybook/types":"^8.6.0","@types/react-dom":"^18.0.0","@storybook/addon-a11y":"^8.6.0","@storybook/addon-docs":"^8.6.0","@storybook/components":"^8.6.18","@storybook/react-vite":"^8.6.0","@storybook/core-events":"^8.6.14","@storybook/manager-api":"^8.6.0","@storybook/preview-api":"^8.6.18","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","storybook":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y-lens_1.0.1_1780934208447_0.7405373821094543","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@crisruedap/a11y-lens","version":"1.0.2","keywords":["storybook","accessibility","a11y","react","addon","wcag"],"author":"","license":"MIT","_id":"@crisruedap/a11y-lens@1.0.2","maintainers":[{"name":"crisruedap","email":"crisruedap@gmail.com"}],"homepage":"https://github.com/CrisRuedaP/a11y-lens","bugs":{"url":"https://github.com/CrisRuedaP/a11y-lens/issues"},"dist":{"shasum":"70ef8104e310d63bc5be1647d0f7ca364ed6959d","tarball":"https://registry.npmjs.org/@crisruedap/a11y-lens/-/a11y-lens-1.0.2.tgz","fileCount":18,"integrity":"sha512-yxNPqh6MXMznIbIPRsP/fSioVcc0GNxqEVsDNFpybpfSM6VzG2eY69wdJlKiwXKMHTqglDp4I9f2DldNT5fF0A==","signatures":[{"sig":"MEYCIQCy8A6Vb3Ir9Tp8/A03EVd0e+Twr7gD0ZqxzfY+YDMYgwIhAM3ZjtNrHzciBoytsFo/yO7Itxvb3ZuOiLaEFibfIpA6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62782},"main":"./dist/preset.js","types":"./dist/preset.d.ts","module":"./dist/preset.mjs","exports":{".":{"types":"./dist/preset.d.ts","import":"./dist/preset.mjs","require":"./dist/preset.js"},"./preset":{"types":"./dist/preset.d.ts","import":"./dist/preset.mjs","require":"./dist/preset.js"},"./manager":{"types":"./dist/manager.d.ts","import":"./dist/manager.mjs","require":"./dist/manager.js"},"./preview":{"types":"./dist/preview.d.ts","import":"./dist/preview.mjs","require":"./dist/preview.js"}},"gitHead":"70b3c68daa5d989de0649abc4fdea0c14272621e","scripts":{"test":"vitest","build":"tsup","test:ui":"vitest --ui","storybook":"storybook dev -p 6006","prepublishOnly":"pnpm build","build-storybook":"storybook build"},"_npmUser":{"name":"crisruedap","email":"crisruedap@gmail.com"},"repository":{"url":"git+https://github.com/CrisRuedaP/a11y-lens.git","type":"git"},"_npmVersion":"10.8.2","description":"A Storybook addon that explains accessibility issues with human impact — who is affected, what they experience, and how to fix it","directories":{},"_nodeVersion":"20.19.5","dependencies":{"dom-accessibility-api":"^0.7.1"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.33.0","devDependencies":{"tsup":"^8.5.1","vite":"^5.0.0","jsdom":"^24.0.0","react":"^18.0.0","vitest":"^2.0.0","react-dom":"^18.0.0","storybook":"^8.6.0","@vitest/ui":"^2.0.0","typescript":"^5.0.0","@types/node":"^25.9.2","@types/react":"^18.0.0","@storybook/react":"^8.6.0","@storybook/types":"^8.6.0","@types/react-dom":"^18.0.0","@storybook/addon-a11y":"^8.6.0","@storybook/addon-docs":"^8.6.0","@storybook/components":"^8.6.18","@storybook/react-vite":"^8.6.0","@storybook/core-events":"^8.6.14","@storybook/manager-api":"^8.6.0","@storybook/preview-api":"^8.6.18","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","storybook":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y-lens_1.0.2_1781023040671_0.006787247080914938","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@crisruedap/a11y-lens","version":"1.0.3","description":"A Storybook addon that explains accessibility issues with human impact — who is affected, what they experience, and how to fix it","main":"./dist/preset.js","module":"./dist/preset.mjs","types":"./dist/preset.d.ts","exports":{".":{"types":"./dist/preset.d.ts","require":"./dist/preset.js","import":"./dist/preset.mjs"},"./manager":{"types":"./dist/manager.d.ts","require":"./dist/manager.js","import":"./dist/manager.mjs"},"./preview":{"types":"./dist/preview.d.ts","require":"./dist/preview.js","import":"./dist/preview.mjs"},"./preset":{"types":"./dist/preset.d.ts","require":"./dist/preset.js","import":"./dist/preset.mjs"}},"scripts":{"build":"tsup","prepublishOnly":"pnpm build","test":"vitest","test:ui":"vitest --ui","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","storybook":"^8.0.0"},"keywords":["storybook","accessibility","a11y","react","addon","wcag"],"author":"","license":"MIT","repository":{"type":"git","url":"git+https://github.com/CrisRuedaP/a11y-lens.git"},"homepage":"https://github.com/CrisRuedaP/a11y-lens","packageManager":"pnpm@10.33.0","devDependencies":{"@storybook/addon-a11y":"^8.6.0","@storybook/addon-docs":"^8.6.0","@storybook/components":"^8.6.18","@storybook/core-events":"^8.6.14","@storybook/manager-api":"^8.6.0","@storybook/preview-api":"^8.6.18","@storybook/react":"^8.6.0","@storybook/react-vite":"^8.6.0","@storybook/types":"^8.6.0","@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^16.0.0","@types/node":"^25.9.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@vitest/ui":"^2.0.0","jsdom":"^24.0.0","react":"^18.0.0","react-dom":"^18.0.0","storybook":"^8.6.0","tsup":"^8.5.1","typescript":"^5.0.0","vite":"^5.0.0","vitest":"^2.1.9"},"dependencies":{"dom-accessibility-api":"^0.7.1"},"_id":"@crisruedap/a11y-lens@1.0.3","gitHead":"32a788e0d9d3c4cd4e64824737a01f1d8c2e8b3e","bugs":{"url":"https://github.com/CrisRuedaP/a11y-lens/issues"},"_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-lJbcN27SwV3dMwhUgr6o65O6ICVJ4JtaDqZXC0KLcL6ZdZmCNNtqJzyFwqekxmnHOuaFrI3KzFYA23mtod/3nQ==","shasum":"f592b1200fed59b493b3a8fdcb5bdca2b187b338","tarball":"https://registry.npmjs.org/@crisruedap/a11y-lens/-/a11y-lens-1.0.3.tgz","fileCount":18,"unpackedSize":65587,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGlDSStFf8WGAyROSjdU9/uWZppulC0RaPOaw71ZnHHVAiEAowe2HBP+bicJtNxLc7wmLlAlvhinQ5aHNXhkvolR82I="}]},"_npmUser":{"name":"crisruedap","email":"crisruedap@gmail.com"},"directories":{},"maintainers":[{"name":"crisruedap","email":"crisruedap@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/a11y-lens_1.0.3_1781518970080_0.5339269856902942"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-08T15:09:21.738Z","modified":"2026-06-15T10:22:50.305Z","1.0.0":"2026-06-08T15:09:22.066Z","1.0.1":"2026-06-08T15:56:48.586Z","1.0.2":"2026-06-09T16:37:20.818Z","1.0.3":"2026-06-15T10:22:50.206Z"},"bugs":{"url":"https://github.com/CrisRuedaP/a11y-lens/issues"},"license":"MIT","homepage":"https://github.com/CrisRuedaP/a11y-lens","keywords":["storybook","accessibility","a11y","react","addon","wcag"],"repository":{"type":"git","url":"git+https://github.com/CrisRuedaP/a11y-lens.git"},"description":"A Storybook addon that explains accessibility issues with human impact — who is affected, what they experience, and how to fix it","maintainers":[{"name":"crisruedap","email":"crisruedap@gmail.com"}],"readme":"# a11y-lens\n\nThis is an early-stage project exploring a different approach to accessibility in Storybook.\nInstead of just reporting violations, a11y-lens explains them:\nwho is affected, what the experience is like, why it matters,\nand how to fix it.\n\n## The problem\n\nMost accessibility tools are good at detection, but they present issues as\na compliance checklist. They output messages like\n\"Element does not have an accessible name\" — technically correct,\nbut easy to deprioritize.\n\nThe 2026 WebAIM Million report found that 95.9% of the top 1,000,000\nhomepages have detectable WCAG failures ([WebAIM Million Report](https://webaim.org/projects/million/)). The problem is not that\ndevelopers don't know how to fix issues. The problem is prioritization.\n\na11y-lens addresses this by making the human cost visible\nat the moment the component is built.\n\n## What it shows\n\nFor each story in Storybook, the A11y Lens panel shows:\n\n- Detected role and accessible name\n- Focusable state\n- Issues with: who is affected, what they experience, why it matters\n- A copy-pasteable React fix suggestion\n\nExample panel entry for a dialog with no accessible name:\n\n**Issue:** Dialog has no accessible name  \n**Affects:** Screen reader users  \n**Experience:** When the dialog opens, the screen reader announces \"dialog\" and moves focus inside — but doesn't say what it's about. Users lose the context they need before interacting.  \n**Why it matters:** Without a name, users don't know what the dialog is about before interacting with it.  \n**Fix:**\n\n```jsx\n<dialog aria-labelledby=\"dialog-title\">\n  <h2 id=\"dialog-title\">Confirm deletion</h2>\n  <p>Are you sure you want to delete this item?</p>\n</dialog>\n```\n\n## When to use it\n\nDuring component development in Storybook.\na11y-lens provides immediate, contextual feedback on accessibility\nissues as you build — before they reach production.\n\n## Supported patterns\n\n- Button — missing accessible name, non-focusable interactive elements\n- Input — missing label\n- Dialog — missing accessible name\n\n## How this differs from automated tools\n\na11y-lens may flag issues that automated tools like axe consider passing.\n\nAutomated tools validate whether elements meet technical accessibility rules.\na11y-lens focuses on how those elements are actually experienced by users.\n\nFor example, a button with only an emoji or an input that relies on placeholder text\nmay technically pass automated checks, but still create confusion for screen reader users.\n\n## Current limitations\n\n- Supports Button, Input, and Dialog patterns only\n- Issue explanations are rule-based and not yet context-aware\n- Focused on Storybook development workflows\n\n## Installation (from source)\n\n```bash\ngit clone https://github.com/CrisRuedaP/a11y-lens\ncd a11y-lens\npnpm install\npnpm storybook\n```\n\nOpen Storybook at localhost:6006 and navigate to any story.\nThe A11y Lens tab appears in the addon panel.\nSwitch between broken and fixed stories to see the analysis update.\n\n## Installation (npm)\n\n```bash\npnpm add -D @crisruedap/a11y-lens\n```\n\nAdd `\"@crisruedap/a11y-lens\"` to your `.storybook/main.js` addons array.\n\n## Screenshots\n\n<p align=\"center\">\n  <img src=\"docs/screenshots/panel-dialog.png\" width=\"800\" \n    alt=\"A11y Lens panel showing an accessibility issue explanation for a dialog component\" />\n</p>\n\n> If the image doesn't load, [view it on GitHub](https://github.com/CrisRuedaP/a11y-lens#screenshots).\n\n## Roadmap\n\nNext:\n\n- Context-aware dynamic fix suggestions\n- Multi-issue grouping per element\n\nArchitecture:\n\n- Move analysis logic to preview for direct DOM access\n\nExplorations:\n\n- Screen reader simulation\n- Visual impairment simulations\n\n## Tech stack\n\n- React + TypeScript + Storybook (Vite)\n- dom-accessibility-api for accessible name computation\n- Vitest for unit and integration tests\n- GitHub Actions for CI\n\n## License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md"}