@microsoft/omnichannel-chat-components 1.1.19 → 1.2.0-main.5ebd4eb

package/lib/cjs/components/chatbutton/ChatButton.browseMode.a11y.spec.js

@@ -0,0 +1,227 @@
+"use strict";
+
+require("@testing-library/jest-dom/extend-expect");
+var _react = require("@testing-library/react");
+var _BroadcastService = require("../../services/BroadcastService");
+var _ChatButton = _interopRequireDefault(require("./ChatButton"));
+var _react2 = _interopRequireDefault(require("react"));
+var _defaultChatButtonProps = require("./common/defaultProps/defaultChatButtonProps");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Repro / catcher for internal tracking — NVDA / JAWS in browse mode (virtual cursor)
+ * land on "Let's Chat, We're Online" multiple times when navigating with the
+ * down-arrow key.
+ *
+ * Root cause in code: `ChatButton` renders a Fluent UI `<Stack role="button">`
+ * with `tabIndex={0}` whose accessible name is computed from its visible
+ * children — a `<Label>` for the title (e.g. "Let's Chat!") and a `<Label>`
+ * for the subtitle (e.g. "We're online."). In browse mode, NVDA / JAWS treat
+ * the button itself AND each inner text node as separate virtual-cursor stops,
+ * each carrying the same announceable name fragments. There is no
+ * `aria-label` set by default, and the inner labels are not marked
+ * `aria-hidden="true"` (which is what would collapse them into a single
+ * announcement under the button container).
+ *
+ * Catcher contract: in the rendered chat-button subtree, at most ONE element
+ * may expose each of the title / subtitle strings as an announceable name
+ * source. An "announceable name source" here is:
+ *   - an `aria-label` attribute on a focusable / role-bearing element, OR
+ *   - a visible `<Label>` (or other text-bearing element) that is NOT
+ *     `aria-hidden="true"` and is not nested inside an element that is
+ *     `aria-hidden="true"`.
+ *
+ * Regression guard: in the rendered DOM, the parent role=button Stack owns a
+ * single consolidated aria-label (synthesized from title + subtitle, plus
+ * unread-count fragment when applicable) and the inner Labels live inside an
+ * aria-hidden text container so browse-mode lands on the button exactly once.
+ * Override paths (componentOverrides.title/subtitle/textContainer or a
+ * consumer-supplied controlProps.ariaLabel) are preserved unchanged so
+ * customers who manage their own accessible names are not affected.
+ */
+
+beforeAll(() => {
+  (0, _BroadcastService.BroadcastServiceInitialize)("testChannel");
+});
+afterEach(() => {
+  (0, _react.cleanup)();
+});
+const isInsideAriaHidden = el => {
+  let cursor = el;
+  while (cursor) {
+    if (cursor.getAttribute("aria-hidden") === "true") return true;
+    cursor = cursor.parentElement;
+  }
+  return false;
+};
+const visibleTextElementsMatching = (root, text) => {
+  return Array.from(root.querySelectorAll("*")).filter(el => {
+    if (isInsideAriaHidden(el)) return false;
+    // Only count leaf-ish text-bearing elements (don't double-count
+    // ancestors whose textContent obviously aggregates children).
+    const ownText = Array.from(el.childNodes).filter(n => n.nodeType === Node.TEXT_NODE).map(n => (n.textContent || "").trim()).join(" ").trim();
+    return ownText === text;
+  });
+};
+
+/**
+ * Regression guard for internal tracking — ChatButton must not produce duplicate
+ * NVDA / JAWS browse-mode stops. Visible title / subtitle text is excluded
+ * from the accessibility tree (aria-hidden) and the button container owns a
+ * single consolidated aria-label.
+ */
+describe("ChatButton — browse-mode duplicate stops (internal tracking)", () => {
+  it("title text 'Let's Chat!' must NOT appear as a visible (non-aria-hidden) name source in the chat-button subtree", () => {
+    const _render = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, _defaultChatButtonProps.defaultChatButtonProps)),
+      container = _render.container;
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    const titleStops = visibleTextElementsMatching(button, "Let's Chat!");
+    // The visible title should be excluded from the accessibility tree
+    // (e.g. via aria-hidden on the text container) so the announced name
+    // comes solely from the consolidated aria-label on the button. Any
+    // exposed text-bearing element with this exact text creates an
+    // additional browse-mode stop and reproduces internal tracking.
+    expect(titleStops.length).toBe(0);
+  });
+  it("subtitle text 'We're online.' must NOT appear as a visible (non-aria-hidden) name source in the chat-button subtree", () => {
+    const _render2 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, _defaultChatButtonProps.defaultChatButtonProps)),
+      container = _render2.container;
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    const subtitleStops = visibleTextElementsMatching(button, "We're online.");
+    expect(subtitleStops.length).toBe(0);
+  });
+  it("the chat-button container must own a single consolidated aria-label so browse mode lands on it once", () => {
+    const _render3 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, _defaultChatButtonProps.defaultChatButtonProps)),
+      container = _render3.container;
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    // Either the container has a non-empty aria-label, OR every inner
+    // text-bearing descendant is aria-hidden so the computed name comes
+    // from the inner text exactly once with no extra browse-mode stops.
+    const hasAriaLabel = !!(button.getAttribute("aria-label") || "").trim();
+    const innerVisibleText = visibleTextElementsMatching(button, "Let's Chat!").length + visibleTextElementsMatching(button, "We're online.").length;
+    // Today: hasAriaLabel === false (default ariaLabel is undefined) AND
+    // innerVisibleText > 0. The catcher requires at least one of these
+    // to flip.
+    expect(hasAriaLabel || innerVisibleText === 0).toBe(true);
+  });
+  it("the synthesized aria-label includes the unread-count fragment when hideNotificationBubble=false and unreadMessageCount > 0", () => {
+    const props = {
+      ..._defaultChatButtonProps.defaultChatButtonProps,
+      controlProps: {
+        ..._defaultChatButtonProps.defaultChatButtonProps.controlProps,
+        hideNotificationBubble: false,
+        unreadMessageCount: "3",
+        ariaLabelUnreadMessageString: "you have new messages",
+        titleText: "Let's Chat!",
+        subtitleText: "We're online."
+      }
+    };
+    const _render4 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, props)),
+      container = _render4.container;
+    const button = container.firstElementChild;
+    const ariaLabel = button.getAttribute("aria-label") || "";
+    expect(ariaLabel).toContain("3");
+    expect(ariaLabel).toContain("you have new messages");
+    expect(ariaLabel).toContain("Let's Chat!");
+    expect(ariaLabel).toContain("We're online.");
+  });
+  it("a consumer-supplied controlProps.ariaLabel wins over the synthesized label", () => {
+    const props = {
+      ..._defaultChatButtonProps.defaultChatButtonProps,
+      controlProps: {
+        ..._defaultChatButtonProps.defaultChatButtonProps.controlProps,
+        ariaLabel: "Talk to a live agent"
+      }
+    };
+    const _render5 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, props)),
+      container = _render5.container;
+    const button = container.firstElementChild;
+    expect(button.getAttribute("aria-label")).toBe("Talk to a live agent");
+  });
+  it("componentOverrides.textContainer preserves consumer-rendered visible text (synthesis is skipped)", () => {
+    const customText = "My custom chat text";
+    const props = {
+      ..._defaultChatButtonProps.defaultChatButtonProps,
+      componentOverrides: {
+        textContainer: /*#__PURE__*/_react2.default.createElement("div", {
+          id: "my-custom-text"
+        }, customText)
+      }
+    };
+    const _render6 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, props)),
+      container = _render6.container;
+    const button = container.firstElementChild;
+    // The custom text MUST remain visible in the a11y tree so consumers
+    // who replace the text container keep their announced text.
+    const customStops = visibleTextElementsMatching(button, customText);
+    expect(customStops.length).toBeGreaterThan(0);
+    // And the button must NOT carry a synthesized aria-label that would
+    // override the consumer's content.
+    const ariaLabel = (button.getAttribute("aria-label") || "").trim();
+    expect(ariaLabel).toBe("");
+  });
+  it("componentOverrides.title preserves consumer-rendered visible title (synthesis is skipped)", () => {
+    const customTitle = "Custom override title";
+    const props = {
+      ..._defaultChatButtonProps.defaultChatButtonProps,
+      componentOverrides: {
+        title: /*#__PURE__*/_react2.default.createElement("span", {
+          id: "my-custom-title"
+        }, customTitle)
+      }
+    };
+    const _render7 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, props)),
+      container = _render7.container;
+    const button = container.firstElementChild;
+    const customStops = visibleTextElementsMatching(button, customTitle);
+    expect(customStops.length).toBeGreaterThan(0);
+    const ariaLabel = (button.getAttribute("aria-label") || "").trim();
+    expect(ariaLabel).toBe("");
+  });
+
+  // Regression guard for the strict string-equality slip-throughs that
+  // brittle `unreadMessageCount !== "0"` allowed: values that coerce to
+  // numeric 0 (or non-numeric noise) must NOT render the bubble nor pollute
+  // the synthesized aria-label with a "0 you have new messages" fragment.
+  describe.each([["padded zero (' 0 ')", " 0 "], ["decimal zero ('0.0')", "0.0"], ["empty string ('')", ""], ["non-numeric ('abc')", "abc"]])("zero-equivalent unreadMessageCount: %s", (_label, value) => {
+    it("does NOT render the notification bubble", () => {
+      const props = {
+        ..._defaultChatButtonProps.defaultChatButtonProps,
+        controlProps: {
+          ..._defaultChatButtonProps.defaultChatButtonProps.controlProps,
+          hideNotificationBubble: false,
+          unreadMessageCount: value,
+          ariaLabelUnreadMessageString: "you have new messages"
+        }
+      };
+      const _render8 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, props)),
+        container = _render8.container;
+      const bubble = container.querySelector("[id$='-notification-bubble']");
+      expect(bubble).toBeNull();
+    });
+    it("does NOT inject the unread-count fragment into the synthesized aria-label", () => {
+      const props = {
+        ..._defaultChatButtonProps.defaultChatButtonProps,
+        controlProps: {
+          ..._defaultChatButtonProps.defaultChatButtonProps.controlProps,
+          hideNotificationBubble: false,
+          unreadMessageCount: value,
+          ariaLabelUnreadMessageString: "you have new messages"
+        }
+      };
+      const _render9 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, props)),
+        container = _render9.container;
+      const button = container.firstElementChild;
+      const ariaLabel = button.getAttribute("aria-label") || "";
+      expect(ariaLabel).not.toContain("you have new messages");
+      // and the raw zero-equivalent must not leak into the label
+      if (value.trim().length > 0) {
+        expect(ariaLabel).not.toContain(value.trim());
+      }
+    });
+  });
+});

