{"_id":"@afixt/vanilla-live-regions","_rev":"4-3a66de2d2cfbb5f3d1fec9cc64c08d4f","name":"@afixt/vanilla-live-regions","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@afixt/vanilla-live-regions","version":"1.0.0","keywords":["Accessibility","WAI-ARIA","Live Regions","WCAG","a11y"],"author":{"url":"http://www.afixt.com","name":"Karl Groves","email":"karl.groves@afixt.com"},"license":"MIT","_id":"@afixt/vanilla-live-regions@1.0.0","maintainers":[{"name":"karlgroves","email":"karlgroves@gmail.com"}],"homepage":"https://github.com/AFixt/vanillajs-live-regions#readme","bugs":{"url":"https://github.com/AFixt/vanillajs-live-regions/issues"},"dist":{"shasum":"16c0669049a9f86252446cd7e13e19722876bab6","tarball":"https://registry.npmjs.org/@afixt/vanilla-live-regions/-/vanilla-live-regions-1.0.0.tgz","fileCount":5,"integrity":"sha512-Z8sC7kJ4Bi67DU85Zgr+nTDnqkFjTTEOAygGoa3KhUSsDePZK/zyCaGaJqyeiTcZkxDRMNpVc6tbaaXy1Com7w==","signatures":[{"sig":"MEUCIQCGbZs/yQ2RTB2Fo6OrcrWl4NK+kZJCQly8DoOafhr1hwIgKvLLmSV+UxYhFEdNpMFcWddV3uw3/HCBK2Hy5HuwHaU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13847},"main":"./dist/liveRegion.js","type":"module","title":"Vanilla JS Live Regions","module":"./dist/liveRegion.mjs","engines":{"node":">=16.0.0"},"exports":{".":{"import":"./dist/liveRegion.mjs","require":"./dist/liveRegion.js"}},"gitHead":"a9c5269f2c3ccb97d04ea31e2e3a50f370919922","scripts":{"dev":"vite","lint":"eslint src/**/*.js","test":"vitest","build":"vite build","format":"prettier --write src/**/*.js test/**/*.js","preview":"vite preview","test:ui":"vitest --ui","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"karlgroves","actor":{"name":"karlgroves","type":"user","email":"karlgroves@gmail.com"},"email":"karlgroves@gmail.com"},"repository":{"url":"git+ssh://git@github.com/AFixt/vanillajs-live-regions.git","type":"git"},"_npmVersion":"10.9.2","description":"Vanilla JavaScript library for managing ARIA live regions","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^24.0.0","eslint":"^8.56.0","vitest":"^1.2.0","prettier":"^3.2.0","@vitest/ui":"^1.2.0","@vitest/coverage-v8":"^1.2.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.0"},"_npmOperationalInternal":{"tmp":"tmp/vanilla-live-regions_1.0.0_1750640670998_0.6641200230514392","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@afixt/vanilla-live-regions","version":"1.0.1","keywords":["Accessibility","WAI-ARIA","Live Regions","WCAG","a11y"],"author":{"url":"http://www.afixt.com","name":"Karl Groves","email":"karl.groves@afixt.com"},"license":"MIT","_id":"@afixt/vanilla-live-regions@1.0.1","maintainers":[{"name":"karlgroves","email":"karlgroves@gmail.com"}],"homepage":"https://github.com/AFixt/vanillajs-live-regions#readme","bugs":{"url":"https://github.com/AFixt/vanillajs-live-regions/issues"},"dist":{"shasum":"eeb64d3d1bcc503c352848ae63b733afed4a2a9e","tarball":"https://registry.npmjs.org/@afixt/vanilla-live-regions/-/vanilla-live-regions-1.0.1.tgz","fileCount":5,"integrity":"sha512-5BlzYTfbz79E5C4++RR7g4HF3/nXWHq4OH9h5giFETNM3dvipJT3FuxWCnmjGVlqOmPkadBZdPvXs35Cy06DKA==","signatures":[{"sig":"MEYCIQC58QSjzGgTUpePLWpZS6dt7aoAGVuHUSOr5cWLAtSNegIhAKoECtzBLBKZCNrQmo383Y+n0pZEHnDh8zUeGSxkaQvY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13881},"main":"./dist/liveRegion.js","type":"module","title":"Vanilla JS Live Regions","module":"./dist/liveRegion.mjs","engines":{"node":">=16.0.0"},"exports":{".":{"import":"./dist/liveRegion.mjs","require":"./dist/liveRegion.js"}},"gitHead":"7e7d76343c459dd62aa99f637913b08fdc283e49","scripts":{"dev":"vite","lint":"eslint src/**/*.js","test":"vitest","build":"vite build","format":"prettier --write src/**/*.js test/**/*.js","preview":"vite preview","test:ui":"vitest --ui","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"karlgroves","actor":{"name":"karlgroves","type":"user","email":"karlgroves@gmail.com"},"email":"karlgroves@gmail.com"},"repository":{"url":"git+ssh://git@github.com/AFixt/vanillajs-live-regions.git","type":"git"},"_npmVersion":"10.9.2","description":"Vanilla JavaScript library for managing ARIA live regions","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^24.0.0","eslint":"^8.56.0","vitest":"^1.2.0","prettier":"^3.2.0","@vitest/ui":"^1.2.0","@vitest/coverage-v8":"^1.2.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.0"},"_npmOperationalInternal":{"tmp":"tmp/vanilla-live-regions_1.0.1_1751500309142_0.10703617978721214","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-06-23T01:04:30.883Z","modified":"2026-03-10T18:09:21.796Z","1.0.0":"2025-06-23T01:04:31.198Z","1.0.1":"2025-07-02T23:51:49.345Z"},"bugs":{"url":"https://github.com/AFixt/vanillajs-live-regions/issues"},"author":{"url":"http://www.afixt.com","name":"Karl Groves","email":"karl.groves@afixt.com"},"license":"MIT","homepage":"https://github.com/AFixt/vanillajs-live-regions#readme","keywords":["Accessibility","WAI-ARIA","Live Regions","WCAG","a11y"],"repository":{"url":"git+ssh://git@github.com/AFixt/vanillajs-live-regions.git","type":"git"},"description":"Vanilla JavaScript library for managing ARIA live regions","maintainers":[{"email":"marko.macmilan@gmail.com","name":"macmilan"},{"email":"john.watts@afixt.com","name":"jw1982"},{"email":"karlgroves@gmail.com","name":"karlgroves"}],"readme":"# Vanilla Live Regions\n\nA modern, vanilla JavaScript library for managing ARIA live regions on web pages. This library provides an easy-to-use API for creating and managing live regions that announce content changes to screen reader users.\n\n## Features\n\n- 🚀 Zero dependencies - pure vanilla JavaScript\n- 📦 Small footprint - lightweight and efficient\n- 🎯 Modern ES6+ syntax with backward compatibility\n- 🔧 Flexible API - works with selectors, elements, or NodeLists\n- ♿ Full ARIA support with sensible defaults\n- 🧪 Thoroughly tested with modern testing tools\n\n## Getting Started\n\n### Installation\n\nInstall via npm:\n\n```bash\nnpm install vanilla-live-regions --save\n```\n\nOr include directly in your HTML:\n\n```html\n<script type=\"module\">\n  import LiveRegion from './dist/liveRegion.mjs';\n</script>\n```\n\n## Usage\n\n### Basic Usage\n\n```javascript\nimport LiveRegion from 'vanilla-live-regions';\n\n// Create a live region with default settings\nconst element = document.getElementById('my-region');\nLiveRegion(element);\n```\n\n### Using CSS Selectors\n\n```javascript\n// Apply to single element\nLiveRegion('#status-message');\n\n// Apply to multiple elements\nLiveRegion('.notification');\n```\n\n### Custom Configuration\n\n```javascript\nLiveRegion('#news-ticker', {\n  label: 'News Updates',\n  role: 'status',\n  live: 'polite',\n  atomic: 'true'\n});\n```\n\n### Creating Dynamic Live Regions\n\n```javascript\n// Create a new live region dynamically\nconst alertRegion = LiveRegion.create({\n  role: 'alert',\n  label: 'System Alerts'\n});\n\n// Update its content\nLiveRegion(alertRegion, {\n  text: 'New notification received!',\n  replace: true\n});\n```\n\n## API Reference\n\n### LiveRegion(selector, options)\n\nCreates or updates a live region.\n\n#### Parameters\n\n- `selector` - Can be:\n  - CSS selector string (e.g., '#my-element', '.my-class')\n  - HTMLElement\n  - NodeList\n  - Array of HTMLElements\n\n- `options` - Configuration object with the following properties:\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `labelledby` | string | null | ID of element to use as label (aria-labelledby) |\n| `label` | string | null | Text label for the region (aria-label) |\n| `role` | string | 'region' | ARIA role (region, status, alert, log, marquee, timer, progressbar) |\n| `atomic` | string | 'false' | Whether to announce entire region or just changes |\n| `live` | string | 'polite' | Announcement priority (polite, assertive) |\n| `relevant` | string | 'additions' | What changes to announce (additions, removals, text, all) |\n| `busy` | string | 'false' | Whether region is being updated |\n| `className` | string | undefined | CSS class to add to the element |\n| `replace` | boolean | false | Whether to replace existing content |\n| `text` | string | undefined | Content to add/replace in the region |\n| `wait` | number | 200 | Delay (ms) before updating content |\n\n### Static Methods\n\n#### LiveRegion.create(options)\n\nCreates a new live region element and appends it to the document body.\n\n```javascript\nconst notification = LiveRegion.create({\n  role: 'status',\n  label: 'Notifications'\n});\n```\n\n#### LiveRegion.findAll()\n\nReturns all elements on the page that have live region attributes.\n\n```javascript\nconst allRegions = LiveRegion.findAll();\nconsole.log(`Found ${allRegions.length} live regions`);\n```\n\n#### LiveRegion.remove(selector)\n\nRemoves all live region attributes from the specified element(s).\n\n```javascript\nLiveRegion.remove('#my-region');\n```\n\n## Common Use Cases\n\n### Status Messages\n\n```javascript\nLiveRegion('#status', {\n  role: 'status',\n  text: 'Form saved successfully',\n  replace: true\n});\n```\n\n### Error Alerts\n\n```javascript\nLiveRegion('#errors', {\n  role: 'alert',\n  text: 'Error: Invalid email address',\n  replace: true\n});\n```\n\n### Progress Indicators\n\n```javascript\nconst progressRegion = LiveRegion('#progress', {\n  role: 'progressbar',\n  label: 'Upload Progress',\n  busy: 'true'\n});\n\n// Update progress\nLiveRegion(progressRegion, {\n  text: 'Upload 45% complete',\n  replace: true\n});\n\n// Complete\nLiveRegion(progressRegion, {\n  text: 'Upload complete',\n  busy: 'false',\n  replace: true\n});\n```\n\n### Chat or Activity Logs\n\n```javascript\nLiveRegion('#chat-log', {\n  role: 'log',\n  label: 'Chat Messages',\n  relevant: 'additions text'\n});\n\n// Add new messages\nLiveRegion('#chat-log', {\n  text: '<div>User: Hello!</div>',\n  replace: false  // Append, don't replace\n});\n```\n\n## Development\n\n### Setup\n\n```bash\n# Install dependencies\nnpm install\n\n# Run development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Run tests\nnpm test\n\n# Run tests with UI\nnpm run test:ui\n\n# Check coverage\nnpm run test:coverage\n```\n\n### Project Structure\n\n```\n├── src/\n│   └── liveRegion.vanilla.js    # Main library source\n├── test/\n│   └── liveRegion.test.js       # Test suite\n├── dist/                         # Built files (generated)\n├── demo.html                     # Interactive demo\n└── vite.config.js               # Build configuration\n```\n\n## Browser Support\n\nThis library supports all modern browsers and provides fallbacks for older browsers that support ES5.\n\n## Migration from jQuery Version\n\nIf you're migrating from the jQuery version:\n\n1. Remove jQuery dependency\n2. Update your imports:\n   ```javascript\n   // Old\n   $('#element').liveRegion(options);\n   \n   // New\n   import LiveRegion from 'vanilla-live-regions';\n   LiveRegion('#element', options);\n   ```\n\n3. The API remains largely the same, with the main difference being the function call syntax.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT License - see LICENSE file for details\n\n## More Information\n\nFor more information about ARIA live regions:\n\n- [W3C ARIA Practices - Live Regions](https://www.w3.org/WAI/ARIA/apg/patterns/live-region/)\n- [MDN - ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\n- [WebAIM - ARIA Live Regions](https://webaim.org/articles/aria/#liveregions)","readmeFilename":"README.md"}