@microsoft/omnichannel-chat-widget 1.8.4-main.6b93408 → 1.8.4-main.810d050

package/lib/cjs/common/Constants.js

@@ -158,7 +158,6 @@ let HtmlIdNames = /*#__PURE__*/_createClass(function HtmlIdNames() {
 });
 exports.HtmlIdNames = HtmlIdNames;
 _defineProperty(HtmlIdNames, "MSLiveChatWidget", "MSLiveChatWidget");
-_defineProperty(HtmlIdNames, "fileSentAnnouncementRegionId", "ms_lcw_file_sent_announcement");
 let HtmlClassNames = /*#__PURE__*/_createClass(function HtmlClassNames() {
   _classCallCheck(this, HtmlClassNames);
 });

package/lib/cjs/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.js

@@ -67,6 +67,7 @@ const PostChatSurveyPaneStateful = props => {
   };
   const controlProps = {
     id: "oc-lcw-postchatsurvey-pane",
+    title: "Post-chat survey",
     surveyURL: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.surveyURL) ?? surveyInviteLink,
     ...props.controlProps
   };

package/lib/cjs/components/prechatsurveypanestateful/PreChatSurveyPaneStateful.js

@@ -20,6 +20,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 let uiTimer;
+const getFocusedElementAnnouncement = element => {
+  var _element$textContent;
+  const ariaLabel = element.getAttribute(_Constants.HtmlAttributeNames.ariaLabel);
+  if (ariaLabel) {
+    return ariaLabel.trim();
+  }
+  const ariaLabelledBy = element.getAttribute(_Constants.HtmlAttributeNames.ariaLabelledby);
+  if (ariaLabelledBy) {
+    const labelledByText = ariaLabelledBy.split(/\s+/).map(id => {
+      var _document$getElementB, _document$getElementB2;
+      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.trim();
+    }).filter(Boolean).join(" ");
+    if (labelledByText) {
+      return labelledByText;
+    }
+  }
+  if (element.id) {
+    const label = Array.from(document.querySelectorAll("label")).find(candidate => candidate.htmlFor === element.id || candidate.getAttribute("for") === element.id);
+    if (label !== null && label !== void 0 && label.textContent) {
+      return label.textContent.trim();
+    }
+  }
+  const parentLabel = element.closest("label");
+  if (parentLabel !== null && parentLabel !== void 0 && parentLabel.textContent) {
+    return parentLabel.textContent.trim();
+  }
+  return ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) ?? "";
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const PreChatSurveyPaneStateful = props => {
@@ -42,6 +70,8 @@ const PreChatSurveyPaneStateful = props => {
     surveyProps,
     initStartChat
   } = props;
+  const [preChatFocusAnnouncement, setPreChatFocusAnnouncement] = (0, _react.useState)("");
+  const liveRegionUpdateTimeout = (0, _react.useRef)();
   const generalStyleProps = Object.assign({}, _defaultGeneralPreChatSurveyPaneStyleProps.defaultGeneralPreChatSurveyPaneStyleProps, surveyProps === null || surveyProps === void 0 ? void 0 : (_surveyProps$stylePro = surveyProps.styleProps) === null || _surveyProps$stylePro === void 0 ? void 0 : _surveyProps$stylePro.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
   });
@@ -128,6 +158,16 @@ const PreChatSurveyPaneStateful = props => {
     ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.styleProps),
     generalStyleProps: generalStyleProps
   };
+  const announceFocusedElement = event => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+    const announcement = getFocusedElementAnnouncement(event.target);
+    setPreChatFocusAnnouncement("");
+    liveRegionUpdateTimeout.current = window.setTimeout(() => {
+      setPreChatFocusAnnouncement(announcement);
+    }, 0);
+  };
   (0, _react.useEffect)(() => {
     // Set Aria-Label Attribute for Inputs
     const adaptiveCardElements = document.getElementsByClassName(_Constants.HtmlAttributeNames.adaptiveCardClassName);
@@ -175,10 +215,32 @@ const PreChatSurveyPaneStateful = props => {
       }
     }
   }, [state.appStates.isMinimized]);
-  return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.PreChatSurveyPane, {
+  (0, _react.useEffect)(() => () => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onFocusCapture: announceFocusedElement
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    style: {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      margin: "-1px",
+      padding: 0,
+      border: 0,
+      clip: "rect(0, 0, 0, 0)",
+      overflow: "hidden",
+      whiteSpace: "nowrap"
+    }
+  }, preChatFocusAnnouncement), /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.PreChatSurveyPane, {
     controlProps: controlProps,
     styleProps: styleProps
-  });
+  }));
 };
 exports.PreChatSurveyPaneStateful = PreChatSurveyPaneStateful;
 var _default = PreChatSurveyPaneStateful;

package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js

