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

Comparing version 0.5.1 to 0.6.0

dist/cjs/index.cjs

@@ -155,3 +155,3 @@ 'use strict';
 var _pending, _queue, _timeoutId, _performWork, performWork_fn, _updateContainerWithMessage, updateContainerWithMessage_fn;
-const DEFAULT_THROTTLE_DELAY_MS = 500;
+const DEFAULT_THROTTLE_DELAY_MS = 150;
 class LiveRegionElement extends HTMLElement {
@@ -348,18 +348,6 @@ constructor() {
   if (a.politeness === "assertive" && b.politeness !== "assertive") {
-    if (a.scheduled === b.scheduled) {
-      return Ordering.Less;
-    }
-    if (a.scheduled < b.scheduled) {
-      return Ordering.Less;
-    }
-    return Ordering.Greater;
+    return Ordering.Less;
   }
   if (a.politeness !== "assertive" && b.politeness === "assertive") {
-    if (a.scheduled === b.scheduled) {
-      return Ordering.Greater;
-    }
-    if (a.scheduled > b.scheduled) {
-      return Ordering.Greater;
-    }
-    return Ordering.Less;
+    return Ordering.Greater;
   }
@@ -366,0 +354,0 @@ return Ordering.Equal;

dist/cjs/live-region-element.d.cts

@@ -5,6 +5,2 @@ import { type Order } from './order';
     /**
-     * A delay in milliseconds to wait before announcing a message.
-     */
-    delayMs?: number;
-    /**
      * The politeness level for a message.
@@ -19,3 +15,10 @@ *
      */
-    politeness?: Politeness;
+    politeness?: 'assertive';
+    /**
+     * A delay in milliseconds to wait before announcing a message.
+     */
+    delayMs?: never;
+} | {
+    politeness?: 'polite';
+    delayMs?: number;
 };
@@ -22,0 +25,0 @@ type Message = {

dist/cjs/node/index.cjs

@@ -157,3 +157,3 @@ 'use strict';
 var _pending, _queue, _timeoutId, _performWork, performWork_fn, _updateContainerWithMessage, updateContainerWithMessage_fn;
-const DEFAULT_THROTTLE_DELAY_MS = 500;
+const DEFAULT_THROTTLE_DELAY_MS = 150;
 class LiveRegionElement extends (globalThis.HTMLElement ?? ssrDomShim.HTMLElement) {
@@ -350,18 +350,6 @@ constructor() {
   if (a.politeness === "assertive" && b.politeness !== "assertive") {
-    if (a.scheduled === b.scheduled) {
-      return Ordering.Less;
-    }
-    if (a.scheduled < b.scheduled) {
-      return Ordering.Less;
-    }
-    return Ordering.Greater;
+    return Ordering.Less;
   }
   if (a.politeness !== "assertive" && b.politeness === "assertive") {
-    if (a.scheduled === b.scheduled) {
-      return Ordering.Greater;
-    }
-    if (a.scheduled > b.scheduled) {
-      return Ordering.Greater;
-    }
-    return Ordering.Less;
+    return Ordering.Greater;
   }
@@ -368,0 +356,0 @@ return Ordering.Equal;

dist/esm/index.js

@@ -153,3 +153,3 @@ const Ordering = {
 var _pending, _queue, _timeoutId, _performWork, performWork_fn, _updateContainerWithMessage, updateContainerWithMessage_fn;
-const DEFAULT_THROTTLE_DELAY_MS = 500;
+const DEFAULT_THROTTLE_DELAY_MS = 150;
 class LiveRegionElement extends HTMLElement {
@@ -346,18 +346,6 @@ constructor() {
   if (a.politeness === "assertive" && b.politeness !== "assertive") {
-    if (a.scheduled === b.scheduled) {
-      return Ordering.Less;
-    }
-    if (a.scheduled < b.scheduled) {
-      return Ordering.Less;
-    }
-    return Ordering.Greater;
+    return Ordering.Less;
   }
   if (a.politeness !== "assertive" && b.politeness === "assertive") {
-    if (a.scheduled === b.scheduled) {
-      return Ordering.Greater;
-    }
-    if (a.scheduled > b.scheduled) {
-      return Ordering.Greater;
-    }
-    return Ordering.Less;
+    return Ordering.Greater;
   }
@@ -364,0 +352,0 @@ return Ordering.Equal;

dist/esm/live-region-element.d.ts

@@ -5,6 +5,2 @@ import { type Order } from './order';
     /**
-     * A delay in milliseconds to wait before announcing a message.
-     */
-    delayMs?: number;
-    /**
      * The politeness level for a message.
@@ -19,3 +15,10 @@ *
      */
-    politeness?: Politeness;
+    politeness?: 'assertive';
+    /**
+     * A delay in milliseconds to wait before announcing a message.
+     */
+    delayMs?: never;
+} | {
+    politeness?: 'polite';
+    delayMs?: number;
 };
@@ -22,0 +25,0 @@ type Message = {

dist/esm/node/index.js

@@ -155,3 +155,3 @@ import { HTMLElement, customElements } from '@lit-labs/ssr-dom-shim';
 var _pending, _queue, _timeoutId, _performWork, performWork_fn, _updateContainerWithMessage, updateContainerWithMessage_fn;
-const DEFAULT_THROTTLE_DELAY_MS = 500;
+const DEFAULT_THROTTLE_DELAY_MS = 150;
 class LiveRegionElement extends (globalThis.HTMLElement ?? HTMLElement) {
@@ -348,18 +348,6 @@ constructor() {
   if (a.politeness === "assertive" && b.politeness !== "assertive") {
-    if (a.scheduled === b.scheduled) {
-      return Ordering.Less;
-    }
-    if (a.scheduled < b.scheduled) {
-      return Ordering.Less;
-    }
-    return Ordering.Greater;
+    return Ordering.Less;
   }
   if (a.politeness !== "assertive" && b.politeness === "assertive") {
-    if (a.scheduled === b.scheduled) {
-      return Ordering.Greater;
-    }
-    if (a.scheduled > b.scheduled) {
-      return Ordering.Greater;
-    }
-    return Ordering.Less;
+    return Ordering.Greater;
   }
@@ -366,0 +354,0 @@ return Ordering.Equal;

package.json

 {
   "name": "@primer/live-region-element",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
@@ -5,0 +5,0 @@ "main": "./dist/esm/index.js",

README.md

@@ -50,20 +50,2 @@ # live-region-element
 
-### Defining `live-region` as a custom element
-
-The `@primer/live-region-element` package provides an entrypoint that you can use to define the `live-region` custom element.
-
-```ts
-import '@primer/live-region-element/define`
-```
-
-If you prefer to define the custom element directly, import `LiveRegionElement` directly from the package and use that to define the `live-region` element. For example:
-
-```ts
-import {LiveRegionElement} from '@primer/live-region-element'
-
-if (!customElements.get('live-region')) {
-  customElements.define('live-region', LiveRegionElement)
-}
-```
-
 ### Declarative Shadow DOM
@@ -94,2 +76,53 @@
 
+### Delaying announcements
+
+Both `announce` and `announceFromElement` provide support for announcing
+messages at a later point in time. In the example below, we are waiting five
+seconds before announcing the message.
+
+```ts
+import {announce} from '@primer/live-region-element'
+
+announce('Example message', {
+  delayMs: 5000,
+})
+```
+
+### Canceling announcements
+
+Any announcements made with `announce` and `announceFromElement` may be
+cancelled. This may be useful if a delayed announcements has become outdated. To
+cancel an announcement, call the return value of either method.
+
+```ts
+import {announce} from '@primer/live-region-element'
+
+const cancel = announce('Example message', {
+  delayMs: 5000,
+})
+
+// At some point before five seconds, call:
+cancel()
+```
+
+If you would like to clear all announcements, like when transitioning between
+routes, you can call the `clear()` method on an existing `LiveRegionElement`.
+
+```ts
+const liveRegion = document.querySelector('live-region')
+
+// Send example messages
+liveRegion.announce('Example polite message', {
+  delayMs: 1000,
+  politeness: 'polite',
+})
+liveRegion.announce('Example polite message', {
+  delayMs: 1000,
+  politeness: 'polite',
+})
+
+// Clear all pending messages
+liveRegion.clear()
+```
+
 ## 🙌 Contributing
@@ -96,0 +129,0 @@

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

135

32.35%

Number of low supply chain risk alerts

1

-66.67%

Worsened metrics

Total package byte prevSize

66229

-0.59%

Lines of code

1736

-2.53%

No dependency changes