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

Comparing version 3.0.0-nightly-4980928d3-240906 to 3.0.0-nightly-4baa1b08e-241029

dist/LiveAnnouncer.main.js

@@ -22,4 +22,16 @@
 function $97cebfa4133ebec3$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY) {
-    if (!$97cebfa4133ebec3$var$liveAnnouncer) $97cebfa4133ebec3$var$liveAnnouncer = new $97cebfa4133ebec3$var$LiveAnnouncer();
-    $97cebfa4133ebec3$var$liveAnnouncer.announce(message, assertiveness, timeout);
+    if (!$97cebfa4133ebec3$var$liveAnnouncer) {
+        $97cebfa4133ebec3$var$liveAnnouncer = new $97cebfa4133ebec3$var$LiveAnnouncer();
+        // wait for the live announcer regions to be added to the dom, then announce
+        // otherwise Safari won't announce the message if it's added too quickly
+        // found most times less than 100ms were not consistent when announcing with Safari
+        // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
+        // https://github.com/reactwg/react-18/discussions/102
+        // if we're in a test environment, announce without waiting
+        // @ts-ignore
+        if (!(typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined')) setTimeout(()=>{
+            if ($97cebfa4133ebec3$var$liveAnnouncer === null || $97cebfa4133ebec3$var$liveAnnouncer === void 0 ? void 0 : $97cebfa4133ebec3$var$liveAnnouncer.isAttached()) $97cebfa4133ebec3$var$liveAnnouncer === null || $97cebfa4133ebec3$var$liveAnnouncer === void 0 ? void 0 : $97cebfa4133ebec3$var$liveAnnouncer.announce(message, assertiveness, timeout);
+        }, 100);
+        else $97cebfa4133ebec3$var$liveAnnouncer.announce(message, assertiveness, timeout);
+    } else $97cebfa4133ebec3$var$liveAnnouncer.announce(message, assertiveness, timeout);
 }
@@ -42,2 +54,6 @@ function $97cebfa4133ebec3$export$d10ae4f68404609a(assertiveness) {
 class $97cebfa4133ebec3$var$LiveAnnouncer {
+    isAttached() {
+        var _this_node;
+        return (_this_node = this.node) === null || _this_node === void 0 ? void 0 : _this_node.isConnected;
+    }
     createLog(ariaLive) {
@@ -56,7 +72,12 @@ let node = document.createElement('div');
     announce(message, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY) {
+        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 (typeof message === 'object') {
+            // To read an aria-labelledby, the element must have an appropriate role, such as img.
+            node.setAttribute('role', 'img');
+            node.setAttribute('aria-labelledby', message['aria-labelledby']);
+        } else node.textContent = 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(()=>{
@@ -68,26 +89,31 @@ 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);
+        }
     }
@@ -94,0 +120,0 @@ }

dist/LiveAnnouncer.module.js

@@ -14,4 +14,16 @@ /*
 function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
-    if (!$319e236875307eab$var$liveAnnouncer) $319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
-    $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
+    if (!$319e236875307eab$var$liveAnnouncer) {
+        $319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
+        // wait for the live announcer regions to be added to the dom, then announce
+        // otherwise Safari won't announce the message if it's added too quickly
+        // found most times less than 100ms were not consistent when announcing with Safari
+        // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
+        // https://github.com/reactwg/react-18/discussions/102
+        // if we're in a test environment, announce without waiting
+        // @ts-ignore
+        if (!(typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined')) setTimeout(()=>{
+            if ($319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.isAttached()) $319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
+        }, 100);
+        else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
+    } else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
 }
@@ -34,2 +46,6 @@ function $319e236875307eab$export$d10ae4f68404609a(assertiveness) {
 class $319e236875307eab$var$LiveAnnouncer {
+    isAttached() {
+        var _this_node;
+        return (_this_node = this.node) === null || _this_node === void 0 ? void 0 : _this_node.isConnected;
+    }
     createLog(ariaLive) {
@@ -48,7 +64,12 @@ let node = document.createElement('div');
     announce(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
+        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 (typeof message === 'object') {
+            // To read an aria-labelledby, the element must have an appropriate role, such as img.
+            node.setAttribute('role', 'img');
+            node.setAttribute('aria-labelledby', message['aria-labelledby']);
+        } else node.textContent = 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(()=>{
@@ -60,26 +81,31 @@ 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);
+        }
     }
@@ -86,0 +112,0 @@ }

dist/types.d.ts

 type Assertiveness = 'assertive' | 'polite';
+type Message = string | {
+    'aria-labelledby': string;
+};
 /**
  * Announces the message using screen reader technology.
  */
-export function announce(message: string, assertiveness?: Assertiveness, timeout?: number): void;
+export function announce(message: Message, assertiveness?: Assertiveness, timeout?: number): void;
 /**
@@ -7,0 +10,0 @@ * Stops all queued announcements.

package.json

 {
   "name": "@react-aria/live-announcer",
-  "version": "3.0.0-nightly-4980928d3-240906",
+  "version": "3.0.0-nightly-4baa1b08e-241029",
   "description": "Spectrum UI components in React",
@@ -30,3 +30,3 @@ "license": "Apache-2.0",
   },
-  "stableVersion": "3.3.4"
+  "stableVersion": "3.4.0"
 }

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

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

Total package byte prevSize

49075

increased by32.25%

Lines of code

563

increased by25.11%

No dependency changes