package/lib/cjs/components/chatbutton/ChatButton.browseMode.unfixed.a11y.spec.js

@@ -0,0 +1,112 @@
+"use strict";
+
+require("@testing-library/jest-dom/extend-expect");
+var _react = require("@testing-library/react");
+var _BroadcastService = require("../../services/BroadcastService");
+var _ChatButton = _interopRequireDefault(require("./ChatButton"));
+var _react2 = _interopRequireDefault(require("react"));
+var _defaultChatButtonControlProps = require("./common/defaultProps/defaultChatButtonControlProps");
+var _defaultChatButtonProps = require("./common/defaultProps/defaultChatButtonProps");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const expectedTitle = _defaultChatButtonControlProps.defaultChatButtonControlProps.titleText;
+const expectedSubtitle = _defaultChatButtonControlProps.defaultChatButtonControlProps.subtitleText;
+
+/**
+ * Repro / catcher for internal tracking — NVDA / JAWS in browse mode (virtual cursor)
+ * land on "Let's Chat, We're Online" multiple times when navigating with the
+ * down-arrow key.
+ *
+ * Root cause in code: `ChatButton` renders a Fluent UI `<Stack role="button">`
+ * with `tabIndex={0}` whose accessible name is computed from its visible
+ * children — a `<Label>` for the title (e.g. "Let's Chat!") and a `<Label>`
+ * for the subtitle (e.g. "We're online."). In browse mode, NVDA / JAWS treat
+ * the button itself AND each inner text node as separate virtual-cursor stops,
+ * each carrying the same announceable name fragments. There is no
+ * `aria-label` set by default, and the inner labels are not marked
+ * `aria-hidden="true"` (which is what would collapse them into a single
+ * announcement under the button container).
+ *
+ * Catcher contract: the title / subtitle strings must NOT appear as
+ * additional announceable name sources in the chat-button subtree (only the
+ * single consolidated aria-label on the role=button container should name the
+ * button). An "announceable name source" here is:
+ *   - an `aria-label` attribute on a focusable / role-bearing element, OR
+ *   - a visible `<Label>` (or other text-bearing element) that is NOT
+ *     `aria-hidden="true"` and is not nested inside an element that is
+ *     `aria-hidden="true"`.
+ *
+ * Expected to FAIL today: the rendered DOM contains BOTH the title text node
+ * AND the subtitle text node as bare visible text, and the parent Stack has
+ * no `aria-label` to consolidate them. Browse-mode therefore sees three
+ * stops (button, title, subtitle) all carrying the same combined name.
+ */
+
+beforeAll(() => {
+  (0, _BroadcastService.BroadcastServiceInitialize)("testChannel");
+});
+afterEach(() => {
+  (0, _react.cleanup)();
+});
+const isInsideAriaHidden = el => {
+  let cursor = el;
+  while (cursor) {
+    if (cursor.getAttribute("aria-hidden") === "true") return true;
+    cursor = cursor.parentElement;
+  }
+  return false;
+};
+const visibleTextElementsMatching = (root, text) => {
+  return Array.from(root.querySelectorAll("*")).filter(el => {
+    if (isInsideAriaHidden(el)) return false;
+    // Only count leaf-ish text-bearing elements (don't double-count
+    // ancestors whose textContent obviously aggregates children).
+    const ownText = Array.from(el.childNodes).filter(n => n.nodeType === Node.TEXT_NODE).map(n => (n.textContent || "").trim()).join(" ").trim();
+    return ownText === text;
+  });
+};
+
+/**
+ * SKIPPED until the source fix lands. Un-skip the describe below to validate
+ * the fix to internal tracking; the suite is expected to FAIL today against unfixed
+ * source. Mirrors the chat-widget `*.unfixed.a11y.spec.tsx` convention.
+ */
+describe.skip("ChatButton — browse-mode duplicate stops (internal tracking)", () => {
+  it(`title text '${expectedTitle}' must NOT appear as a visible (non-aria-hidden) name source in the chat-button subtree`, () => {
+    const _render = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, _defaultChatButtonProps.defaultChatButtonProps)),
+      container = _render.container;
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    const titleStops = visibleTextElementsMatching(button, expectedTitle);
+    // The visible title should be excluded from the accessibility tree
+    // (e.g. via aria-hidden on the text container) so the announced name
+    // comes solely from the consolidated aria-label on the button. Any
+    // exposed text-bearing element with this exact text creates an
+    // additional browse-mode stop and reproduces internal tracking.
+    expect(titleStops.length).toBe(0);
+  });
+  it(`subtitle text '${expectedSubtitle}' must NOT appear as a visible (non-aria-hidden) name source in the chat-button subtree`, () => {
+    const _render2 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, _defaultChatButtonProps.defaultChatButtonProps)),
+      container = _render2.container;
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    const subtitleStops = visibleTextElementsMatching(button, expectedSubtitle);
+    expect(subtitleStops.length).toBe(0);
+  });
+  it("the chat-button container must own a single consolidated aria-label so browse mode lands on it once", () => {
+    const _render3 = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_ChatButton.default, _defaultChatButtonProps.defaultChatButtonProps)),
+      container = _render3.container;
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    // Either the container has a non-empty aria-label, OR every inner
+    // text-bearing descendant is aria-hidden so the computed name comes
+    // from the inner text exactly once with no extra browse-mode stops.
+    const hasAriaLabel = !!(button.getAttribute("aria-label") || "").trim();
+    const innerVisibleText = visibleTextElementsMatching(button, expectedTitle).length + visibleTextElementsMatching(button, expectedSubtitle).length;
+    // Today: hasAriaLabel === false (default ariaLabel is undefined) AND
+    // innerVisibleText > 0. The catcher requires at least one of these
+    // to flip.
+    expect(hasAriaLabel || innerVisibleText === 0).toBe(true);
+  });
+});

