@zag-js/live-region 0.0.0-dev-20220709181637

package/README.md

@@ -0,0 +1,19 @@
+# @zag-js/live-region
+
+Implementing live region for screen readers
+
+## Installation
+
+```sh
+yarn add @zag-js/live-region
+# or
+npm i @zag-js/live-region
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export declare type LiveRegionOptions = {
+    level: "polite" | "assertive";
+    document?: Document;
+    root?: HTMLElement | null;
+    delay?: number;
+};
+export declare type LiveRegion = ReturnType<typeof createLiveRegion>;
+export declare function createLiveRegion(opts?: Partial<LiveRegionOptions>): {
+    announce: (message: string, delay?: number) => void;
+    destroy: () => void;
+    toJSON(): string;
+};

package/dist/index.js

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createLiveRegion: () => createLiveRegion
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../dom/src/visually-hidden.ts
+var visuallyHiddenStyle = {
+  border: "0",
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: "0",
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap",
+  wordWrap: "normal"
+};
+function setVisuallyHidden(el) {
+  Object.assign(el.style, visuallyHiddenStyle);
+}
+
+// src/index.ts
+var ID = "__live-region__";
+function createLiveRegion(opts = {}) {
+  var _a;
+  const { level = "polite", document: doc = document, root, delay: _delay = 0 } = opts;
+  const win = (_a = doc.defaultView) != null ? _a : window;
+  const parent = root != null ? root : doc.body;
+  function announce(message, delay) {
+    const oldRegion = doc.getElementById(ID);
+    oldRegion == null ? void 0 : oldRegion.remove();
+    delay = delay != null ? delay : _delay;
+    const region = doc.createElement("span");
+    region.id = ID;
+    region.dataset.liveAnnouncer = "true";
+    const role = level !== "assertive" ? "status" : "alert";
+    region.setAttribute("aria-live", level);
+    region.setAttribute("role", role);
+    setVisuallyHidden(region);
+    parent.appendChild(region);
+    win.setTimeout(() => {
+      region.textContent = message;
+    }, delay);
+  }
+  function destroy() {
+    const oldRegion = doc.getElementById(ID);
+    oldRegion == null ? void 0 : oldRegion.remove();
+  }
+  return {
+    announce,
+    destroy,
+    toJSON() {
+      return ID;
+    }
+  };
+}

package/dist/index.mjs

@@ -0,0 +1,55 @@
+// ../dom/src/visually-hidden.ts
+var visuallyHiddenStyle = {
+  border: "0",
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: "0",
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap",
+  wordWrap: "normal"
+};
+function setVisuallyHidden(el) {
+  Object.assign(el.style, visuallyHiddenStyle);
+}
+
+// src/index.ts
+var ID = "__live-region__";
+function createLiveRegion(opts = {}) {
+  var _a;
+  const { level = "polite", document: doc = document, root, delay: _delay = 0 } = opts;
+  const win = (_a = doc.defaultView) != null ? _a : window;
+  const parent = root != null ? root : doc.body;
+  function announce(message, delay) {
+    const oldRegion = doc.getElementById(ID);
+    oldRegion == null ? void 0 : oldRegion.remove();
+    delay = delay != null ? delay : _delay;
+    const region = doc.createElement("span");
+    region.id = ID;
+    region.dataset.liveAnnouncer = "true";
+    const role = level !== "assertive" ? "status" : "alert";
+    region.setAttribute("aria-live", level);
+    region.setAttribute("role", role);
+    setVisuallyHidden(region);
+    parent.appendChild(region);
+    win.setTimeout(() => {
+      region.textContent = message;
+    }, delay);
+  }
+  function destroy() {
+    const oldRegion = doc.getElementById(ID);
+    oldRegion == null ? void 0 : oldRegion.remove();
+  }
+  return {
+    announce,
+    destroy,
+    toJSON() {
+      return ID;
+    }
+  };
+}
+export {
+  createLiveRegion
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@zag-js/live-region",
+  "version": "0.0.0-dev-20220709181637",
+  "description": "Implementing live region for screen readers",
+  "keywords": [
+    "js",
+    "utils",
+    "live-region"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/live-region",
+  "sideEffects": false,
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build:fast": "yarn zag build",
+    "start": "yarn zag build --watch",
+    "build": "yarn zag build --prod",
+    "test": "jest --config ../../../jest.config.js --rootDir tests",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test:ci": "yarn test --ci --runInBand --updateSnapshot",
+    "test:watch": "yarn test --watchAll"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  }
+}