@react-aria/live-announcer - npm Package Compare versions

Comparing version 3.0.0-nightly.3104 to 3.0.0-nightly.3110

dist/LiveAnnouncer.main.js

@@ -20,6 +20,5 @@
  */ /* Inspired by https://github.com/AlmeroSteyn/react-aria-live */ const $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY = 7000;
-let $97cebfa4133ebec3$var$liveAnnouncer = null;
-function $97cebfa4133ebec3$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY) {
+function $97cebfa4133ebec3$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY, mode = 'message') {
     if (!$97cebfa4133ebec3$var$liveAnnouncer) $97cebfa4133ebec3$var$liveAnnouncer = new $97cebfa4133ebec3$var$LiveAnnouncer();
-    $97cebfa4133ebec3$var$liveAnnouncer.announce(message, assertiveness, timeout);
+    $97cebfa4133ebec3$var$liveAnnouncer.announce(message, assertiveness, timeout, mode);
 }
@@ -54,8 +53,14 @@ function $97cebfa4133ebec3$export$d10ae4f68404609a(assertiveness) {
     }
-    announce(message, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY) {
+    announce(message, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY, mode = 'message') {
+        var _this_assertiveLog, _this_politeLog;
         if (!this.node) return;
         let node = document.createElement('div');
-        node.textContent = message;
-        if (assertiveness === 'assertive') this.assertiveLog.appendChild(node);
-        else this.politeLog.appendChild(node);
+        if (mode === 'message') node.textContent = message;
+        else {
+            // To read an aria-labelledby, the element must have an appropriate role, such as img.
+            node.setAttribute('role', 'img');
+            node.setAttribute('aria-labelledby', message);
+        }
+        if (assertiveness === 'assertive') (_this_assertiveLog = this.assertiveLog) === null || _this_assertiveLog === void 0 ? void 0 : _this_assertiveLog.appendChild(node);
+        else (_this_politeLog = this.politeLog) === null || _this_politeLog === void 0 ? void 0 : _this_politeLog.appendChild(node);
         if (message !== '') setTimeout(()=>{
@@ -67,30 +72,38 @@ node.remove();
         if (!this.node) return;
-        if (!assertiveness || assertiveness === 'assertive') this.assertiveLog.innerHTML = '';
-        if (!assertiveness || assertiveness === 'polite') this.politeLog.innerHTML = '';
+        if ((!assertiveness || assertiveness === 'assertive') && this.assertiveLog) this.assertiveLog.innerHTML = '';
+        if ((!assertiveness || assertiveness === 'polite') && this.politeLog) this.politeLog.innerHTML = '';
     }
     constructor(){
-        this.node = document.createElement('div');
-        this.node.dataset.liveAnnouncer = 'true';
-        // copied from VisuallyHidden
-        Object.assign(this.node.style, {
-            border: 0,
-            clip: 'rect(0 0 0 0)',
-            clipPath: 'inset(50%)',
-            height: '1px',
-            margin: '-1px',
-            overflow: 'hidden',
-            padding: 0,
-            position: 'absolute',
-            width: '1px',
-            whiteSpace: 'nowrap'
-        });
-        this.assertiveLog = this.createLog('assertive');
-        this.node.appendChild(this.assertiveLog);
-        this.politeLog = this.createLog('polite');
-        this.node.appendChild(this.politeLog);
-        document.body.prepend(this.node);
+        this.node = null;
+        this.assertiveLog = null;
+        this.politeLog = null;
+        if (typeof document !== 'undefined') {
+            this.node = document.createElement('div');
+            this.node.dataset.liveAnnouncer = 'true';
+            // copied from VisuallyHidden
+            Object.assign(this.node.style, {
+                border: 0,
+                clip: 'rect(0 0 0 0)',
+                clipPath: 'inset(50%)',
+                height: '1px',
+                margin: '-1px',
+                overflow: 'hidden',
+                padding: 0,
+                position: 'absolute',
+                width: '1px',
+                whiteSpace: 'nowrap'
+            });
+            this.assertiveLog = this.createLog('assertive');
+            this.node.appendChild(this.assertiveLog);
+            this.politeLog = this.createLog('polite');
+            this.node.appendChild(this.politeLog);
+            document.body.prepend(this.node);
+        }
     }
 }
+// singleton, setup immediately so that the DOM is primed for the first announcement as soon as possible
+// Safari has a race condition where the first announcement is not read if we wait until the first announce call
+let $97cebfa4133ebec3$var$liveAnnouncer = new $97cebfa4133ebec3$var$LiveAnnouncer();
 
 
 //# sourceMappingURL=LiveAnnouncer.main.js.map

dist/LiveAnnouncer.module.js

@@ -12,6 +12,5 @@ /*
  */ /* Inspired by https://github.com/AlmeroSteyn/react-aria-live */ const $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY = 7000;
-let $319e236875307eab$var$liveAnnouncer = null;
-function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
+function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY, mode = 'message') {
     if (!$319e236875307eab$var$liveAnnouncer) $319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
-    $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
+    $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout, mode);
 }