@@ -232,6 +232,48 @@ const WebChatContainerStateful = props => {
         chatHistoryElement.setAttribute(_Constants.HtmlAttributeNames.ariaLabel, webChatContainerProps.webChatHistoryMobileAccessibilityLabel);
       }
     }
+
+    // internal tracking: WebChats BasicToaster renders a `role="log"` container
+    // with no accessible name. When the toaster is empty (typical idle
+    // state) screen readers traversing the page announce it as "blank".
+    // Inject an aria-label so the region has a meaningful name; the
+    // consumer can override via the new
+    // `webChatNotificationRegionAccessibilityLabel` prop. The toaster
+    // may not be rendered yet when this effect first runs, so observe
+    // for it via a MutationObserver scoped to the widget root (or, if
+    // not yet mounted, the widget container's parent) so we never fire
+    // on host-page mutations outside the widget subtree.
+    const toasterLabel = (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.webChatNotificationRegionAccessibilityLabel) ?? _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatNotificationRegionAccessibilityLabel ?? "Chat notifications";
+    const labelToaster = root => {
+      const toaster = root.querySelector(".webchat__toaster[role='log']");
+      if (toaster && !toaster.getAttribute(_Constants.HtmlAttributeNames.ariaLabel)) {
+        toaster.setAttribute(_Constants.HtmlAttributeNames.ariaLabel, toasterLabel);
+        return true;
+      }
+      return false;
+    };
+    // Prefer the widget root; if it is not yet in the DOM, fall back to
+    // `document` for the *initial* lookup only, then observe the most
+    // specific available scope (widget root if present, otherwise the
+    // widget's parent / document.body as a last resort). The observer
+    // re-resolves the widget root on every callback so we tighten scope
+    // as soon as it mounts.
+    let toasterObserver;
+    const resolveScope = () => document.getElementById("ms_lcw_webchat_root") ?? document.body;
+    if (!labelToaster(resolveScope())) {
+      toasterObserver = new MutationObserver(() => {
+        const scope = resolveScope();
+        if (labelToaster(scope)) {
+          var _toasterObserver;
+          (_toasterObserver = toasterObserver) === null || _toasterObserver === void 0 ? void 0 : _toasterObserver.disconnect();
+          toasterObserver = undefined;
+        }
+      });
+      toasterObserver.observe(resolveScope(), {
+        childList: true,
+        subtree: true
+      });
+    }
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_RENDERING_MIDDLEWARE_PROPS,
       payload: webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.renderingMiddlewareProps
@@ -256,6 +298,10 @@ const WebChatContainerStateful = props => {
         }
       }
     }
