@momentum-design/components 0.134.3 → 0.134.4

package/dist/components/screenreaderannouncer/screenreaderannouncer.component.d.ts

@@ -99,6 +99,11 @@ declare class ScreenreaderAnnouncer extends Component {
      * @default 500
      */
     debounceTime: number;
+    /**
+     * Whether this instance currently holds a ref for its identity.
+     * @internal
+     */
+    private hasIdentityRef;
     /**
      * Array to store timeOutIds for clearing timeouts later.
      * @internal
@@ -160,6 +165,15 @@ declare class ScreenreaderAnnouncer extends Component {
      * this.debounceTime milliseconds have passed since the last time this.announcement was updated.
      */
     private setupDebouncedAnnounce;
+    /**
+     * Increments the refcount for the current identity.
+     */
+    private acquireIdentityRef;
+    /**
+     * Decrements the refcount for the current identity.
+     * When the count reaches zero the live-region DOM node is removed.
+     */
+    private releaseIdentityRef;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;

package/dist/components/screenreaderannouncer/screenreaderannouncer.component.js

@@ -13,6 +13,14 @@ import { Component } from '../../models';
 import { debounce } from '../../utils/debounce';
 import { DEFAULTS } from './screenreaderannouncer.constants';
 import styles from './screenreaderannouncer.styles';
+// AI-Assisted
+/**
+ * Module-scope refcount: tracks how many live ScreenreaderAnnouncer instances
+ * reference each identity. When the count drops to zero the DOM node created
+ * by createAnnouncementAriaLiveRegion() is removed.
+ */
+const identityRefCount = new Map();
+// End AI-Assisted
 /**
  * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.
  *
@@ -113,6 +121,11 @@ class ScreenreaderAnnouncer extends Component {
          * @default 500
          */
         this.debounceTime = DEFAULTS.DEBOUNCE;
+        /**
+         * Whether this instance currently holds a ref for its identity.
+         * @internal
+         */
+        this.hasIdentityRef = false;
         /**
          * Array to store timeOutIds for clearing timeouts later.
          * @internal
@@ -262,12 +275,47 @@ class ScreenreaderAnnouncer extends Component {
             }
         }, this.debounceTime);
     }
+    // AI-Assisted
+    /**
+     * Increments the refcount for the current identity.
+     */
+    acquireIdentityRef() {
+        var _a;
+        if (this.hasIdentityRef)
+            return;
+        identityRefCount.set(this.identity, ((_a = identityRefCount.get(this.identity)) !== null && _a !== void 0 ? _a : 0) + 1);
+        this.hasIdentityRef = true;
+    }
+    /**
+     * Decrements the refcount for the current identity.
+     * When the count reaches zero the live-region DOM node is removed.
+     */
+    releaseIdentityRef() {
+        var _a;
+        if (!this.hasIdentityRef)
+            return;
+        const next = ((_a = identityRefCount.get(this.identity)) !== null && _a !== void 0 ? _a : 1) - 1;
+        if (next <= 0) {
+            identityRefCount.delete(this.identity);
+            const node = this.getElementByIdAcrossShadowRoot(this.identity);
+            // Only remove nodes WE created (they carry our class).
+            if (node === null || node === void 0 ? void 0 : node.classList.contains('mdc-screenreaderannouncer__visually-hidden')) {
+                node.remove();
+            }
+        }
+        else {
+            identityRefCount.set(this.identity, next);
+        }
+        this.hasIdentityRef = false;
+    }
+    // End AI-Assisted
     connectedCallback() {
         super.connectedCallback();
         if (this.identity.length === 0) {
             this.identity = DEFAULTS.IDENTITY;
         }
         this.createAnnouncementAriaLiveRegion();
+        this.acquireIdentityRef();
         this.setupDebouncedAnnounce();
     }
     disconnectedCallback() {
@@ -276,6 +324,7 @@ class ScreenreaderAnnouncer extends Component {
         this.clearTimeOutsAndAnnouncements();
         // cancel any pending debounced action and clear DOM timeouts
         (_a = this.debouncedAnnounce) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.releaseIdentityRef();
     }
     updated(changedProperties) {
         var _a;

package/dist/custom-elements.json

@@ -38526,6 +38526,12 @@
           "description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\nConsumers can also use the public `announce` function to trigger announcements programmatically\nby passing an options object where `announcement` is required and all other fields are optional.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nIf you provide a custom `identity`, you must ensure that the element exists and is visually hidden.\n\nExample CSS:\n\n```css\n#your-custom-announcer-id {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n```\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a `<p>` element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n2. If multiple `mdc-screenreaderannouncer` instances use the same `identity`, `data-aria-live`\nfor that identity is effectively determined by the first instance that creates announcements for it.\nChanging `data-aria-live` in later instances for the same identity will not update already-created\nlive-region containers.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
           "name": "ScreenreaderAnnouncer",
           "members": [
+            {
+              "kind": "method",
+              "name": "acquireIdentityRef",
+              "privacy": "private",
+              "description": "Increments the refcount for the current identity."
+            },
             {
               "kind": "method",
               "name": "announce",
@@ -38611,6 +38617,12 @@
               "attribute": "identity",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "releaseIdentityRef",
+              "privacy": "private",
+              "description": "Decrements the refcount for the current identity.\nWhen the count reaches zero the live-region DOM node is removed."
+            },
             {
               "kind": "method",
               "name": "setupDebouncedAnnounce",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.134.3",
+  "version": "0.134.4",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"