package/lib/cjs/components/chatbutton/ChatButton.js

@@ -17,13 +17,24 @@ var _defaultChatButtonSubTitleStyles = require("./common/defaultStyles/defaultCh
 var _defaultChatButtonTextContainerStyles = require("./common/defaultStyles/defaultChatButtonTextContainerStyles");
 var _defaultChatButtonTitleStyles = require("./common/defaultStyles/defaultChatButtonTitleStyles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Returns true when the unread-message count represents a positive number.
+// Defensive against non-strict callers that may pass " 0 ", "0.0", "" or a
+// stringified numeric 0; only a finite count strictly greater than zero counts
+// as "unread" for both the notification bubble and the synthesized aria-label.
+function hasUnreadMessages(unreadMessageCount) {
+  if (unreadMessageCount === undefined || unreadMessageCount === null) {
+    return false;
+  }
+  const parsed = Number(unreadMessageCount);
+  return Number.isFinite(parsed) && parsed > 0;
+}
 function NotificationBubble(props, parentId) {
   var _props$styleProps, _props$controlProps;
   const notificationBubbleStyles = {
     root: Object.assign({}, _defaultChatButtonNotificationBubbleStyles.defaultChatButtonNotificationBubbleStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.notificationBubbleStyleProps)
   };
   const unreadMessageCount = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.unreadMessageCount) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.unreadMessageCount);
-  if (unreadMessageCount !== "0") {
+  if (hasUnreadMessages(unreadMessageCount)) {
     var _props$componentOverr, _props$controlProps2, _props$controlProps3, _props$styleProps2, _props$controlProps4, _props$controlProps5;
     return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
       "aria-live": "polite",
@@ -49,7 +60,7 @@ function IconContainer(props, parentId) {
   });
 }
 function TextContainer(props, parentId) {
-  var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$controlProps9, _props$controlProps0, _props$controlProps1, _props$componentOverr3, _props$styleProps8, _props$componentOverr4, _props$styleProps9, _props$componentOverr5, _props$styleProps0;
+  var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$controlProps9, _props$controlProps0, _props$controlProps1, _props$componentOverr3, _props$componentOverr4, _props$componentOverr5, _props$styleProps8, _props$componentOverr6, _props$styleProps9, _props$componentOverr7, _props$styleProps0;
   const textContainerStyles = {
     root: Object.assign({}, _defaultChatButtonTextContainerStyles.defaultChatButtonTextContainerStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.textContainerStyleProps)
   };
@@ -65,16 +76,26 @@ function TextContainer(props, parentId) {
   const titleText = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.titleText);
   const subtitleDir = ((_props$controlProps0 = props.controlProps) === null || _props$controlProps0 === void 0 ? void 0 : _props$controlProps0.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
   const subtitleText = ((_props$controlProps1 = props.controlProps) === null || _props$controlProps1 === void 0 ? void 0 : _props$controlProps1.subtitleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.subtitleText);
-  return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
+
+  // internal tracking: when the default title / subtitle Labels are used, hide the
+  // text container subtree from the accessibility tree. The button container
+  // owns a consolidated aria-label that already announces the same text, so
+  // exposing the inner Labels causes NVDA / JAWS browse-mode to land on the
+  // same announcement multiple times. Customer overrides for title /
+  // subtitle keep their default a11y behavior so they can manage their own
+  // accessible names.
+  const hideTextFromA11yTree = !((_props$componentOverr3 = props.componentOverrides) !== null && _props$componentOverr3 !== void 0 && _props$componentOverr3.title) && !((_props$componentOverr4 = props.componentOverrides) !== null && _props$componentOverr4 !== void 0 && _props$componentOverr4.subtitle);
+  return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.textContainer) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
     styles: textContainerStyles,
     className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 || (_props$styleProps8 = _props$styleProps8.classNames) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.textContainerClassName,
-    id: parentId + "-text-container"
-  }, !hideChatTitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.title) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
+    id: parentId + "-text-container",
+    "aria-hidden": hideTextFromA11yTree || undefined
+  }, !hideChatTitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr6 = props.componentOverrides) === null || _props$componentOverr6 === void 0 ? void 0 : _props$componentOverr6.title) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
     styles: titleStyles,
     dir: titleDir,
     className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 || (_props$styleProps9 = _props$styleProps9.classNames) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.titleClassName,
     id: parentId + "-title"
