@primer/live-region-element - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/esm/index.d.ts

@@ -0,1 +1,2 @@
+import './define';
 import { LiveRegionElement, templateContent, type AnnounceOptions } from './live-region-element';
@@ -2,0 +3,0 @@ type GlobalAnnounceOptions = AnnounceOptions & {

dist/esm/index.js

@@ -1,4 +0,90 @@
-import { L as LiveRegionElement } from './live-region-element-dgzrxye-.js';
-export { t as templateContent } from './live-region-element-dgzrxye-.js';
+class LiveRegionElement extends HTMLElement {
+  constructor() {
+    super();
+    if (!this.shadowRoot) {
+      const template2 = getTemplate();
+      const shadowRoot = this.attachShadow({ mode: "open" });
+      shadowRoot.appendChild(template2.content.cloneNode(true));
+    }
+  }
+  /**
+   * Announce a message using a live region with a corresponding politeness
+   * level.
+   *
+   * Note: a politeness level of `assertive` should only be used for
+   * time-sensistive or critical notifications that absolutely require the
+   * user's immediate attention
+   *
+   * @see https://www.w3.org/TR/wai-aria/#aria-live
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+   */
+  announce(message, options = {}) {
+    const { politeness = "polite" } = options;
+    const container = this.shadowRoot?.getElementById(politeness);
+    if (!container) {
+      throw new Error("Unable to find container for message");
+    }
+    if (container.textContent === message) {
+      container.textContent = `${message}\xA0`;
+    } else {
+      container.textContent = message;
+    }
+  }
+  /**
+   * Announce a message using the text content of an element with a
+   * corresponding politeness level
+   */
+  announceFromElement(element, options) {
+    const textContent = getTextContent(element);
+    if (textContent !== "") {
+      this.announce(textContent, options);
+    }
+  }
+  getMessage(politeness = "polite") {
+    const container = this.shadowRoot?.getElementById(politeness);
+    if (!container) {
+      throw new Error("Unable to find container for message");
+    }
+    return container.textContent;
+  }
+}
+function getTextContent(element) {
+  let value = "";
+  if (element.hasAttribute("aria-label")) {
+    value = element.getAttribute("aria-label");
+  } else if (element.innerText) {
+    value = element.innerText;
+  } else if (element.textContent) {
+    value = element.textContent;
+  }
+  return value ? value.trim() : "";
+}
+let template = null;
+const templateContent = `
+<style>
+:host {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+</style>
+<div id="polite" aria-live="polite" aria-atomic="true"></div>
+<div id="assertive" aria-live="assertive" aria-atomic="true"></div>
+`;
+function getTemplate() {
+  if (template) {
+    return template;
+  }
+  template = document.createElement("template");
+  template.innerHTML = templateContent;
+  return template;
+}
 
+if (!customElements.get("live-region")) {
+  customElements.define("live-region", LiveRegionElement);
+}
+
 function announce(message, options = {}) {
@@ -45,2 +131,2 @@ const liveRegion2 = findOrCreateLiveRegion(options.from, options.appendTo);
 
-export { LiveRegionElement, announce, announceFromElement };
+export { LiveRegionElement, announce, announceFromElement, templateContent };

dist/esm/node/index.js

@@ -1,5 +0,92 @@
-import { L as LiveRegionElement } from './live-region-element-HDPVaQD0.js';
-export { t as templateContent } from './live-region-element-HDPVaQD0.js';
-import '@lit-labs/ssr-dom-shim';
+import { HTMLElement, customElements } from '@lit-labs/ssr-dom-shim';
 
+class LiveRegionElement extends (globalThis.HTMLElement ?? HTMLElement) {
+  constructor() {
+    super();
+    if (!this.shadowRoot) {
+      const template2 = getTemplate();
+      const shadowRoot = this.attachShadow({ mode: "open" });
+      shadowRoot.appendChild(template2.content.cloneNode(true));
+    }
+  }
+  /**
+   * Announce a message using a live region with a corresponding politeness
+   * level.
+   *
+   * Note: a politeness level of `assertive` should only be used for
+   * time-sensistive or critical notifications that absolutely require the
+   * user's immediate attention
+   *
+   * @see https://www.w3.org/TR/wai-aria/#aria-live
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+   */
+  announce(message, options = {}) {
+    const { politeness = "polite" } = options;
+    const container = this.shadowRoot?.getElementById(politeness);
+    if (!container) {
+      throw new Error("Unable to find container for message");
+    }
+    if (container.textContent === message) {
+      container.textContent = `${message}\xA0`;
+    } else {
+      container.textContent = message;
+    }
+  }
+  /**
+   * Announce a message using the text content of an element with a
+   * corresponding politeness level
+   */
+  announceFromElement(element, options) {
+    const textContent = getTextContent(element);
+    if (textContent !== "") {
+      this.announce(textContent, options);
+    }
+  }
+  getMessage(politeness = "polite") {
+    const container = this.shadowRoot?.getElementById(politeness);
+    if (!container) {
+      throw new Error("Unable to find container for message");
+    }
+    return container.textContent;
+  }
+}
+function getTextContent(element) {
+  let value = "";
+  if (element.hasAttribute("aria-label")) {
+    value = element.getAttribute("aria-label");
+  } else if (element.innerText) {
+    value = element.innerText;
+  } else if (element.textContent) {
+    value = element.textContent;
+  }
+  return value ? value.trim() : "";
+}
+let template = null;
+const templateContent = `
+<style>
+:host {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+</style>
+<div id="polite" aria-live="polite" aria-atomic="true"></div>
+<div id="assertive" aria-live="assertive" aria-atomic="true"></div>
+`;
+function getTemplate() {
+  if (template) {
+    return template;
+  }
+  template = document.createElement("template");
+  template.innerHTML = templateContent;
+  return template;
+}
+
+if (!customElements.get("live-region")) {
+  customElements.define("live-region", LiveRegionElement);
+}
+
 function announce(message, options = {}) {
@@ -46,2 +133,2 @@ const liveRegion2 = findOrCreateLiveRegion(options.from, options.appendTo);
 
-export { LiveRegionElement, announce, announceFromElement };
+export { LiveRegionElement, announce, announceFromElement, templateContent };

package.json

 {
   "name": "@primer/live-region-element",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
@@ -19,14 +19,2 @@ "main": "./dist/esm/index.js",
       "require": "./dist/cjs/index.cjs"
-    },
-    "./define": {
-      "types": {
-        "import": "./dist/esm/define.d.ts",
-        "require": "./dist/cjs/define.d.cts"
-      },
-      "node": {
-        "import": "./dist/esm/node/define.js",
-        "require": "./dist/cjs/node/define.cjs"
-      },
-      "import": "./dist/esm/define.js",
-      "require": "./dist/cjs/define.cjs"
     }
@@ -72,7 +60,12 @@ },
     "./src/define.ts",
+    "./src/index.ts",
     "./dist/esm/define.js",
-    "./dist/cjs/define.js",
+    "./dist/esm/index.js",
+    "./dist/cjs/define.cjs",
+    "./dist/cjs/index.cjs",
     "./dist/esm/node/define.js",
-    "./dist/cjs/node/define.js"
+    "./dist/esm/node/index.js",
+    "./dist/cjs/node/define.cjs",
+    "./dist/cjs/node/index.cjs"
   ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

580

increased by4.5%

Worsened metrics

Total package byte prevSize

25918

decreased by-0.29%

Number of package files

12

decreased by-40%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes