@zag-js/live-region 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/live-region",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Implementing live region for screen readers",
   "keywords": [
     "js",
@@ -13,10 +13,11 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/live-region",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@zag-js/visually-hidden": "0.9.1"
+    "@zag-js/visually-hidden": "0.10.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -0,0 +1,64 @@
+import { setVisuallyHidden } from "@zag-js/visually-hidden"
+
+export type LiveRegionOptions = {
+  level: "polite" | "assertive"
+  document?: Document
+  root?: HTMLElement | null
+  delay?: number
+}
+
+export type LiveRegion = ReturnType<typeof createLiveRegion>
+
+const ID = "__live-region__"
+
+export function createLiveRegion(opts: Partial<LiveRegionOptions> = {}) {
+  const { level = "polite", document: doc = document, root, delay: _delay = 0 } = opts
+
+  const win = doc.defaultView ?? window
+  const parent = root ?? doc.body
+
+  function announce(message: string, delay?: number) {
+    const oldRegion = doc.getElementById(ID)
+
+    // remove old region
+    oldRegion?.remove()
+
+    // Did an override level get set?
+    delay = delay ?? _delay
+
+    // create fresh region
+    const region = doc.createElement("span")
+    region.id = ID
+    region.dataset.liveAnnouncer = "true"
+
+    // Determine redundant role
+    const role = level !== "assertive" ? "status" : "alert"
+
+    // add role and attributes
+    region.setAttribute("aria-live", level)
+    region.setAttribute("role", role)
+
+    // hide live region
+    setVisuallyHidden(region)
+
+    parent.appendChild(region)
+
+    // populate region to trigger it
+    win.setTimeout(() => {
+      region.textContent = message
+    }, delay)
+  }
+
+  function destroy() {
+    const oldRegion = doc.getElementById(ID)
+    oldRegion?.remove()
+  }
+
+  return {
+    announce,
+    destroy,
+    toJSON() {
+      return ID
+    },
+  }
+}