-  }, titleText)), !hideChatSubtitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.subtitle) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
+  }, titleText)), !hideChatSubtitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr7 = props.componentOverrides) === null || _props$componentOverr7 === void 0 ? void 0 : _props$componentOverr7.subtitle) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
     styles: subtitleStyles,
     dir: subtitleDir,
     className: (_props$styleProps0 = props.styleProps) === null || _props$styleProps0 === void 0 || (_props$styleProps0 = _props$styleProps0.classNames) === null || _props$styleProps0 === void 0 ? void 0 : _props$styleProps0.subtitleClassName,
@@ -82,21 +103,36 @@ function TextContainer(props, parentId) {
   }, subtitleText)));
 }
 function ChatButton(props) {
-  var _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$controlProps17, _props$styleProps1;
+  var _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$controlProps17, _props$controlProps18, _props$controlProps19, _props$controlProps20, _props$controlProps21, _props$controlProps22, _props$componentOverr8, _props$componentOverr9, _props$componentOverr0, _props$controlProps23, _props$styleProps1;
   const elementId = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.id) ?? _Constants.Ids.DefaultChatButtonId;
-  const defaultAriaLabel = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.ariaLabel) ?? _defaultChatButtonControlProps.defaultChatButtonControlProps.ariaLabel;
-  const defaultRole = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.role) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.role);
-  const containersDir = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
-  const hideChatButton = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatButton) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatButton);
-  const hideChatIcon = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideChatIcon) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatIcon);
-  const hideChatTextContainer = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideChatTextContainer) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTextContainer);
-  const hideNotificationBubble = ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.hideNotificationBubble) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideNotificationBubble);
+  const defaultRole = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.role) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.role);
+  const containersDir = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
+  const hideChatButton = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatButton) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatButton);
+  const hideChatIcon = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatIcon) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatIcon);
+  const hideChatTextContainer = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideChatTextContainer) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTextContainer);
+  const hideNotificationBubble = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideNotificationBubble) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideNotificationBubble);
+
+  // internal tracking: when the consumer has not supplied a custom aria-label and
+  // the default title / subtitle Labels are in play, synthesize a single
+  // consolidated aria-label from the visible text so NVDA / JAWS browse
+  // mode lands on the role=button container exactly once. The text
+  // container is also marked aria-hidden in TextContainer so the inner
+  // labels do not produce additional virtual-cursor stops.
+  const titleText = ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.titleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.titleText);
+  const subtitleText = ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.subtitleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.subtitleText);
+  const hideChatTitle = ((_props$controlProps19 = props.controlProps) === null || _props$controlProps19 === void 0 ? void 0 : _props$controlProps19.hideChatTitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTitle);
+  const hideChatSubtitle = ((_props$controlProps20 = props.controlProps) === null || _props$controlProps20 === void 0 ? void 0 : _props$controlProps20.hideChatSubtitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatSubtitle);
+  const unreadMessageCount = ((_props$controlProps21 = props.controlProps) === null || _props$controlProps21 === void 0 ? void 0 : _props$controlProps21.unreadMessageCount) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.unreadMessageCount);
+  const ariaLabelUnreadMessageString = ((_props$controlProps22 = props.controlProps) === null || _props$controlProps22 === void 0 ? void 0 : _props$controlProps22.ariaLabelUnreadMessageString) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.ariaLabelUnreadMessageString);
+  const canSynthesizeAriaLabel = !hideChatTextContainer && !((_props$componentOverr8 = props.componentOverrides) !== null && _props$componentOverr8 !== void 0 && _props$componentOverr8.textContainer) && !((_props$componentOverr9 = props.componentOverrides) !== null && _props$componentOverr9 !== void 0 && _props$componentOverr9.title) && !((_props$componentOverr0 = props.componentOverrides) !== null && _props$componentOverr0 !== void 0 && _props$componentOverr0.subtitle);
+  const synthesizedAriaLabel = canSynthesizeAriaLabel ? [!hideNotificationBubble && hasUnreadMessages(unreadMessageCount) ? `${unreadMessageCount} ${ariaLabelUnreadMessageString ?? ""}`.trim() : "", !hideChatTitle ? titleText : "", !hideChatSubtitle ? subtitleText : ""].filter(Boolean).join(" ").trim() : "";
+  const defaultAriaLabel = ((_props$controlProps23 = props.controlProps) === null || _props$controlProps23 === void 0 ? void 0 : _props$controlProps23.ariaLabel) ?? _defaultChatButtonControlProps.defaultChatButtonControlProps.ariaLabel ?? (synthesizedAriaLabel || undefined);
   const chatButtonGroupStyles = {
     root: Object.assign({}, _defaultChatButtonGeneralStyles.defaultChatButtonGeneralStyles, (_props$styleProps1 = props.styleProps) === null || _props$styleProps1 === void 0 ? void 0 : _props$styleProps1.generalStyleProps)
   };
   const handleInitiateChatClick = (0, _react2.useCallback)(() => {
-    var _props$controlProps18;
-    if ((_props$controlProps18 = props.controlProps) !== null && _props$controlProps18 !== void 0 && _props$controlProps18.onClick) {
+    var _props$controlProps24;
+    if ((_props$controlProps24 = props.controlProps) !== null && _props$controlProps24 !== void 0 && _props$controlProps24.onClick) {
       const customEvent = {
         elementType: _Constants.ElementType.ChatButton,
         elementId: elementId,

package/lib/cjs/components/common/subcomponents/CloseButton.js

@@ -9,9 +9,7 @@ var _Constants = require("../../../common/Constants");
 var _CommandButton = _interopRequireDefault(require("../commandbutton/CommandButton"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CloseButton(props) {
-  const {
-    type
-  } = props;
+  const type = props.type;
   const customEvent = {
     elementType: _Constants.ElementType.CloseButton,
     elementId: props === null || props === void 0 ? void 0 : props.id,

package/lib/cjs/components/confirmationpane/ConfirmationPane.js

@@ -23,7 +23,7 @@ var _defaultConfirmationPaneConfirmButtonFocusedStyles = require("./common/defau
 var _defaultConfirmationPaneCancelButtonFocusedStyles = require("./common/defaultStyles/defaultConfirmationPaneCancelButtonFocusedStyles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ConfirmationPane(props) {
-  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps0, _props$styleProps1, _props$styleProps10, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr, _props$styleProps11, _props$controlProps9, _props$controlProps0, _props$componentOverr2, _props$styleProps12, _props$controlProps1, _props$styleProps13, _props$controlProps10, _props$componentOverr3, _props$styleProps14, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$componentOverr4, _props$styleProps15, _props$controlProps14, _props$controlProps15;
+  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps0, _props$styleProps1, _props$styleProps10, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr, _props$styleProps11, _props$controlProps9, _props$controlProps0, _props$componentOverr2, _props$styleProps12, _props$controlProps1, _props$styleProps13, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$styleProps14, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$componentOverr4, _props$styleProps15, _props$controlProps15, _props$controlProps16;
   const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.id;
   const handleConfirmClick = (0, _react2.useCallback)(() => {
     var _props$controlProps2;
@@ -105,21 +105,23 @@ function ConfirmationPane(props) {
     horizontal: true,
     className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 || (_props$styleProps13 = _props$styleProps13.classNames) === null || _props$styleProps13 === void 0 ? void 0 : _props$styleProps13.buttonGroupClassName,
     styles: buttonGroupStyles,
-    id: elementId + "-buttongroup"
-  }, !((_props$controlProps10 = props.controlProps) !== null && _props$controlProps10 !== void 0 && _props$controlProps10.hideConfirmButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.confirmButton) || /*#__PURE__*/_react2.default.createElement(_Button.PrimaryButton, {
+    id: elementId + "-buttongroup",
+    role: "group",
+    "aria-label": ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.buttonGroupAriaLabel) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.buttonGroupAriaLabel
+  }, !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideConfirmButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.confirmButton) || /*#__PURE__*/_react2.default.createElement(_Button.PrimaryButton, {
     className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 || (_props$styleProps14 = _props$styleProps14.classNames) === null || _props$styleProps14 === void 0 ? void 0 : _props$styleProps14.confirmButtonClassName,
     styles: confirmButtonStyles,
-    text: ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.confirmButtonText) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.confirmButtonText,
+    text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.confirmButtonText) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.confirmButtonText,
     onClick: handleConfirmClick,
     id: elementId + "-confirmbutton",
-    ariaLabel: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.confirmButtonAriaLabel) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.confirmButtonAriaLabel
-  })), !((_props$controlProps13 = props.controlProps) !== null && _props$controlProps13 !== void 0 && _props$controlProps13.hideCancelButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.cancelButton) || /*#__PURE__*/_react2.default.createElement(_Button.DefaultButton, {
+    ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.confirmButtonAriaLabel) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.confirmButtonAriaLabel
+  })), !((_props$controlProps14 = props.controlProps) !== null && _props$controlProps14 !== void 0 && _props$controlProps14.hideCancelButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.cancelButton) || /*#__PURE__*/_react2.default.createElement(_Button.DefaultButton, {
     className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 || (_props$styleProps15 = _props$styleProps15.classNames) === null || _props$styleProps15 === void 0 ? void 0 : _props$styleProps15.cancelButtonClassName,
     styles: cancelButtonStyles,
-    text: ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.cancelButtonText) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.cancelButtonText,
+    text: ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.cancelButtonText) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.cancelButtonText,
     onClick: handleCancelClick,
     id: elementId + "-cancelbutton",
-    ariaLabel: ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.cancelButtonAriaLabel) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.cancelButtonAriaLabel
+    ariaLabel: ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.cancelButtonAriaLabel) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.cancelButtonAriaLabel
   })))));
 }
 var _default = exports.default = ConfirmationPane;