+    return () => {
+      var _toasterObserver2;
+      (_toasterObserver2 = toasterObserver) === null || _toasterObserver2 === void 0 ? void 0 : _toasterObserver2.disconnect();
+    };
   }, []);
   (0, _react2.useEffect)(() => {
     var _props$webChatContain6, _props$webChatContain7;
@@ -496,23 +542,7 @@ const WebChatContainerStateful = props => {
       height: "100%",
       width: "100%"
     }
-  }, shouldLoadPersistentHistoryMessages && /*#__PURE__*/_react2.default.createElement(_WebChatEventSubscribers.default, null), /*#__PURE__*/_react2.default.createElement(BasicWebChat, null))), /*#__PURE__*/_react2.default.createElement("div", {
-    id: _Constants.HtmlIdNames.fileSentAnnouncementRegionId,
-    role: "alert",
-    "aria-live": "assertive",
-    "aria-atomic": "true",
-    style: {
-      position: "absolute",
-      width: "1px",
-      height: "1px",
-      padding: "0",
-      margin: "-1px",
-      overflow: "hidden",
-      clip: "rect(0, 0, 0, 0)",
-      whiteSpace: "nowrap",
-      border: "0"
-    }
-  }), citationPaneOpen && /*#__PURE__*/_react2.default.createElement(_CitationPaneStateful.default, {
+  }, shouldLoadPersistentHistoryMessages && /*#__PURE__*/_react2.default.createElement(_WebChatEventSubscribers.default, null), /*#__PURE__*/_react2.default.createElement(BasicWebChat, null))), citationPaneOpen && /*#__PURE__*/_react2.default.createElement(_CitationPaneStateful.default, {
     id: ((_props$citationPanePr = props.citationPaneProps) === null || _props$citationPanePr === void 0 ? void 0 : _props$citationPanePr.id) || _Constants.HtmlAttributeNames.ocwCitationPaneClassName,
     title: ((_props$citationPanePr2 = props.citationPaneProps) === null || _props$citationPanePr2 === void 0 ? void 0 : _props$citationPanePr2.title) || _Constants.HtmlAttributeNames.ocwCitationPaneTitle,
     contentHtml: citationPaneText,

package/lib/cjs/components/webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps.js

@@ -20,6 +20,7 @@ const defaultWebChatContainerStatefulProps = {
   honorsTargetInHTMLLinks: false,
   hyperlinkTextOverride: false,
   directLine: new _mockadapter.default(),
-  adaptiveCardStyles: _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles
+  adaptiveCardStyles: _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles,
+  webChatNotificationRegionAccessibilityLabel: "Chat notifications"
 };
 exports.defaultWebChatContainerStatefulProps = defaultWebChatContainerStatefulProps;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachments/AdaptiveCardAccessibilityWrapper.js

@@ -32,6 +32,21 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
       const container = containerRef.current;
       if (!container) return;
 
+      // dropdown-double-label: compact Input.ChoiceSet renders as a native
+      // <select> with both aria-labelledby and a sibling visible <label for>.
+      // Only remove aria-labelledby when it points solely at that same visible
+      // label; preserve composite labels that include required/error/context text.
+      const compactSelects = container.querySelectorAll(".ac-input-container select.ac-input.ac-multichoiceInput[aria-labelledby]");
+      compactSelects.forEach(select => {
+        const id = select.id;
+        if (!id) return;
+        const visibleLabel = container.querySelector(`label[for="${CSS.escape(id)}"]:not([aria-hidden='true'])`);
+        const labelledBy = (select.getAttribute("aria-labelledby") || "").trim().split(/\s+/);
+        if (visibleLabel !== null && visibleLabel !== void 0 && visibleLabel.id && labelledBy.length === 1 && labelledBy[0] === visibleLabel.id) {
+          select.removeAttribute("aria-labelledby");
+        }
+      });
+
       // action-button-toggle / login-button-toggle: submit/login action buttons can be
       // rendered with toggle-only ARIA that causes screen readers to announce them as
       // switches instead of plain push buttons. Preserve Action.ToggleVisibility buttons,

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware.js

@@ -18,14 +18,10 @@ var _WebChatActionType = require("../../enums/WebChatActionType");
 
 const MBtoBRatio = 1000000;
 const announceFileSent = message => {
-  // TalkBack on Android WebView reliably announces newly *appended* role="alert"
-  // nodes but often misses text-content updates on existing nodes.
-  // Strategy: clear the static region, wait 500ms for the send-box focus shift
-  // to settle, then inject a fresh alert element and remove it after 3s.
-  const region = document.getElementById(_Constants.HtmlIdNames.fileSentAnnouncementRegionId);
-  if (region) {
-    region.textContent = "";
-  }
+  // TalkBack on Android WebView reliably announces newly *appended*
+  // role="alert" nodes but often misses text-content updates on existing
+  // nodes. Wait 500ms for the send-box focus shift to settle, then inject
+  // a fresh alert element appended to document.body and remove it after 3s.
   setTimeout(() => {
     const el = document.createElement("div");
     el.setAttribute("role", "alert");

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/localizedStringsBotInitialsMiddleware.js

@@ -16,6 +16,32 @@ let currentAgentName = _defaultWebChatStyles.defaultWebChatStyles.botAvatarIniti
 
 // Optional external updater (React context dispatch wrapper) set at runtime
 let externalInitialsUpdater;
+const hasTransferTag = activity => {
+  var _activity$channelData;
+  const tags = [...(Array.isArray(activity === null || activity === void 0 ? void 0 : (_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : _activity$channelData.tags) ? activity.channelData.tags : []), ...(Array.isArray(activity === null || activity === void 0 ? void 0 : activity.tags) ? activity.tags : [])];
+  return tags.some(tag => typeof tag === "string" && tag.toLowerCase().includes("transfer"));
+};
+const isTransferSystemMessage = activity => {
+  const text = ((activity === null || activity === void 0 ? void 0 : activity.text) || "").toString();
+  return hasTransferTag(activity) || /\btransfer(?:red|ring)?\b/i.test(text);
+};
+const resetCachedAgentName = dispatch => {
+  if (currentAgentName !== _defaultWebChatStyles.defaultWebChatStyles.botAvatarInitials || currentAgentInitials !== _defaultWebChatStyles.defaultWebChatStyles.botAvatarInitials) {
+    var _externalInitialsUpda;
+    currentAgentName = _defaultWebChatStyles.defaultWebChatStyles.botAvatarInitials;
+    currentAgentInitials = _defaultWebChatStyles.defaultWebChatStyles.botAvatarInitials;
+    (_externalInitialsUpda = externalInitialsUpdater) === null || _externalInitialsUpda === void 0 ? void 0 : _externalInitialsUpda(currentAgentInitials || "");
+    _omnichannelChatComponents.BroadcastService.postMessage({
+      eventName: "BotAvatarInitialsUpdated",
+      payload: {
+        initials: currentAgentInitials
+      }
+    });
+    dispatch({
+      type: "__BOT_INITIALS_UPDATED__"
+    });
+  }
+};
 const localizedStringsBotInitialsMiddleware = onInitialsChange => _ref => {
   let {
     dispatch
@@ -29,19 +55,31 @@ const localizedStringsBotInitialsMiddleware = onInitialsChange => _ref => {
       var _action$payload, _activity$from;
       const activity = (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : _action$payload.activity;
       if (activity !== null && activity !== void 0 && (_activity$from = activity.from) !== null && _activity$from !== void 0 && _activity$from.name && activity.from.role !== _Constants.Constants.userMessageTag && activity.from.name !== _Constants.Constants.userMessageTag) {
-        var _activity$channelData, _activity$channelData2, _activity$tags;
+        var _activity$channelData2, _activity$channelData3, _activity$tags;
         const agentName = activity.from.name.trim();
-        const isSystemMessage = agentName === "__agent__" || agentName.startsWith("__") || ((_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : (_activity$channelData2 = _activity$channelData.tags) === null || _activity$channelData2 === void 0 ? void 0 : _activity$channelData2.includes(_Constants.Constants.systemMessageTag)) || ((_activity$tags = activity.tags) === null || _activity$tags === void 0 ? void 0 : _activity$tags.includes(_Constants.Constants.systemMessageTag));
-        if (!isSystemMessage && agentName) {
+        const isSystemMessage = agentName === "__agent__" || agentName.startsWith("__") || ((_activity$channelData2 = activity.channelData) === null || _activity$channelData2 === void 0 ? void 0 : (_activity$channelData3 = _activity$channelData2.tags) === null || _activity$channelData3 === void 0 ? void 0 : _activity$channelData3.includes(_Constants.Constants.systemMessageTag)) || ((_activity$tags = activity.tags) === null || _activity$tags === void 0 ? void 0 : _activity$tags.includes(_Constants.Constants.systemMessageTag));
+        if (isSystemMessage) {
+          // transfer-stale-bot-name: when a transfer system message indicates the
+          // conversation has been routed to a different agent, the
+          // previously-cached agent name must NOT linger. Otherwise the
+          // next non-system activity (e.g. typing indicator, welcome
+          // message, or the new agent's first turn before their name
+          // is observed) is announced to screen readers as the OLD
+          // agent. Reset to defaults so the next observed name takes
+          // effect cleanly.
+          if (isTransferSystemMessage(activity)) {
+            resetCachedAgentName(dispatch);
+          }
+        } else if (agentName) {
           const newInitials = (0, _utils.getIconText)(agentName) || currentAgentInitials;
           const hasInitialsChanged = newInitials !== currentAgentInitials;
           const hasNameChanged = agentName !== currentAgentName;
           currentAgentName = agentName;
           if (hasInitialsChanged) {
-            var _externalInitialsUpda;
+            var _externalInitialsUpda2;
             currentAgentInitials = newInitials;
             // Notify external React context if provided
-            (_externalInitialsUpda = externalInitialsUpdater) === null || _externalInitialsUpda === void 0 ? void 0 : _externalInitialsUpda(currentAgentInitials || "");
+            (_externalInitialsUpda2 = externalInitialsUpdater) === null || _externalInitialsUpda2 === void 0 ? void 0 : _externalInitialsUpda2(currentAgentInitials || "");
             // Broadcast (optional) for multi-tab sync without forcing consumers
             _omnichannelChatComponents.BroadcastService.postMessage({
               eventName: "BotAvatarInitialsUpdated",

package/lib/esm/common/Constants.js

@@ -149,7 +149,6 @@ export let HtmlIdNames = /*#__PURE__*/_createClass(function HtmlIdNames() {
   _classCallCheck(this, HtmlIdNames);
 });
 _defineProperty(HtmlIdNames, "MSLiveChatWidget", "MSLiveChatWidget");
-_defineProperty(HtmlIdNames, "fileSentAnnouncementRegionId", "ms_lcw_file_sent_announcement");
 export let HtmlClassNames = /*#__PURE__*/_createClass(function HtmlClassNames() {
   _classCallCheck(this, HtmlClassNames);
 });

package/lib/esm/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.js

@@ -58,6 +58,7 @@ export const PostChatSurveyPaneStateful = props => {
   };
   const controlProps = {
     id: "oc-lcw-postchatsurvey-pane",
+    title: "Post-chat survey",
     surveyURL: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.surveyURL) ?? surveyInviteLink,
     ...props.controlProps
   };

package/lib/esm/components/prechatsurveypanestateful/PreChatSurveyPaneStateful.js

@@ -1,6 +1,6 @@
 import { HtmlAttributeNames, Regex } from "../../common/Constants";
 import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createTimer, extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, getWidgetCacheId, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
@@ -11,6 +11,34 @@ import { defaultGeneralPreChatSurveyPaneStyleProps } from "./common/defaultStyle
 import { defaultPreChatSurveyLocalizedTexts } from "./common/defaultProps/defaultPreChatSurveyLocalizedTexts";
 import useChatContextStore from "../../hooks/useChatContextStore";
 let uiTimer;
+const getFocusedElementAnnouncement = element => {
+  var _element$textContent;
+  const ariaLabel = element.getAttribute(HtmlAttributeNames.ariaLabel);
+  if (ariaLabel) {
+    return ariaLabel.trim();
+  }
+  const ariaLabelledBy = element.getAttribute(HtmlAttributeNames.ariaLabelledby);
+  if (ariaLabelledBy) {
+    const labelledByText = ariaLabelledBy.split(/\s+/).map(id => {
+      var _document$getElementB, _document$getElementB2;
+      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.trim();
+    }).filter(Boolean).join(" ");
+    if (labelledByText) {
+      return labelledByText;
+    }
+  }
+  if (element.id) {
+    const label = Array.from(document.querySelectorAll("label")).find(candidate => candidate.htmlFor === element.id || candidate.getAttribute("for") === element.id);
+    if (label !== null && label !== void 0 && label.textContent) {
+      return label.textContent.trim();
+    }
+  }
+  const parentLabel = element.closest("label");
+  if (parentLabel !== null && parentLabel !== void 0 && parentLabel.textContent) {
+    return parentLabel.textContent.trim();
+  }
+  return ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) ?? "";
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PreChatSurveyPaneStateful = props => {
@@ -33,6 +61,8 @@ export const PreChatSurveyPaneStateful = props => {
     surveyProps,
     initStartChat
   } = props;
+  const [preChatFocusAnnouncement, setPreChatFocusAnnouncement] = useState("");
+  const liveRegionUpdateTimeout = useRef();
   const generalStyleProps = Object.assign({}, defaultGeneralPreChatSurveyPaneStyleProps, surveyProps === null || surveyProps === void 0 ? void 0 : (_surveyProps$stylePro = surveyProps.styleProps) === null || _surveyProps$stylePro === void 0 ? void 0 : _surveyProps$stylePro.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
   });
@@ -119,6 +149,16 @@ export const PreChatSurveyPaneStateful = props => {
     ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.styleProps),
     generalStyleProps: generalStyleProps
   };
+  const announceFocusedElement = event => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+    const announcement = getFocusedElementAnnouncement(event.target);
+    setPreChatFocusAnnouncement("");
+    liveRegionUpdateTimeout.current = window.setTimeout(() => {
+      setPreChatFocusAnnouncement(announcement);
+    }, 0);
+  };
   useEffect(() => {
     // Set Aria-Label Attribute for Inputs
     const adaptiveCardElements = document.getElementsByClassName(HtmlAttributeNames.adaptiveCardClassName);
@@ -166,9 +206,31 @@ export const PreChatSurveyPaneStateful = props => {
       }
     }
   }, [state.appStates.isMinimized]);
-  return /*#__PURE__*/React.createElement(PreChatSurveyPane, {
+  useEffect(() => () => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    onFocusCapture: announceFocusedElement
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    style: {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      margin: "-1px",
+      padding: 0,
+      border: 0,
+      clip: "rect(0, 0, 0, 0)",
+      overflow: "hidden",
+      whiteSpace: "nowrap"
+    }
+  }, preChatFocusAnnouncement), /*#__PURE__*/React.createElement(PreChatSurveyPane, {
     controlProps: controlProps,
     styleProps: styleProps
-  });
+  }));
 };
 export default PreChatSurveyPaneStateful;

package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js

@@ -1,4 +1,4 @@
-import { Constants, HtmlAttributeNames, HtmlClassNames, HtmlIdNames } from "../../common/Constants";
+import { Constants, HtmlAttributeNames, HtmlClassNames } from "../../common/Constants";
 import { Stack } from "@fluentui/react";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useRef, useState } from "react";
@@ -223,6 +223,48 @@ export const WebChatContainerStateful = props => {
         chatHistoryElement.setAttribute(HtmlAttributeNames.ariaLabel, webChatContainerProps.webChatHistoryMobileAccessibilityLabel);
       }
     }
+
+    // internal tracking: WebChats BasicToaster renders a `role="log"` container
+    // with no accessible name. When the toaster is empty (typical idle
+    // state) screen readers traversing the page announce it as "blank".
+    // Inject an aria-label so the region has a meaningful name; the
+    // consumer can override via the new
+    // `webChatNotificationRegionAccessibilityLabel` prop. The toaster
+    // may not be rendered yet when this effect first runs, so observe
+    // for it via a MutationObserver scoped to the widget root (or, if
+    // not yet mounted, the widget container's parent) so we never fire
+    // on host-page mutations outside the widget subtree.
+    const toasterLabel = (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.webChatNotificationRegionAccessibilityLabel) ?? defaultWebChatContainerStatefulProps.webChatNotificationRegionAccessibilityLabel ?? "Chat notifications";
+    const labelToaster = root => {
+      const toaster = root.querySelector(".webchat__toaster[role='log']");
+      if (toaster && !toaster.getAttribute(HtmlAttributeNames.ariaLabel)) {
+        toaster.setAttribute(HtmlAttributeNames.ariaLabel, toasterLabel);
+        return true;
+      }
+      return false;
+    };
+    // Prefer the widget root; if it is not yet in the DOM, fall back to
+    // `document` for the *initial* lookup only, then observe the most
+    // specific available scope (widget root if present, otherwise the
+    // widget's parent / document.body as a last resort). The observer
+    // re-resolves the widget root on every callback so we tighten scope
+    // as soon as it mounts.
+    let toasterObserver;
+    const resolveScope = () => document.getElementById("ms_lcw_webchat_root") ?? document.body;
+    if (!labelToaster(resolveScope())) {
+      toasterObserver = new MutationObserver(() => {
+        const scope = resolveScope();
+        if (labelToaster(scope)) {
+          var _toasterObserver;
+          (_toasterObserver = toasterObserver) === null || _toasterObserver === void 0 ? void 0 : _toasterObserver.disconnect();
+          toasterObserver = undefined;
+        }
+      });
+      toasterObserver.observe(resolveScope(), {
+        childList: true,
+        subtree: true
+      });
+    }
     dispatch({
       type: LiveChatWidgetActionType.SET_RENDERING_MIDDLEWARE_PROPS,
       payload: webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.renderingMiddlewareProps
@@ -247,6 +289,10 @@ export const WebChatContainerStateful = props => {
         }
       }
     }
+    return () => {
+      var _toasterObserver2;
+      (_toasterObserver2 = toasterObserver) === null || _toasterObserver2 === void 0 ? void 0 : _toasterObserver2.disconnect();
+    };
   }, []);
   useEffect(() => {
     var _props$webChatContain6, _props$webChatContain7;
@@ -487,23 +533,7 @@ export const WebChatContainerStateful = props => {
       height: "100%",
       width: "100%"
     }
-  }, shouldLoadPersistentHistoryMessages && /*#__PURE__*/React.createElement(WebChatEventSubscribers, null), /*#__PURE__*/React.createElement(BasicWebChat, null))), /*#__PURE__*/React.createElement("div", {
-    id: HtmlIdNames.fileSentAnnouncementRegionId,
-    role: "alert",
-    "aria-live": "assertive",
-    "aria-atomic": "true",
-    style: {
-      position: "absolute",
-      width: "1px",
-      height: "1px",
-      padding: "0",
-      margin: "-1px",
-      overflow: "hidden",
-      clip: "rect(0, 0, 0, 0)",
-      whiteSpace: "nowrap",
-      border: "0"
-    }
-  }), citationPaneOpen && /*#__PURE__*/React.createElement(CitationPaneStateful, {
+  }, shouldLoadPersistentHistoryMessages && /*#__PURE__*/React.createElement(WebChatEventSubscribers, null), /*#__PURE__*/React.createElement(BasicWebChat, null))), citationPaneOpen && /*#__PURE__*/React.createElement(CitationPaneStateful, {
     id: ((_props$citationPanePr = props.citationPaneProps) === null || _props$citationPanePr === void 0 ? void 0 : _props$citationPanePr.id) || HtmlAttributeNames.ocwCitationPaneClassName,
     title: ((_props$citationPanePr2 = props.citationPaneProps) === null || _props$citationPanePr2 === void 0 ? void 0 : _props$citationPanePr2.title) || HtmlAttributeNames.ocwCitationPaneTitle,
     contentHtml: citationPaneText,

package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps.js

@@ -13,5 +13,6 @@ export const defaultWebChatContainerStatefulProps = {
   honorsTargetInHTMLLinks: false,
   hyperlinkTextOverride: false,
   directLine: new MockAdapter(),
-  adaptiveCardStyles: defaultAdaptiveCardStyles
+  adaptiveCardStyles: defaultAdaptiveCardStyles,
+  webChatNotificationRegionAccessibilityLabel: "Chat notifications"
 };

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachments/AdaptiveCardAccessibilityWrapper.js

@@ -25,6 +25,21 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
       const container = containerRef.current;
       if (!container) return;
 
+      // dropdown-double-label: compact Input.ChoiceSet renders as a native
+      // <select> with both aria-labelledby and a sibling visible <label for>.
+      // Only remove aria-labelledby when it points solely at that same visible
+      // label; preserve composite labels that include required/error/context text.
+      const compactSelects = container.querySelectorAll(".ac-input-container select.ac-input.ac-multichoiceInput[aria-labelledby]");
+      compactSelects.forEach(select => {
+        const id = select.id;
+        if (!id) return;
+        const visibleLabel = container.querySelector(`label[for="${CSS.escape(id)}"]:not([aria-hidden='true'])`);
+        const labelledBy = (select.getAttribute("aria-labelledby") || "").trim().split(/\s+/);
+        if (visibleLabel !== null && visibleLabel !== void 0 && visibleLabel.id && labelledBy.length === 1 && labelledBy[0] === visibleLabel.id) {
+          select.removeAttribute("aria-labelledby");
+        }
+      });
+
       // action-button-toggle / login-button-toggle: submit/login action buttons can be
       // rendered with toggle-only ARIA that causes screen readers to announce them as
       // switches instead of plain push buttons. Preserve Action.ToggleVisibility buttons,

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware.js

@@ -5,21 +5,17 @@
  ******/
 
 import { LogLevel, TelemetryEvent } from "../../../../../common/telemetry/TelemetryConstants";
-import { AMSConstants, HtmlIdNames } from "../../../../../common/Constants";
+import { AMSConstants } from "../../../../../common/Constants";
 import { NotificationHandler } from "../../notification/NotificationHandler";
 import { NotificationScenarios } from "../../enums/NotificationScenarios";
 import { TelemetryHelper } from "../../../../../common/telemetry/TelemetryHelper";
 import { WebChatActionType } from "../../enums/WebChatActionType";
 const MBtoBRatio = 1000000;
 const announceFileSent = message => {
-  // TalkBack on Android WebView reliably announces newly *appended* role="alert"
-  // nodes but often misses text-content updates on existing nodes.
-  // Strategy: clear the static region, wait 500ms for the send-box focus shift
-  // to settle, then inject a fresh alert element and remove it after 3s.
-  const region = document.getElementById(HtmlIdNames.fileSentAnnouncementRegionId);
-  if (region) {
-    region.textContent = "";
-  }
+  // TalkBack on Android WebView reliably announces newly *appended*
+  // role="alert" nodes but often misses text-content updates on existing
+  // nodes. Wait 500ms for the send-box focus shift to settle, then inject
+  // a fresh alert element appended to document.body and remove it after 3s.
   setTimeout(() => {
     const el = document.createElement("div");
     el.setAttribute("role", "alert");

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/localizedStringsBotInitialsMiddleware.js

@@ -10,6 +10,32 @@ let currentAgentName = defaultWebChatStyles.botAvatarInitials;
 
 // Optional external updater (React context dispatch wrapper) set at runtime
 let externalInitialsUpdater;
+const hasTransferTag = activity => {
+  var _activity$channelData;
+  const tags = [...(Array.isArray(activity === null || activity === void 0 ? void 0 : (_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : _activity$channelData.tags) ? activity.channelData.tags : []), ...(Array.isArray(activity === null || activity === void 0 ? void 0 : activity.tags) ? activity.tags : [])];
+  return tags.some(tag => typeof tag === "string" && tag.toLowerCase().includes("transfer"));
+};
+const isTransferSystemMessage = activity => {
+  const text = ((activity === null || activity === void 0 ? void 0 : activity.text) || "").toString();
+  return hasTransferTag(activity) || /\btransfer(?:red|ring)?\b/i.test(text);
+};
+const resetCachedAgentName = dispatch => {
+  if (currentAgentName !== defaultWebChatStyles.botAvatarInitials || currentAgentInitials !== defaultWebChatStyles.botAvatarInitials) {
+    var _externalInitialsUpda;
+    currentAgentName = defaultWebChatStyles.botAvatarInitials;
+    currentAgentInitials = defaultWebChatStyles.botAvatarInitials;
+    (_externalInitialsUpda = externalInitialsUpdater) === null || _externalInitialsUpda === void 0 ? void 0 : _externalInitialsUpda(currentAgentInitials || "");
+    BroadcastService.postMessage({
+      eventName: "BotAvatarInitialsUpdated",
+      payload: {
+        initials: currentAgentInitials
+      }
+    });
+    dispatch({
+      type: "__BOT_INITIALS_UPDATED__"
+    });
+  }
+};
 export const localizedStringsBotInitialsMiddleware = onInitialsChange => _ref => {
   let {
     dispatch
@@ -23,19 +49,31 @@ export const localizedStringsBotInitialsMiddleware = onInitialsChange => _ref =>
       var _action$payload, _activity$from;
       const activity = (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : _action$payload.activity;
       if (activity !== null && activity !== void 0 && (_activity$from = activity.from) !== null && _activity$from !== void 0 && _activity$from.name && activity.from.role !== Constants.userMessageTag && activity.from.name !== Constants.userMessageTag) {
-        var _activity$channelData, _activity$channelData2, _activity$tags;
+        var _activity$channelData2, _activity$channelData3, _activity$tags;
         const agentName = activity.from.name.trim();
-        const isSystemMessage = agentName === "__agent__" || agentName.startsWith("__") || ((_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : (_activity$channelData2 = _activity$channelData.tags) === null || _activity$channelData2 === void 0 ? void 0 : _activity$channelData2.includes(Constants.systemMessageTag)) || ((_activity$tags = activity.tags) === null || _activity$tags === void 0 ? void 0 : _activity$tags.includes(Constants.systemMessageTag));
-        if (!isSystemMessage && agentName) {
+        const isSystemMessage = agentName === "__agent__" || agentName.startsWith("__") || ((_activity$channelData2 = activity.channelData) === null || _activity$channelData2 === void 0 ? void 0 : (_activity$channelData3 = _activity$channelData2.tags) === null || _activity$channelData3 === void 0 ? void 0 : _activity$channelData3.includes(Constants.systemMessageTag)) || ((_activity$tags = activity.tags) === null || _activity$tags === void 0 ? void 0 : _activity$tags.includes(Constants.systemMessageTag));
+        if (isSystemMessage) {
+          // transfer-stale-bot-name: when a transfer system message indicates the
+          // conversation has been routed to a different agent, the
+          // previously-cached agent name must NOT linger. Otherwise the
+          // next non-system activity (e.g. typing indicator, welcome
+          // message, or the new agent's first turn before their name
+          // is observed) is announced to screen readers as the OLD
+          // agent. Reset to defaults so the next observed name takes
+          // effect cleanly.
+          if (isTransferSystemMessage(activity)) {
+            resetCachedAgentName(dispatch);
+          }
+        } else if (agentName) {
           const newInitials = getIconText(agentName) || currentAgentInitials;
           const hasInitialsChanged = newInitials !== currentAgentInitials;
           const hasNameChanged = agentName !== currentAgentName;
           currentAgentName = agentName;
           if (hasInitialsChanged) {
-            var _externalInitialsUpda;
+            var _externalInitialsUpda2;
             currentAgentInitials = newInitials;
             // Notify external React context if provided
-            (_externalInitialsUpda = externalInitialsUpdater) === null || _externalInitialsUpda === void 0 ? void 0 : _externalInitialsUpda(currentAgentInitials || "");
+            (_externalInitialsUpda2 = externalInitialsUpdater) === null || _externalInitialsUpda2 === void 0 ? void 0 : _externalInitialsUpda2(currentAgentInitials || "");
             // Broadcast (optional) for multi-tab sync without forcing consumers
             BroadcastService.postMessage({
               eventName: "BotAvatarInitialsUpdated",

package/lib/types/common/Constants.d.ts

@@ -119,7 +119,6 @@ export declare const Regex: {
 };
 export declare class HtmlIdNames {
     static readonly MSLiveChatWidget = "MSLiveChatWidget";
-    static readonly fileSentAnnouncementRegionId = "ms_lcw_file_sent_announcement";
 }
 export declare class HtmlClassNames {
     static readonly webChatBannerCloseButton = "webchat__toast__dismissButton";

package/lib/types/components/webchatcontainerstateful/interfaces/IWebChatContainerStatefulProps.d.ts

@@ -25,4 +25,11 @@ export interface IWebChatContainerStatefulProps {
     adaptiveCardStyles?: IAdaptiveCardStyles;
     sendBoxTextBox?: ISendBox;
     webChatHistoryMobileAccessibilityLabel?: string;
+    /**
+     * Accessible name applied to WebChats notification toaster region
+     * (`role="log"`). When omitted, defaults to "Chat notifications" so
+     * screen readers don't announce the empty live region as "blank"
+     * (internal tracking).
+     */
+    webChatNotificationRegionAccessibilityLabel?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-widget",
-  "version": "1.8.4-main.6b93408",
+  "version": "1.8.4-main.810d050",
   "description": "Microsoft Omnichannel Chat Widget",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",
@@ -84,7 +84,7 @@
     "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "storybook-addon-playwright": "^4.9.2",
-    "swiper": "^9.0.5",
+    "swiper": "^12.1.2",
     "terser-webpack-plugin": "^4.2.3",
     "thread-loader": "^2.1.3",
     "ts-loader": "^9.2.6",
@@ -95,7 +95,7 @@
   "dependencies": {
     "@azure/core-tracing": "^1.2.0",
     "@microsoft/applicationinsights-web": "^3.3.6",
-    "@microsoft/omnichannel-chat-components": "1.1.17-main.d4c4cb2",
+    "@microsoft/omnichannel-chat-components": "1.1.17-main.f21df63",
     "@microsoft/omnichannel-chat-sdk": "1.11.9-main.da8219b",
     "@opentelemetry/api": "^1.9.0",
     "abort-controller": "^3",
@@ -172,7 +172,7 @@
     "**/lodash": "4.17.23",
     "**/@babel/runtime-corejs3": "^7.29.0",
     "**/brace-expansion": "2.0.3",
-    "**/swiper": "9.4.1"
+    "**/swiper": "12.1.2"
   },
   "jest": {
     "verbose": true,