{"_id":"@a11y_craft/auto-announce","_rev":"2-6c15813543d8a0cad15cead9b3ccae5d","name":"@a11y_craft/auto-announce","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@a11y_craft/auto-announce","version":"1.0.0","keywords":["accessibility","a11y","aria","aria-live","screen-reader","wcag","voiceover","nvda","announcer","auto"],"author":{"name":"Nidhi Gajera"},"license":"MIT","_id":"@a11y_craft/auto-announce@1.0.0","maintainers":[{"name":"nidhi.g","email":"nidhigajera2610@gmail.com"}],"homepage":"https://github.com/nidhiG2610/auto-announce#readme","bugs":{"url":"https://github.com/nidhiG2610/auto-announce/issues"},"dist":{"shasum":"20244c5f890bd9d36a9a15535ece6c0f28f0548a","tarball":"https://registry.npmjs.org/@a11y_craft/auto-announce/-/auto-announce-1.0.0.tgz","fileCount":7,"integrity":"sha512-K0s2ziGSuFfKbWMEgbO9XQ6DemDXVd52Q8K5VwMj0em/M0Ges6+EjvJydpYwyhj4CHkI9xkNkpRed2GK0f7FOg==","signatures":[{"sig":"MEUCIQDnSXqFmZ/aD1MCGYIi4PX4g4WRcW0oL6PVMdimWKi5cQIgD9ep0ZCGXqmY+yKamawVcHTT58dPi4eCDWHlIS4rx4M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31676},"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":"a0adb7edf93eafd4b8acdf424fdf42ecdfe1e29c","scripts":{"test":"jest","build":"tsup","test:watch":"jest --watch","prepublishOnly":"npm run build && npm test"},"_npmUser":{"name":"nidhi.g","email":"nidhigajera2610@gmail.com"},"repository":{"url":"git+https://github.com/nidhiG2610/auto-announce.git","type":"git"},"_npmVersion":"11.3.0","description":"Zero-config screen reader announcements — import once, works everywhere automatically","directories":{},"sideEffects":true,"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","tsup":"^8.0.2","ts-jest":"^29.1.4","typescript":"^5.4.5","@types/jest":"^29.5.12","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/auto-announce_1.0.0_1775777171134_0.33871787859554425","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@a11y_craft/auto-announce","version":"1.0.1","description":"Zero-config screen reader announcements — import once, works everywhere automatically","keywords":["accessibility","a11y","aria","aria-live","screen-reader","wcag","voiceover","nvda","announcer","auto"],"author":{"name":"Nidhi Gajera"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/nidhiG2610/auto-announce.git"},"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":true,"scripts":{"build":"tsup","test":"jest","test:watch":"jest --watch","prepublishOnly":"npm run build && npm test"},"devDependencies":{"@types/jest":"^29.5.12","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","ts-jest":"^29.1.4","tsup":"^8.0.2","typescript":"^5.4.5"},"_id":"@a11y_craft/auto-announce@1.0.1","gitHead":"09519a7dd38e92cfa48dbdced5f3908b46500ba3","bugs":{"url":"https://github.com/nidhiG2610/auto-announce/issues"},"homepage":"https://github.com/nidhiG2610/auto-announce#readme","_nodeVersion":"22.13.1","_npmVersion":"11.3.0","dist":{"integrity":"sha512-XjmsSE+oFaOnPXSqGZ8COByKV8+zKdZlDGx/hC14uXsW3yzDYxUgJIbFzycHS+WWOOUkqHMaBxRqQNJZMbKNDA==","shasum":"de89cf4844f293b0f6e797c851c31100607839af","tarball":"https://registry.npmjs.org/@a11y_craft/auto-announce/-/auto-announce-1.0.1.tgz","fileCount":9,"unpackedSize":42879,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCKSiPeUHZCKaKFUtiIuF06WRp/yhMiWnLLUV6M1Llx/wIhAO7XXf6K4S0W/VSN7ctnVbR7X+rz4wFdS0Ud91RLUaf7"}]},"_npmUser":{"name":"nidhi.g","email":"nidhigajera2610@gmail.com"},"directories":{},"maintainers":[{"name":"nidhi.g","email":"nidhigajera2610@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/auto-announce_1.0.1_1775778632166_0.9523087025660091"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-09T23:26:11.022Z","modified":"2026-04-09T23:50:32.424Z","1.0.0":"2026-04-09T23:26:11.304Z","1.0.1":"2026-04-09T23:50:32.291Z"},"bugs":{"url":"https://github.com/nidhiG2610/auto-announce/issues"},"author":{"name":"Nidhi Gajera"},"license":"MIT","homepage":"https://github.com/nidhiG2610/auto-announce#readme","keywords":["accessibility","a11y","aria","aria-live","screen-reader","wcag","voiceover","nvda","announcer","auto"],"repository":{"type":"git","url":"git+https://github.com/nidhiG2610/auto-announce.git"},"description":"Zero-config screen reader announcements — import once, works everywhere automatically","maintainers":[{"name":"nidhi.g","email":"nidhigajera2610@gmail.com"}],"readme":"# @a11y_craft/auto-announce\n\n> Zero-config screen reader announcements. Import once — VoiceOver, NVDA, TalkBack and Narrator just work.\n\n[![npm version](https://img.shields.io/npm/v/@a11y_craft/auto-announce)](https://www.npmjs.com/package/@a11y_craft/auto-announce)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@a11y_craft/auto-announce)](https://bundlephobia.com/package/@a11y_craft/auto-announce)\n[![license](https://img.shields.io/npm/l/@a11y_craft/auto-announce)](./LICENSE)\n\n---\n\n## The Problem\n\nMost apps have toasts, banners, and notifications that sighted users can see — but screen reader users never hear. Making them accessible requires manually wiring up `aria-live` regions, managing politeness levels, and handling timing quirks across different screen readers.\n\nThat's a lot of work. Most teams skip it.\n\n**`@a11y_craft/auto-announce` does it for you.**\n\n---\n\n## How It Works\n\nThe package silently watches your DOM using a `MutationObserver`. When a notification, toast, banner, or alert appears, it automatically reads it aloud to screen reader users — with no extra code required from you or your team.\n\n---\n\n## Install\n\n```bash\nnpm install @a11y_craft/auto-announce\n# or\nyarn add @a11y_craft/auto-announce\n# or\npnpm add @a11y_craft/auto-announce\n```\n\n---\n\n## Usage\n\nAdd one import to your app entry point and you're done.\n\n```js\n// main.js / index.js / App.tsx — just once, anywhere at the top\nimport '@a11y_craft/auto-announce';\n```\n\nThat's it. No setup. No providers. No function calls. Your entire app is now more accessible.\n\n---\n\n## What Gets Announced Automatically\n\nThe package detects notifications by their ARIA roles, class names, and data attributes:\n\n| Element | Detected by | Politeness |\n|---------|------------|------------|\n| `<div role=\"alert\">` | ARIA role | Assertive (interrupts) |\n| `<div role=\"status\">` | ARIA role | Polite |\n| `<div role=\"log\">` | ARIA role | Polite |\n| `<div class=\"toast\">` | Class name | Polite |\n| `<div class=\"notification\">` | Class name | Polite |\n| `<div class=\"banner\">` | Class name | Polite |\n| `<div class=\"snackbar\">` | Class name | Polite |\n| `<div class=\"flash\">` | Class name | Polite |\n| `<div data-announce>` | Data attribute | Polite |\n\nElements that already have `aria-live` set are skipped — no double-announcing.\n\n---\n\n## Framework Examples\n\n### React\n\n```tsx\n// index.tsx\nimport '@a11y_craft/auto-announce';\nimport { createRoot } from 'react-dom/client';\nimport App from './App';\n\ncreateRoot(document.getElementById('root')!).render(<App />);\n```\n\nNow every toast, alert, or notification in your React app is automatically announced.\n\n```tsx\n// Somewhere in your app — no extra code needed\nfunction saveFile() {\n  await upload();\n  showToast('File uploaded successfully.'); // ← screen readers hear this automatically\n}\n```\n\n### Vue\n\n```js\n// main.js\nimport '@a11y_craft/auto-announce';\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\ncreateApp(App).mount('#app');\n```\n\n### Svelte\n\n```js\n// main.js\nimport '@a11y_craft/auto-announce';\nimport App from './App.svelte';\n\nnew App({ target: document.body });\n```\n\n### Vanilla JS / HTML\n\n```html\n<script type=\"module\">\n  import '@a11y_craft/auto-announce';\n</script>\n```\n\n---\n\n## Custom Configuration\n\nNo configuration is needed for most apps. For advanced use cases:\n\n```js\nimport { autoAnnounce } from '@a11y_craft/auto-announce';\n\nautoAnnounce({\n  // Add your own selectors on top of the defaults\n  selectors: ['.my-custom-toast', '[data-notify]'],\n\n  // Never announce these, even if they match\n  ignore: ['.silent-banner', '.marketing-popup'],\n\n  // Override politeness for all announcements\n  politeness: 'assertive',\n});\n```\n\n---\n\n## Stopping the Observer\n\nUseful for cleanup in tests or single-page app teardown:\n\n```js\nimport { stopAutoAnnounce } from '@a11y_craft/auto-announce';\n\nstopAutoAnnounce();\n```\n\n---\n\n## Screen Reader Support\n\nTested against the most widely used screen reader and browser combinations:\n\n| Screen Reader | Browser | Support |\n|---|---|---|\n| NVDA | Firefox | ✅ |\n| JAWS | Chrome | ✅ |\n| VoiceOver | Safari (macOS) | ✅ |\n| VoiceOver | Safari (iOS) | ✅ |\n| TalkBack | Chrome (Android) | ✅ |\n| Narrator | Edge (Windows) | ✅ |\n\n---\n\n## WCAG Compliance\n\nHelps satisfy [WCAG 2.2 — Success Criterion 4.1.3: Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html), which requires that status messages be announced to screen readers without receiving focus.\n\n---\n\n## Zero Dependencies\n\nNo runtime dependencies. The package is self-contained and uses only native browser APIs (`MutationObserver`, `aria-live`).\n\n---\n\n## TypeScript\n\nFull TypeScript support out of the box:\n\n```ts\nimport { autoAnnounce } from '@a11y_craft/auto-announce';\nimport type { AutoAnnounceOptions } from '@a11y_craft/auto-announce';\n\nconst options: AutoAnnounceOptions = {\n  selectors: ['.my-toast'],\n  ignore: ['.quiet'],\n};\n\nautoAnnounce(options);\n```\n\n---\n\n## License\n\nMIT © [Nidhi Gajera](https://github.com/nidhiG2610)\n","readmeFilename":"README.md"}