@@ -46,8 +45,14 @@ function $319e236875307eab$export$d10ae4f68404609a(assertiveness) {
     }
-    announce(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
+    announce(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY, mode = 'message') {
+        var _this_assertiveLog, _this_politeLog;
         if (!this.node) return;
         let node = document.createElement('div');
-        node.textContent = message;
-        if (assertiveness === 'assertive') this.assertiveLog.appendChild(node);
-        else this.politeLog.appendChild(node);
+        if (mode === 'message') node.textContent = message;
+        else {
+            // To read an aria-labelledby, the element must have an appropriate role, such as img.
+            node.setAttribute('role', 'img');
+            node.setAttribute('aria-labelledby', message);
+        }
+        if (assertiveness === 'assertive') (_this_assertiveLog = this.assertiveLog) === null || _this_assertiveLog === void 0 ? void 0 : _this_assertiveLog.appendChild(node);
+        else (_this_politeLog = this.politeLog) === null || _this_politeLog === void 0 ? void 0 : _this_politeLog.appendChild(node);
         if (message !== '') setTimeout(()=>{
@@ -59,28 +64,36 @@ node.remove();
         if (!this.node) return;
-        if (!assertiveness || assertiveness === 'assertive') this.assertiveLog.innerHTML = '';
-        if (!assertiveness || assertiveness === 'polite') this.politeLog.innerHTML = '';
+        if ((!assertiveness || assertiveness === 'assertive') && this.assertiveLog) this.assertiveLog.innerHTML = '';
+        if ((!assertiveness || assertiveness === 'polite') && this.politeLog) this.politeLog.innerHTML = '';
     }
     constructor(){
-        this.node = document.createElement('div');
-        this.node.dataset.liveAnnouncer = 'true';
-        // copied from VisuallyHidden
-        Object.assign(this.node.style, {
-            border: 0,
-            clip: 'rect(0 0 0 0)',
-            clipPath: 'inset(50%)',
-            height: '1px',
-            margin: '-1px',
-            overflow: 'hidden',
-            padding: 0,
-            position: 'absolute',
-            width: '1px',
-            whiteSpace: 'nowrap'
-        });
-        this.assertiveLog = this.createLog('assertive');
-        this.node.appendChild(this.assertiveLog);
-        this.politeLog = this.createLog('polite');
-        this.node.appendChild(this.politeLog);
-        document.body.prepend(this.node);
+        this.node = null;
+        this.assertiveLog = null;
+        this.politeLog = null;
+        if (typeof document !== 'undefined') {
+            this.node = document.createElement('div');
+            this.node.dataset.liveAnnouncer = 'true';
+            // copied from VisuallyHidden
+            Object.assign(this.node.style, {
+                border: 0,
+                clip: 'rect(0 0 0 0)',
+                clipPath: 'inset(50%)',
+                height: '1px',
+                margin: '-1px',
+                overflow: 'hidden',
+                padding: 0,
+                position: 'absolute',
+                width: '1px',
+                whiteSpace: 'nowrap'
+            });
+            this.assertiveLog = this.createLog('assertive');
+            this.node.appendChild(this.assertiveLog);
+            this.politeLog = this.createLog('polite');
+            this.node.appendChild(this.politeLog);
+            document.body.prepend(this.node);
+        }
     }
 }
+// singleton, setup immediately so that the DOM is primed for the first announcement as soon as possible
+// Safari has a race condition where the first announcement is not read if we wait until the first announce call
+let $319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
 
@@ -87,0 +100,0 @@

dist/types.d.ts

@@ -5,3 +5,3 @@ type Assertiveness = 'assertive' | 'polite';
  */
-export function announce(message: string, assertiveness?: Assertiveness, timeout?: number): void;
+export function announce(message: string, assertiveness?: Assertiveness, timeout?: number, mode?: 'message' | 'ids'): void;
 /**
@@ -8,0 +8,0 @@ * Stops all queued announcements.

package.json

 {
   "name": "@react-aria/live-announcer",
-  "version": "3.0.0-nightly.3104+bb05fdc36",
+  "version": "3.0.0-nightly.3110+3555336a9",
   "description": "Spectrum UI components in React",
@@ -30,3 +30,3 @@ "license": "Apache-2.0",
   },
-  "gitHead": "bb05fdc361ef3b536a63479c29cc86f90c097a10"
+  "gitHead": "3555336a951aed44bb51e55c131dcf7176fc4b59"
 }

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54580

increased by12.61%

Lines of code

500

increased by11.11%

No dependency changes