package/lib/cjs/components/confirmationpane/common/defaultProps/defaultConfirmationPaneControlProps.js

@@ -13,6 +13,7 @@ const defaultConfirmationPaneControlProps = exports.defaultConfirmationPaneContr
   titleText: _Constants.Texts.ConfirmationPaneTitle,
   hideSubtitle: false,
   subtitleText: _Constants.Texts.ConfirmationPaneSubtitle,
+  buttonGroupAriaLabel: _Constants.AriaLabels.ConfirmationPaneButtonGroup,
   hideConfirmButton: false,
   confirmButtonText: _Constants.Texts.ConfirmButtonText,
   confirmButtonAriaLabel: _Constants.AriaLabels.ConfirmationPaneConfirm,

package/lib/cjs/components/footer/subcomponents/AudioNotificationButton.js

@@ -9,11 +9,18 @@ var _react2 = _interopRequireWildcard(require("react"));
 var _BroadcastService = require("../../../services/BroadcastService");
 var _Constants = require("../../../common/Constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function AudioNotificationButton(props) {
-  const {
-    disabled
-  } = props;
-  const [muted, setMuted] = (0, _react2.useState)(props.isAudioMuted);
+  const disabled = props.disabled;
+  const _useState = (0, _react2.useState)(props.isAudioMuted),
+    _useState2 = _slicedToArray(_useState, 2),
+    muted = _useState2[0],
+    setMuted = _useState2[1];
   let iconStyles = {};
   if (props.type === _Constants.ButtonTypes.Icon) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/cjs/components/footer/subcomponents/DownloadTranscriptButton.js

@@ -9,9 +9,7 @@ var _Constants = require("../../../common/Constants");
 var _CommandButton = _interopRequireDefault(require("../../common/commandbutton/CommandButton"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function DownloadTranscriptButton(props) {
-  const {
-    type
-  } = props;
+  const type = props.type;
   const customEvent = {
     elementType: _Constants.ElementType.FooterDownloadTranscriptButton,
     elementId: props === null || props === void 0 ? void 0 : props.id,

package/lib/cjs/components/footer/subcomponents/EmailTranscriptButton.js

@@ -9,9 +9,7 @@ var _Constants = require("../../../common/Constants");
 var _CommandButton = _interopRequireDefault(require("../../common/commandbutton/CommandButton"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function EmailTranscriptButton(props) {
-  const {
-    type
-  } = props;
+  const type = props.type;
   const customEvent = {
     elementType: _Constants.ElementType.FooterEmailTranscriptButton,
     elementId: props === null || props === void 0 ? void 0 : props.id,