{"_id":"@access-kit/react","_rev":"4-b90cf91a93e242a9112976800bf40694","name":"@access-kit/react","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@access-kit/react","version":"0.1.0","keywords":["react","accessibility","a11y","wcag","axe-core","devtools","accessibility-widget","aria"],"license":"MIT","_id":"@access-kit/react@0.1.0","maintainers":[{"name":"terranovadev","email":"ldejoliveira@tnova.dev"}],"homepage":"https://github.com/TerraNova-Devs/AccessKit#readme","bugs":{"url":"https://github.com/TerraNova-Devs/AccessKit/issues"},"dist":{"shasum":"7a504da96f7e195b8bc9a01d4dd14c2a701f52b1","tarball":"https://registry.npmjs.org/@access-kit/react/-/react-0.1.0.tgz","fileCount":7,"integrity":"sha512-waJAL6enwh9bmaG2YKHNpIAla5tccoy29LpPoZdMigMkRid26AwNepdrR1KdgLK65x97tG9P4UPMK5FE+AXwJg==","signatures":[{"sig":"MEUCIF1Pd71W/4yaAvokOLDoN+unSCK0oiKAYdehE9OqEwE7AiEA1EC18P2ZLscTBiE+PgDZqoQHCmjvhmryNpHzFMss0n0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":370169},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"6612a3c71beb42323f9591c3faa650f99fc77a87","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","lint":"tsc --noEmit","test":"vitest run --environment jsdom","build":"tsup src/index.ts --format cjs,esm --dts --clean","prebuild":"node scripts/embed-lexend.cjs","typecheck":"tsc --noEmit","prepublishOnly":"bun run build"},"_npmUser":{"name":"terranovadev","email":"ldejoliveira@tnova.dev"},"repository":{"url":"git+https://github.com/TerraNova-Devs/AccessKit.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"React accessibility toolkit with provider, devtools, and user widget.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"axe-core":"4.11.2","lucide-react":"0.460.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.5.0","jsdom":"26.1.0","vitest":"2.1.8","typescript":"5.9.2","@types/node":"22.0.0","@types/react":"19.2.2","@types/react-dom":"19.2.2","@fontsource/lexend":"5.0.18"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.0_1776038896653_0.6676082321257664","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@access-kit/react","version":"0.1.1","keywords":["react","accessibility","a11y","wcag","axe-core","devtools","accessibility-widget","aria"],"license":"MIT","_id":"@access-kit/react@0.1.1","maintainers":[{"name":"terranovadev","email":"ldejoliveira@tnova.dev"}],"homepage":"https://github.com/TerraNova-Devs/AccessKit#readme","bugs":{"url":"https://github.com/TerraNova-Devs/AccessKit/issues"},"dist":{"shasum":"45aa19433a4c12c975295a27df86a90541da98cc","tarball":"https://registry.npmjs.org/@access-kit/react/-/react-0.1.1.tgz","fileCount":7,"integrity":"sha512-ayxZi1+6gZxqEJR1JGiP7CGjIANTpQPK6jEEI/tSKBftqlIkN0fHRxhN0YNm0ONMBdjSPSt0U7lEAh/EX8H19Q==","signatures":[{"sig":"MEUCIB5g6OlOV4dieDLBMoZj30rfJ9B3vWRy9ak3HtcMeKr3AiEAx5VLw3dJbKS24vPc/aSGK9s3ZqpnKRMRIPnm3jdvWNI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":370116},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"f7f67465276566f62f7cfe493d0606aae949c72c","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run --environment jsdom","build":"tsup","prebuild":"node scripts/embed-lexend.cjs","typecheck":"tsc --noEmit","prepublishOnly":"bun run build"},"_npmUser":{"name":"terranovadev","email":"ldejoliveira@tnova.dev"},"repository":{"url":"git+https://github.com/TerraNova-Devs/AccessKit.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"React accessibility toolkit with provider, devtools, and user widget.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"axe-core":"4.11.2","lucide-react":"0.460.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.5.0","jsdom":"26.1.0","vitest":"2.1.8","typescript":"5.9.2","@types/node":"22.0.0","@types/react":"19.2.2","@types/react-dom":"19.2.2","@fontsource/lexend":"5.0.18"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.1_1776042515639_0.7048707367628653","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@access-kit/react","version":"0.1.2","keywords":["react","accessibility","a11y","wcag","axe-core","devtools","accessibility-widget","aria"],"license":"MIT","_id":"@access-kit/react@0.1.2","maintainers":[{"name":"terranovadev","email":"ldejoliveira@tnova.dev"}],"homepage":"https://github.com/TerraNova-Devs/AccessKit#readme","bugs":{"url":"https://github.com/TerraNova-Devs/AccessKit/issues"},"dist":{"shasum":"ab39b789ec4e2655a93398e08f9693f430add245","tarball":"https://registry.npmjs.org/@access-kit/react/-/react-0.1.2.tgz","fileCount":7,"integrity":"sha512-qCyFoKbui+qwiaKBR6onWZdYZ8vbP2S1dypKGEWmqsmy4GnXvLBUUlwpqgvbplQwnDFYRaT3aff+3EDt8u+xbw==","signatures":[{"sig":"MEQCIEE42n8fMWBtI3kVlx4db+KQxbimacTG3QJqKOuVMiI5AiAWXR44Dgakx35ZcFyAsE/7YkYRmgmwGKGXoH4T2S70/g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":374368},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"a391644a37dfa65b036d0a9d91d1ba23ca5eb259","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run --environment jsdom","build":"tsup","prebuild":"node scripts/embed-lexend.cjs","typecheck":"tsc --noEmit","prepublishOnly":"bun run build"},"_npmUser":{"name":"terranovadev","email":"ldejoliveira@tnova.dev"},"repository":{"url":"git+https://github.com/TerraNova-Devs/AccessKit.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"React accessibility toolkit with provider, devtools, and user widget.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"axe-core":"4.11.2","lucide-react":"0.460.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.5.0","jsdom":"26.1.0","vitest":"2.1.8","typescript":"5.9.2","@types/node":"22.0.0","@types/react":"19.2.2","@types/react-dom":"19.2.2","@fontsource/lexend":"5.0.18"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.2_1776123029354_0.9605770149203547","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@access-kit/react","version":"0.2.0","description":"React accessibility toolkit with provider, devtools, and user widget.","license":"MIT","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/TerraNova-Devs/AccessKit.git","directory":"packages/react"},"homepage":"https://xskit.dev","bugs":{"url":"https://github.com/TerraNova-Devs/AccessKit/issues"},"keywords":["react","accessibility","a11y","wcag","axe-core","devtools","accessibility-widget","aria"],"scripts":{"prebuild":"node scripts/embed-lexend.cjs","build":"tsup","dev":"tsup --watch","lint":"eslint .","typecheck":"tsc --noEmit","test":"vitest run --environment jsdom","prepublishOnly":"bun run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"axe-core":"4.11.2"},"devDependencies":{"@fontsource/lexend":"5.0.18","@types/node":"22.0.0","@types/react":"19.2.2","@types/react-dom":"19.2.2","jsdom":"26.1.0","tsup":"8.5.0","typescript":"5.9.2","vitest":"2.1.8"},"_id":"@access-kit/react@0.2.0","gitHead":"a05cbaac0ba4827be307a48593ba1e1d548757e0","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-7jbu4KMP6q51yNFqZPcbZtO2X/VOYyGeDHhXzLcmESlMEPfjCq8zWy0j/5yoM+7oz1sPmdcVFrjFHAH+sv864w==","shasum":"31830ae5f7559cb7eb28756cc4bd71ee166544f1","tarball":"https://registry.npmjs.org/@access-kit/react/-/react-0.2.0.tgz","fileCount":8,"unpackedSize":750018,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDRmEG8P21UfQXec6icIVvYmpr1sRBBXW1OIO+C3NYkQAIhAOlML7htfyTpPb2eJaIFTqfrbDQUeaJS1ew4NNkMGi9D"}]},"_npmUser":{"name":"terranovadev","email":"ldejoliveira@tnova.dev"},"directories":{},"maintainers":[{"name":"terranovadev","email":"ldejoliveira@tnova.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.2.0_1785006965222_0.6296578601738212"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-13T00:08:16.561Z","modified":"2026-07-25T19:16:05.726Z","0.1.0":"2026-04-13T00:08:16.795Z","0.1.1":"2026-04-13T01:08:35.794Z","0.1.2":"2026-04-13T23:30:29.522Z","0.2.0":"2026-07-25T19:16:05.412Z"},"bugs":{"url":"https://github.com/TerraNova-Devs/AccessKit/issues"},"license":"MIT","homepage":"https://xskit.dev","keywords":["react","accessibility","a11y","wcag","axe-core","devtools","accessibility-widget","aria"],"repository":{"type":"git","url":"git+https://github.com/TerraNova-Devs/AccessKit.git","directory":"packages/react"},"description":"React accessibility toolkit with provider, devtools, and user widget.","maintainers":[{"name":"terranovadev","email":"ldejoliveira@tnova.dev"}],"readme":"# @access-kit/react\n\nReact accessibility toolkit: provider for user preferences, accessibility widget, and DevTools for in-browser audits.\n\n[Documentation](https://xskit.dev/docs) · [Live Demo](https://xskit.dev/integration-lab)\n\n## Install\n\n```bash\nnpm install @access-kit/react\n# or\nyarn add @access-kit/react\n# or\npnpm add @access-kit/react\n```\n\nPeer dependencies: `react >= 18` and `react-dom >= 18`.\n\n## Quick start\n\n1. Wrap your app with `AccessKitProvider`.\n2. (Optional) Add `AccessibilityWidget` so users can adjust motion, contrast, focus, text spacing, font size, dyslexia-friendly font, and color vision mode.\n3. (Optional) In development, add `AccessKitDevTools` to run accessibility audits and view findings.\n\n```tsx\n// Next.js App Router example — adapt the router hook for your framework.\nimport { usePathname } from \"next/navigation\"\nimport { AccessKitProvider, AccessibilityWidget, AccessKitDevTools } from \"@access-kit/react\"\n\nexport default function RootLayout({ children }) {\n  const pathname = usePathname()\n\n  return (\n    <html lang=\"en\">\n      <body>\n        <AccessKitProvider>\n          {children}\n          <AccessibilityWidget style={{ primary: \"#0ea5e9\" }} />\n          {process.env.NODE_ENV === \"development\" && (\n            <AccessKitDevTools routeKey={pathname} />\n          )}\n        </AccessKitProvider>\n      </body>\n    </html>\n  )\n}\n```\n\n## AccessKitProvider\n\nStores user preferences (reduced motion, high contrast, enhanced focus, text spacing, font size, dyslexia-friendly font, color vision mode) and applies them via `data-accesskit-*` attributes and global styles on `<html>`.\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `storageKey` | `string` | Key for persisting settings in `localStorage`. Default: `\"accesskit:settings\"`. |\n| `defaultSettings` | `Partial<AccessKitSettings>` | Initial settings. |\n| `persist` | `boolean` | Whether to persist to `localStorage`. Default: `true`. |\n| `onPersistError` | `(error: unknown) => void` | Called when writing settings to `localStorage` fails (e.g. quota exceeded, private browsing). |\n| `focusColor` | `string` | CSS color for focus ring when \"Focus indicators\" is on. |\n\n\n## AccessibilityWidget\n\nFloating button that opens a panel where users can toggle reduced motion, high contrast, focus indicators, dyslexia-friendly font, font size, letter spacing, word spacing, line height, and color vision mode (protanopia, deuteranopia, tritanopia). Place it once inside `AccessKitProvider` (e.g. in a layout or root component).\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `style` | `AccessibilityWidgetStyle` | Optional theme overrides (primary, tabBackground, tabIcon, panelBackground, panelText, border, mutedText, icon). |\n| `initialPosition` | `AccessKitPosition` | Position of the floating tab. Default: `\"center-right\"`. |\n| `defaultOpen` | `boolean` | Whether the panel is open on first render. Default: `false`. |\n| `zIndex` | `number` | z-index of the widget. Default: `2147483643`. |\n\n\n## AccessKitDevTools\n\nRuns accessibility audits on the page and shows results in a floating panel with three tabs: **Issues**, **Keyboard**, and **Media**. Render it whenever you need it (e.g. in development or staging); use a conditional in your app if you want it tree-shaken from production builds.\n\n### Issues tab\n\nScans the live DOM using axe-core plus built-in AccessKit custom rules for WCAG 2.0, 2.1, and 2.2 violations. Features:\n\n- **Filters:** severity (Error / Warning), WCAG level (A / AA / AAA / Other), category (Color, Forms, ARIA, Keyboard, etc.), and free-text search.\n- **Element highlighting:** hovering a finding highlights the element on the page.\n- **Fix with AI:** generates a prompt with the finding details and page context for use with an AI assistant.\n- **Scan phases:** the status bar shows the current phase (DOM → Contrast → Custom).\n- **Stale detection:** a MutationObserver watches the DOM after each scan and shows a \"Stale\" badge when the page has changed.\n\n#### Default rules\n\nBy default, the Issues tab runs **only WCAG 2.0, 2.1, and 2.2 Level A, AA, and AAA** rules. All other rule sets are opt-in via `additionalRules`.\n\n#### Opt-in rules: `additionalRules`\n\nTo run extra rule tags, pass `additionalRules` with an array of `AccessKitAdditionalRuleTag` values. This gives you autocomplete and type safety.\n\n```tsx\nimport { AccessKitDevTools, type AccessKitAdditionalRuleTag } from \"@access-kit/react\"\n\n<AccessKitDevTools\n  routeKey={pathname}\n  additionalRules={[\"best-practice\", \"cat.color\", \"section508\"]}\n/>\n```\n\n**Standards & regulations**\n\n| Tag | Description |\n|-----|-------------|\n| `\"best-practice\"` | Industry best-practice recommendations. |\n| `\"section508\"` | US Section 508 rules. |\n| `\"ACT\"` | W3C Accessibility Conformance Testing (ACT) rules. |\n| `\"EN-301-549\"` | European EN 301 549. |\n| `\"TTv5\"` | Trusted Tester v5 (Section 508). |\n| `\"RGAAv4\"` | French RGAA v4. |\n| `\"experimental\"` | Experimental rules (may change). |\n\n\n**Category tags (by topic)**\n\n| Tag | Description |\n|-----|-------------|\n| `\"cat.color\"` | Color and contrast. |\n| `\"cat.forms\"` | Forms and form controls. |\n| `\"cat.aria\"` | ARIA roles and attributes. |\n| `\"cat.keyboard\"` | Keyboard and focus. |\n| `\"cat.name-role-value\"` | Accessible name, role, value. |\n| `\"cat.structure\"` | Headings, landmarks, lists. |\n| `\"cat.tables\"` | Tables. |\n| `\"cat.text-alternatives\"` | Text alternatives. |\n| `\"cat.sensory-and-visual\"` | Presentation and layout. |\n| `\"cat.time-and-media\"` | Time and media. |\n| `\"cat.language\"` | Language. |\n| `\"cat.parsing\"` | Valid markup. |\n| `\"cat.other\"` | Other. |\n\nExample: run WCAG + best-practice + form-related rules:\n\n```tsx\n<AccessKitDevTools routeKey={pathname} additionalRules={[\"best-practice\", \"cat.forms\"]} />\n```\n\n`additionalRules` only affects the Issues tab (axe-core and custom rule scans). The Keyboard and Media tabs run their own dedicated scanners.\n\n### Keyboard tab\n\nScans all focusable elements on the page and reports:\n\n- **Focus visibility:** whether each element has a visible `:focus` / `:focus-visible` indicator or if the outline is suppressed.\n- **Keyboard traps:** elements inside containers with no visible escape (e.g. a dialog without a close button).\n- **Positive tabindex:** elements with `tabindex > 0`, which disrupts natural tab order.\n- **Focus order walk:** step through elements in tab order to verify the sequence makes sense.\n\n### Media tab\n\nScans `<video>`, `<audio>`, and embedded media iframes on the page, plus ARIA live regions:\n\n- **Captions & descriptions:** checks for `<track kind=\"captions\">` and `<track kind=\"descriptions\">`.\n- **Autoplay & controls:** flags media that autoplays without user controls.\n- **Iframe embeds:** checks for missing `title` attributes and warns that captions can't be verified from the host page.\n- **Live regions:** lists elements with `role=\"alert\"`, `role=\"status\"`, or `aria-live`, and flags mismatches (e.g. `role=\"alert\"` with `aria-live=\"polite\"`).\n\n### DevTools props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `routeKey` | `string` | **Required.** Current pathname from your router (e.g. Next.js `usePathname()`, React Router `useLocation().pathname`). Resets findings when the route changes. |\n| `defaultOpen` | `boolean` | Whether the panel is open on first render. Default: `false`. |\n| `position` | `AccessKitPosition` | Position of the tab (e.g. `\"bottom-left\"`). Default: `\"bottom-left\"`. |\n| `zIndex` | `number` | z-index of the panel. Default: `2147483641`. |\n| `additionalRules` | `AccessKitAdditionalRuleTag[]` | Opt-in rule tags (see above). |\n\n## useAccessKit\n\nHook to read and update settings from any component under `AccessKitProvider`:\n\n```tsx\nimport { useAccessKit } from \"@access-kit/react\"\n\nfunction MyComponent() {\n  const {\n    settings,\n    setSetting,\n    toggleSetting,\n    setFontSize,\n    setLetterSpacing,\n    setWordSpacing,\n    setLineHeight,\n    resetSettings,\n  } = useAccessKit()\n\n  return (\n    <button onClick={() => toggleSetting(\"reducedMotion\")}>\n      Reduced motion: {settings.reducedMotion ? \"on\" : \"off\"}\n    </button>\n  )\n}\n```\n\n## Custom rules\n\nAccessKit includes ~30 built-in custom rules that catch WCAG violations not covered by axe-core (e.g. meaningless alt text, missing skip links, non-descriptive link text). These run automatically as part of every audit.\n\nYou can also register your own rules:\n\n```tsx\nimport { registerRules, getRegisteredRules, type AccessKitRule } from \"@access-kit/react\"\n\nconst myRule: AccessKitRule = {\n  id: \"my-app-heading-order\",\n  wcagCriteria: \"1.3.1\",\n  wcagLevel: \"A\",\n  category: \"structure\",\n  description: \"Headings must not skip levels\",\n  helpUrl: \"https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships\",\n  run(doc) {\n    const findings = []\n    // ... your detection logic ...\n    return findings\n  },\n}\n\nregisterRules(myRule)\n\n// Inspect all registered rules (built-in + custom)\nconsole.log(getRegisteredRules())\n```\n\nCustom rules are executed in the third audit phase (`\"custom\"`) after axe-core scans. Each rule's `run` function receives the `Document` and returns an array of `AccessKitRuleFinding` objects. The engine fills in the remaining `AccessKitAuditFinding` fields (id, ruleId, wcagLevel, category, source, helpUrl) from the rule definition.\n\n## Programmatic audits\n\nYou can run an audit without the DevTools UI. The result is an array of findings you can assert on, log, or send to CI.\n\n```tsx\nimport { runAccessibilityAudit, formatAuditFindingsForConsole, type RunAccessibilityAuditOptions } from \"@access-kit/react\"\n\nconst findings = await runAccessibilityAudit(document, {\n  additionalTags: [\"best-practice\", \"cat.forms\"],\n  logToConsole: true, // optional: print a readable summary to the console\n})\n\n// Or format findings yourself (e.g. for CI logs or custom reporting)\nconsole.log(formatAuditFindingsForConsole(findings))\n```\n\n`additionalTags` uses the same `AccessKitAdditionalRuleTag` values as `AccessKitDevTools`'s `additionalRules`.\n\nEvery audit runs in three phases:\n\n1. **DOM** — full axe-core rule scan at the top of the page.\n2. **Contrast** — a viewport sweep that scrolls the document in viewport-sized steps, running only viewport-sensitive rules (color-contrast, link-in-text-block) at each position, then merges deduped findings and restores scroll.\n3. **Custom** — runs all registered AccessKit custom rules against the document.\n\n### Audit options\n\n| Option | Type | Description |\n|--------|------|-------------|\n| `additionalTags` | `AccessKitAdditionalRuleTag[]` | Opt-in rule tags to run alongside default WCAG A/AA/AAA. |\n| `logToConsole` | `boolean` | Print a readable summary to the console. |\n| `onPhase` | `(phase: AuditScanPhase) => void` | Called when the audit transitions between scan phases (`\"dom\"` → `\"contrast\"` → `\"custom\"`). |\n| `includeAllCategories` | `boolean` | When `true`, includes findings from all categories. By default, `keyboard` and `time-and-media` findings from custom rules are filtered out (those categories have dedicated DevTools tabs). |\n\n### When to use it\n\n- **Tests**: After rendering a component or page, run an audit and assert on `findings` (e.g. expect no errors, or expect a specific rule to be reported).\n- **Browser scripts**: Call from a button click or effect to audit the current page and show results in the UI or console (`logToConsole: true`).\n- **CI / headless**: In a Node script or test runner with a DOM (e.g. jsdom, Puppeteer), run the audit and fail the build or pipeline if critical findings exist.\n- **Custom tooling**: Use the returned array to build your own report format, integrate with issue trackers, or drive automated fixes.\n\n## Verifying color vision modes\n\nIf you are not color blind, you can still check that the protanopia / deuteranopia / tritanopia options behave correctly:\n\n1. **Compare with a reference**  \n   Open a [color-blindness simulator](https://daltonlens.org/colorblindness-simulator) or a test image (e.g. an [Ishihara-style plate](https://en.wikipedia.org/wiki/Ishihara_test)) in another tab. Enable the same mode (e.g. protanopia) in the widget and in the simulator; the page and the reference should look similar (same colors shifted in the same way).\n\n2. **Visual change**  \n   When you switch from \"None\" to any mode, the whole page should change color (e.g. reds and greens shift for protanopia/deuteranopia, blues and yellows for tritanopia). If nothing changes, the filter is not applied.\n\n3. **High contrast + color vision**  \n   Turn on \"High contrast\" and a color vision mode together; both effects should be visible (brighter contrast and CVD simulation).\n\n4. **Automated / screenshots**  \n   Take a screenshot with \"None\" and with e.g. \"Protanopia\", then compare pixel colors or use an image-diff tool to confirm the filter alters the image.\n\nThe filters are based on [Viénot 1999](https://daltonlens.org/cvd-simulation-svg-filters) (protanopia, deuteranopia) and [Brettel 1997](https://daltonlens.org/cvd-simulation-svg-filters) (tritanopia) and are injected as SVG `feColorMatrix` filters.\n\n## Types\n\n### Data types\n\n- `AccessKitSettings` – user preference state: reduced motion, high contrast, enhanced focus, letter spacing (0–100), word spacing (0–100), line height (0–100), fontSize, dyslexia font, color vision mode.\n- `AccessKitSettingKey` – `keyof AccessKitSettings` — union of all setting names.\n- `AccessKitContextValue` – the shape returned by `useAccessKit()`: settings object and mutation helpers (`setSetting`, `toggleSetting`, `setFontSize`, `setLetterSpacing`, `setWordSpacing`, `setLineHeight`, `resetSettings`).\n- `AccessKitAuditFinding` – a single audit result: id, ruleId, axeIssueKind?, wcagLevel?, category?, severity, message, suggestion, helpUrl?, selector, standards?, source?.\n- `AccessKitAdditionalRuleTag` – union of all opt-in rule tags for `additionalRules` / `additionalTags`.\n- `AccessKitSeverity` – `\"error\" | \"warning\" | \"pass\"`.\n- `AccessKitWCAGLevel` – `\"A\" | \"AA\" | \"AAA\"`.\n- `AccessKitPosition` – `\"bottom-right\" | \"center-right\" | \"top-right\" | \"bottom-left\" | \"center-left\" | \"top-left\"`.\n- `AccessibilityWidgetStyle` – optional style config for the widget: primary, tabBackground, tabIcon, panelBackground, panelText, border, mutedText, icon.\n- `RunAccessibilityAuditOptions` – options for `runAccessibilityAudit()`: additionalTags, logToConsole, onPhase, includeAllCategories.\n- `AuditScanPhase` – `\"dom\" | \"contrast\" | \"custom\"`.\n- `AccessKitFindingSource` – `\"axe-core\" | \"accesskit\"`.\n\n### Custom rule types\n\n- `AccessKitRule` – a custom rule definition: id, wcagCriteria, wcagLevel, category, description, helpUrl?, run.\n- `AccessKitRuleFinding` – the subset of finding data a custom rule returns: selector, message, suggestion, severity.\n\n### Component prop types\n\n- `AccessKitProviderProps` – props for `AccessKitProvider`: children, defaultSettings, storageKey, persist, focusColor, onPersistError.\n- `AccessKitDevToolsProps` – props for `AccessKitDevTools`: routeKey (required), defaultOpen, position, zIndex, additionalRules.\n- `AccessibilityWidgetProps` – props for `AccessibilityWidget`: initialPosition, style, defaultOpen, zIndex.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}