@microsoft/omnichannel-chat-widget 1.8.4-main.882d8f1 → 1.8.4-main.9284e84

package/lib/cjs/common/telemetry/TelemetryConstants.js

@@ -202,6 +202,7 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["QueueOverflowEvent"] = "QueueOverflowEvent";
   TelemetryEvent["ProcessingHTMLTextMiddlewareFailed"] = "ProcessingHTMLTextMiddlewareFailed";
   TelemetryEvent["ProcessingSanitizationMiddlewareFailed"] = "ProcessingSanitizationMiddlewareFailed";
+  TelemetryEvent["HTMLSanitized"] = "HTMLSanitized";
   TelemetryEvent["FormatTagsMiddlewareJSONStringifyFailed"] = "FormatTagsMiddlewareJSONStringifyFailed";
   TelemetryEvent["AttachmentUploadValidatorMiddlewareFailed"] = "AttachmentUploadValidatorMiddlewareFailed";
   TelemetryEvent["CitationMiddlewareFailed"] = "CitationMiddlewareFailed";

package/lib/cjs/common/utils.js

@@ -9,7 +9,7 @@ exports.getWidgetEndChatEventName = exports.getWidgetCacheIdfromProps = exports.
 exports.isEndConversationDueToOverflowActivity = isEndConversationDueToOverflowActivity;
 exports.parseAdaptiveCardPayload = exports.newGuid = exports.isValidCustomEvent = exports.isUndefinedOrEmpty = exports.isThisSessionPopout = exports.isNullOrUndefined = exports.isNullOrEmptyString = void 0;
 exports.parseBooleanFromConfig = parseBooleanFromConfig;
-exports.setTabIndices = exports.setOcUserAgent = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseLowerCaseString = void 0;
+exports.setTabIndices = exports.setOcUserAgent = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.setAriaHiddenForSiblings = exports.preventFocusToMoveOutOfElement = exports.parseLowerCaseString = void 0;
 var _Constants = require("./Constants");
 var _TelemetryConstants = require("./telemetry/TelemetryConstants");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
@@ -85,28 +85,69 @@ exports.findAllFocusableElement = findAllFocusableElement;
 const preventFocusToMoveOutOfElement = elementId => {
   const container = document.getElementById(elementId);
   if (!container) {
-    return;
+    return () => {/* no-op */};
   }
   const focusableElements = findAllFocusableElement(container);
   if (!focusableElements) {
-    return;
+    return () => {/* no-op */};
   }
   const firstFocusableElement = focusableElements[0];
   const lastFocusableElement = focusableElements[focusableElements.length - 1];
-  firstFocusableElement.onkeydown = e => {
-    if (e.shiftKey && e.key === _KeyCodes.KeyCodes.TAB) {
-      e.preventDefault();
-      lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
-    }
-  };
-  lastFocusableElement.onkeydown = e => {
-    if (!e.shiftKey && e.key === _KeyCodes.KeyCodes.TAB) {
-      e.preventDefault();
-      firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
-    }
-  };
+  const cleanups = [];
+  if (firstFocusableElement === lastFocusableElement) {
+    const handler = e => {
+      if (e.key === _KeyCodes.KeyCodes.TAB && !e.shiftKey) {
+        e.preventDefault();
+        firstFocusableElement.focus();
+      } else if (e.key === _KeyCodes.KeyCodes.TAB && e.shiftKey) {
+        e.preventDefault();
+        firstFocusableElement.focus();
+      }
+    };
+    firstFocusableElement.addEventListener("keydown", handler);
+    cleanups.push(() => firstFocusableElement.removeEventListener("keydown", handler));
+  } else {
+    const firstHandler = e => {
+      if (e.shiftKey && e.key === _KeyCodes.KeyCodes.TAB) {
+        e.preventDefault();
+        lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
+      }
+    };
+    firstFocusableElement.addEventListener("keydown", firstHandler);
+    cleanups.push(() => firstFocusableElement.removeEventListener("keydown", firstHandler));
+    const lastHandler = e => {
+      if (!e.shiftKey && e.key === _KeyCodes.KeyCodes.TAB) {
+        e.preventDefault();
+        firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
+      }
+    };
+    lastFocusableElement.addEventListener("keydown", lastHandler);
+    cleanups.push(() => lastFocusableElement.removeEventListener("keydown", lastHandler));
+  }
+  return () => cleanups.forEach(fn => fn());
 };
 exports.preventFocusToMoveOutOfElement = preventFocusToMoveOutOfElement;
+const setAriaHiddenForSiblings = (elementId, shouldHide, stateMap) => {
+  const element = document.getElementById(elementId);
+  if (!(element !== null && element !== void 0 && element.parentElement)) return;
+  Array.from(element.parentElement.children).forEach(sibling => {
+    if (sibling !== element) {
+      if (shouldHide) {
+        stateMap.set(sibling, sibling.getAttribute("aria-hidden"));
+        sibling.setAttribute("aria-hidden", "true");
+      } else if (stateMap.has(sibling)) {
+        const original = stateMap.get(sibling);
+        if (original === null) {
+          sibling.removeAttribute("aria-hidden");
+        } else {
+          sibling.setAttribute("aria-hidden", original);
+        }
+        stateMap.delete(sibling);
+      }
+    }
+  });
+};
+exports.setAriaHiddenForSiblings = setAriaHiddenForSiblings;
 const setFocusOnSendBox = () => {
   const sendBoxSelector = "textarea[data-id=\"webchat-sendbox-input\"]";
   setFocusOnElement(sendBoxSelector);

package/lib/cjs/components/citationpanestateful/CitationPaneStateful.js

@@ -44,7 +44,7 @@ const CitationPaneStateful = props => {
 
   // Initial focus pattern (mirrors ConfirmationPaneStateful): focus first focusable element (will re-attempt after visibility becomes true)
   (0, _react.useEffect)(() => {
-    (0, _utils.preventFocusToMoveOutOfElement)(controlId);
+    const cleanup = (0, _utils.preventFocusToMoveOutOfElement)(controlId);
     const focusableElements = (0, _utils.findAllFocusableElement)(`#${controlId}`);
     requestAnimationFrame(() => {
       if (focusableElements && focusableElements.length > 0 && focusableElements[0]) {
@@ -62,6 +62,7 @@ const CitationPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.UXCitationPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return cleanup;
   }, []);
 
   // Retry focus once pane is actually visible (isReady) in case initial attempt occurred while wrapper was visibility:hidden

package/lib/cjs/components/confirmationpanestateful/ConfirmationPaneStateful.js

@@ -82,7 +82,7 @@ const ConfirmationPaneStateful = props => {
 
   // Move focus to the first button
   (0, _react.useEffect)(() => {
-    (0, _utils.preventFocusToMoveOutOfElement)(controlProps.id);
+    const cleanup = (0, _utils.preventFocusToMoveOutOfElement)(controlProps.id);
     const focusableElements = (0, _utils.findAllFocusableElement)(`#${controlProps.id}`);
     requestAnimationFrame(() => {
       if (focusableElements && focusableElements.length > 0 && focusableElements[0]) {
@@ -100,6 +100,7 @@ const ConfirmationPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.UXConfirmationPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return cleanup;
   }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"

package/lib/cjs/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.js

@@ -103,7 +103,7 @@ const EmailTranscriptPaneStateful = props => {
 
   // Move focus to the first button
   (0, _react.useEffect)(() => {
-    (0, _utils.preventFocusToMoveOutOfElement)(controlProps.id);
+    const cleanup = (0, _utils.preventFocusToMoveOutOfElement)(controlProps.id);
     const focusableElements = (0, _utils.findAllFocusableElement)(`#${controlProps.id}`);
     if (focusableElements) {
       focusableElements[0].focus();
@@ -118,6 +118,7 @@ const EmailTranscriptPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.UXEmailTranscriptPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return cleanup;
   }, [initialEmail]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"

package/lib/cjs/components/livechatwidget/common/endChat.js

@@ -346,6 +346,10 @@ const closeChatStateCleanUp = dispatch => {
     type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CITATIONS,
     payload: {}
   });
+  dispatch({
+    type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
+    payload: false
+  });
 
   // Dismiss the chat disconnect notification banner if it was shown
   _NotificationHandler.NotificationHandler.dismissNotification(_NotificationScenarios.NotificationScenarios.ChatDisconnect);

package/lib/cjs/components/livechatwidget/common/initWebChatComposer.js

@@ -16,6 +16,7 @@ var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidget
 var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 var _WebChatStoreLoader = require("../../webchatcontainerstateful/webchatcontroller/WebChatStoreLoader");
 var _attachmentProcessingMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentProcessingMiddleware"));
+var _attachmentSentAnnouncementMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentSentAnnouncementMiddleware"));
 var _channelDataMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/channelDataMiddleware"));
 var _activityMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware");
 var _activityStatusMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware");
@@ -125,7 +126,7 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
     };
     webChatStore = (0, _botframeworkWebchat.createStore)({},
     //initial state
-    _preProcessingMiddleware.default, _attachmentProcessingMiddleware.default, (0, _attachmentUploadValidatorMiddleware.default)((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), (0, _customEventMiddleware.default)(_omnichannelChatComponents.BroadcastService), (0, _queueOverflowHandlerMiddleware.createQueueOverflowMiddleware)(state, dispatch), (0, _channelDataMiddleware.default)(addConversationalSurveyTagsCallback), (0, _conversationEndMiddleware.default)(conversationEndCallback, startConversationalSurveyCallback, endConversationalSurveyCallback), (0, _dataMaskingMiddleware.default)((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), _messageTimestampMiddleware.createMessageTimeStampMiddleware, _messageSequenceIdOverrideMiddleware.createMessageSequenceIdOverrideMiddleware, (0, _citationsMiddleware.createCitationsMiddleware)(state, dispatch), _gifUploadMiddleware.default, _htmlPlayerMiddleware.default, (0, _htmlTextMiddleware.default)(honorsTargetInHTMLLinks), (0, _maxMessageSizeValidator.default)(localizedTexts), _sanitizationMiddleware.default, (0, _callActionMiddleware.default)(),
+    _preProcessingMiddleware.default, _attachmentProcessingMiddleware.default, (0, _attachmentUploadValidatorMiddleware.default)((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), _attachmentSentAnnouncementMiddleware.default, (0, _customEventMiddleware.default)(_omnichannelChatComponents.BroadcastService), (0, _queueOverflowHandlerMiddleware.createQueueOverflowMiddleware)(state, dispatch), (0, _channelDataMiddleware.default)(addConversationalSurveyTagsCallback), (0, _conversationEndMiddleware.default)(conversationEndCallback, startConversationalSurveyCallback, endConversationalSurveyCallback), (0, _dataMaskingMiddleware.default)((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), _messageTimestampMiddleware.createMessageTimeStampMiddleware, _messageSequenceIdOverrideMiddleware.createMessageSequenceIdOverrideMiddleware, (0, _citationsMiddleware.createCitationsMiddleware)(state, dispatch), _gifUploadMiddleware.default, _htmlPlayerMiddleware.default, (0, _htmlTextMiddleware.default)(honorsTargetInHTMLLinks), (0, _maxMessageSizeValidator.default)(localizedTexts), _sanitizationMiddleware.default, (0, _callActionMiddleware.default)(),
     // Pass a callback so middleware can push initials into React context for reactivity
     (0, _localizedStringsBotInitialsMiddleware.localizedStringsBotInitialsMiddleware)(initials => {
       dispatch({
@@ -151,14 +152,194 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
     markdownRenderers.forEach(renderer => {
       text = renderer.render(text);
     });
+
+    // EXISTING sanitization (continues to work as before)
     const config = {
       FORBID_TAGS: ["form", "button", "script", "div", "input"],
       FORBID_ATTR: ["action"],
       ADD_ATTR: ["target"]
     };
     text = _dompurify.default.sanitize(text, config);
+
+    // MONITOR-ONLY: Test what the stricter allowlist would remove (Phase 1)
+    // This does NOT modify the text, only logs telemetry
+    // Run during browser idle time to avoid blocking message flow and adding latency
+    const textToMonitor = text; // Capture current text value
+
+    // Schedule monitoring to run during browser idle time
+    const scheduleMonitoring = () => {
+      try {
+        monitorStrictSanitization(textToMonitor, state);
+      } catch (error) {
+        // Silently catch errors to prevent blocking message flow
+        if (process.env.NODE_ENV === "development") {
+          console.error("[Monitor] HTML sanitization monitoring failed:", error);
+        }
+      }
+    };
+
+    // Use requestIdleCallback for truly idle execution, fallback to setTimeout for older browsers
+    if (typeof window !== "undefined" && "requestIdleCallback" in window) {
+      window.requestIdleCallback(scheduleMonitoring);
+    } else {
+      setTimeout(scheduleMonitoring, 0);
+    }
     return text;
   };
+
+  /**
+   * Monitor-only sanitization (Phase 1: Gather telemetry)
+   * Tests what a stricter allowlist-based sanitization would remove
+   * WITHOUT actually removing it. Logs telemetry for analysis.
+   *
+   * IMPORTANT: This function is wrapped in try-catch and runs asynchronously
+   * to ensure failures don't block message flow or add latency.
+   *
+   * ISOLATION: Uses a separate DOMPurify instance to completely isolate
+   * monitoring hooks from other sanitization paths (e.g., postDomPurifyActivities).
+   * The instance is garbage collected after use, no cleanup needed.
+   *
+   * @param html - The HTML text that was already sanitized with existing config
+   * @param state - Widget state containing orgId and chatId
+   */
+  const monitorStrictSanitization = (html, state) => {
+    // Early exit for empty content
+    if (!html) return;
+
+    // Track execution time for performance monitoring
+    const startTime = performance.now();
+    try {
+      // Create a separate DOMPurify instance for monitoring
+      // This completely isolates monitoring from other sanitization paths
+      const monitorDOMPurify = (0, _dompurify.default)(window);
+
+      // Strict allowlist configuration (proposed new rules)
+      // Note: DOMPurify blocks event handlers (onclick, onerror, etc.) by default
+      const strictConfig = {
+        ALLOWED_TAGS: ["b", "strong",
+        // Bold text
+        "i", "em", "u",
+        // Italic, emphasis, underline
+        "br", "p",
+        // Line breaks and paragraphs
+        "ul", "ol", "li",
+        // Lists
+        "a" // Links (with restricted attributes)
+        ],
+
+        ALLOWED_ATTR: ["href",
+        // For links (will be restricted to http/https)
+        "target",
+        // For link behavior
+        "rel" // For security (noopener, noreferrer)
+        ],
+
+        FORBID_TAGS: ["img", "video", "audio",
+        // Media (tracking beacons)
+        "iframe", "object", "embed",
+        // Embedded content
+        "script", "style",
+        // Script and styling
+        "form", "input", "textarea", "button",
+        // Form elements
+        "link", "meta", "base",
+        // Document metadata
+        "div", "span" // Layout elements
+        ],
+
+        FORBID_ATTR: ["style",
+        // Inline CSS
+        "action" // Form action attribute (event handlers blocked by default)
+        ],
+
+        ALLOWED_URI_REGEXP: /^https?:/i,
+        ALLOW_DATA_ATTR: false,
+        ALLOW_UNKNOWN_PROTOCOLS: false
+      };
+
+      // Track what would be removed
+      const removedTags = [];
+      const removedAttributes = [];
+
+      // Add hooks to the isolated monitoring instance
+      monitorDOMPurify.addHook("uponSanitizeElement", (node, data) => {
+        try {
+          const tagName = data.tagName.toLowerCase();
+          // Filter out "body" tag which is DOMPurify's internal wrapper
+          if (node.nodeType === 1 && !strictConfig.ALLOWED_TAGS.includes(tagName) && tagName !== "body") {
+            removedTags.push(tagName);
+          }
+        } catch (hookError) {
+          // Silently ignore hook errors
+        }
+      });
+      monitorDOMPurify.addHook("uponSanitizeAttribute", (node, data) => {
+        try {
+          const attrName = data.attrName.toLowerCase();
+          if (!strictConfig.ALLOWED_ATTR.includes(attrName) && attrName !== "class" && attrName !== "id") {
+            removedAttributes.push(attrName);
+          }
+        } catch (hookError) {
+          // Silently ignore hook errors
+        }
+      });
+
+      // Run sanitization on the isolated instance (we discard the result)
+      // No cleanup needed - the instance will be garbage collected with its hooks
+      monitorDOMPurify.sanitize(html, strictConfig);
+
+      // Log telemetry if content would be affected by strict rules
+      if (removedTags.length > 0 || removedAttributes.length > 0) {
+        try {
+          var _state$domainStates, _state$domainStates$t, _state$domainStates2, _state$domainStates2$;
+          const uniqueTags = [...new Set(removedTags)];
+          const uniqueAttrs = [...new Set(removedAttributes)];
+
+          // Calculate execution time
+          const endTime = performance.now();
+          const executionTimeMs = Math.round((endTime - startTime) * 100) / 100; // Round to 2 decimal places
+
+          // Get context for telemetry (with safe fallbacks)
+          const orgId = (state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$t = _state$domainStates.telemetryInternalData) === null || _state$domainStates$t === void 0 ? void 0 : _state$domainStates$t.orgId) || "unknown";
+          const conversationId = (state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : (_state$domainStates2$ = _state$domainStates2.chatToken) === null || _state$domainStates2$ === void 0 ? void 0 : _state$domainStates2$.chatId) || "unknown";
+          _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.HTMLSanitized,
+            Description: "HTML content would be sanitized by stricter allowlist (monitor-only)",
+            ElapsedTimeInMilliseconds: executionTimeMs,
+            CustomProperties: {
+              OrganizationId: orgId,
+              ConversationId: conversationId,
+              RemovedTags: uniqueTags.join(", "),
+              RemovedAttributes: uniqueAttrs.join(", "),
+              Phase: "Monitor"
+            }
+          });
+
+          // Log to console in development for debugging
+          if (process.env.NODE_ENV === "development") {
+            console.warn("[Monitor] Stricter HTML sanitization would remove:", {
+              orgId,
+              conversationId,
+              removedTags: uniqueTags,
+              removedAttributes: uniqueAttrs,
+              executionTimeMs
+            });
+          }
+        } catch (telemetryError) {
+          // Silently ignore telemetry errors to prevent blocking
+          if (process.env.NODE_ENV === "development") {
+            console.error("[Monitor] Telemetry logging failed:", telemetryError);
+          }
+        }
+      }
+    } catch (error) {
+      // Catch-all for any unexpected errors
+      // Silently fail to ensure monitoring never blocks message flow
+      if (process.env.NODE_ENV === "development") {
+        console.error("[Monitor] Monitoring failed:", error);
+      }
+    }
+  };
   function postDomPurifyActivities() {
     _dompurify.default.addHook("afterSanitizeAttributes", function (node) {
       const target = node.getAttribute(_Constants.Constants.Target);

package/lib/cjs/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js

@@ -66,7 +66,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 let uiTimer;
 const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$styleProps, _props$webChatContain10, _props$webChatContain11, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain15, _state$appStates8, _props$webChatContain17, _props$webChatContain18, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
+  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$styleProps, _props$webChatContain10, _props$webChatContain11, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain15, _state$appStates8, _props$webChatContain17, _props$webChatContain18, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _props$headerProps, _props$headerProps$co, _props$headerProps$co2, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
   (0, _react2.useEffect)(() => {
     uiTimer = (0, _utils.createTimer)();
     _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
@@ -1029,6 +1029,15 @@ const LiveChatWidgetStateful = props => {
       }));
     }
   }, [state.domainStates.botAvatarInitials]);
+  const isWidgetOpen = !state.appStates.isMinimized && state.appStates.conversationState !== _ConversationState.ConversationState.Closed;
+  const siblingAriaHiddenMapRef = (0, _react2.useRef)(new Map());
+  (0, _react2.useEffect)(() => {
+    const map = siblingAriaHiddenMapRef.current;
+    (0, _utils.setAriaHiddenForSiblings)(widgetElementId, isWidgetOpen, map);
+    return () => {
+      (0, _utils.setAriaHiddenForSiblings)(widgetElementId, false, map);
+    };
+  }, [isWidgetOpen]);
 
   // WebChat's Composer can only be rendered if a directLine object is defined
   return directLine && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("style", null, `
@@ -1152,7 +1161,10 @@ const LiveChatWidgetStateful = props => {
   }), /*#__PURE__*/_react2.default.createElement(_react.Stack, {
     id: widgetElementId,
     styles: generalStyles,
-    className: (_livechatProps$styleP = livechatProps.styleProps) === null || _livechatProps$styleP === void 0 ? void 0 : _livechatProps$styleP.className
+    className: (_livechatProps$styleP = livechatProps.styleProps) === null || _livechatProps$styleP === void 0 ? void 0 : _livechatProps$styleP.className,
+    role: isWidgetOpen ? "dialog" : undefined,
+    "aria-modal": isWidgetOpen ? true : undefined,
+    "aria-label": isWidgetOpen ? ((_props$headerProps = props.headerProps) === null || _props$headerProps === void 0 ? void 0 : (_props$headerProps$co = _props$headerProps.controlProps) === null || _props$headerProps$co === void 0 ? void 0 : (_props$headerProps$co2 = _props$headerProps$co.headerTitleProps) === null || _props$headerProps$co2 === void 0 ? void 0 : _props$headerProps$co2.text) ?? "Live Chat" : undefined
   }, !((_livechatProps$contro = livechatProps.controlProps) !== null && _livechatProps$contro !== void 0 && _livechatProps$contro.hideChatButton) && !((_livechatProps$contro2 = livechatProps.controlProps) !== null && _livechatProps$contro2 !== void 0 && _livechatProps$contro2.hideStartChatButton) && (0, _componentController.shouldShowChatButton)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon = livechatProps.componentOverrides) === null || _livechatProps$compon === void 0 ? void 0 : _livechatProps$compon.chatButton) || /*#__PURE__*/_react2.default.createElement(_ChatButtonStateful.default, {
     buttonProps: livechatProps.chatButtonProps,
     outOfOfficeButtonProps: livechatProps.outOfOfficeChatButtonProps,

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware.js

@@ -65,6 +65,8 @@ const handleSystemMessage = (next, args, card, renderMarkdown, systemMessageStyl
     originalSystemMessageTexts.set(activityKey, card.activity.text);
   }
   const sourceText = (activityKey && originalSystemMessageTexts.get(activityKey)) ?? card.activity.text;
+  // renderMarkdown sanitizes the HTML using DOMPurify with allowlist-based configuration
+  // See initWebChatComposer.ts for sanitization details
   const renderedHtml = renderMarkdown(sourceText);
   // eslint-disable-next-line react/display-name
   return () => /*#__PURE__*/_react.default.createElement("div", {

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware.js

@@ -7,6 +7,7 @@ exports.createAttachmentMiddleware = void 0;
 var _Constants = require("../../../../../common/Constants");
 var _react = _interopRequireDefault(require("react"));
 var _FileAttachmentIconManager = require("../../../common/utils/FileAttachmentIconManager");
+var _AdaptiveCardAccessibilityWrapper = _interopRequireDefault(require("./attachments/AdaptiveCardAccessibilityWrapper"));
 var _Attachment = _interopRequireDefault(require("./attachments/Attachment"));
 var _TelemetryConstants = require("../../../../../common/telemetry/TelemetryConstants");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
@@ -120,7 +121,7 @@ const createAttachmentMiddleware = enableInlinePlaying => {
       ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.attachmentAdaptiveCardStyles)
     };
     if (type === _Constants.WebChatMiddlewareConstants.adaptiveCard || _Constants.Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_AdaptiveCardAccessibilityWrapper.default, {
         id: attachmentId,
         style: atttachmentAdaptiveCardStyles
       }, next(...args));

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

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+/******
+ * AdaptiveCardAccessibilityWrapper
+ *
+ * The `adaptivecards` renderer does not set `aria-setsize` or `aria-posinset`
+ * on radio buttons rendered by Input.ChoiceSet (style: "expanded"). Without
+ * these attributes, screen readers (TalkBack, VoiceOver, NVDA) cannot announce
+ * the correct option count (e.g. "1 of 2") and may say "1 of 1" for every item.
+ *
+ * This wrapper observes the rendered card via MutationObserver and patches each
+ * radio group with the correct ARIA attributes after the card finishes rendering.
+ ******/
+
+const AdaptiveCardAccessibilityWrapper = _ref => {
+  let {
+    id,
+    style,
+    children
+  } = _ref;
+  const containerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current) return;
+    const patchRadioGroups = () => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      // Find all radio inputs inside the adaptive card
+      const radios = container.querySelectorAll("input[type='radio']");
+      if (radios.length === 0) return;
+
+      // Group radios by their name attribute (each ChoiceSet has a unique name)
+      const groups = new Map();
+      radios.forEach(radio => {
+        var _groups$get;
+        const name = radio.getAttribute("name") || "__default";
+        if (!groups.has(name)) {
+          groups.set(name, []);
+        }
+        (_groups$get = groups.get(name)) === null || _groups$get === void 0 ? void 0 : _groups$get.push(radio);
+      });
+      groups.forEach(radioInputs => {
+        const groupSize = radioInputs.length;
+        radioInputs.forEach((radio, index) => {
+          radio.setAttribute("aria-setsize", String(groupSize));
+          radio.setAttribute("aria-posinset", String(index + 1));
+
+          // Ensure the parent container has radiogroup role
+          const parent = radio.closest("[role='radiogroup']") || radio.closest(".ac-input-container");
+          if (parent && !parent.getAttribute("role")) {
+            parent.setAttribute("role", "radiogroup");
+          }
+
+          // The adaptive card renders each choice as:
+          //   <div style="display:flex">          ← flex wrapper
+          //     <input type="radio">
+          //     <div style="width:6px"></div>     ← spacer
+          //     <label><div><p>Text</p></div></label>
+          //   </div>
+          //
+          // TalkBack focuses on the <label> text node (just "Standard")
+          // instead of the <input>, so it never announces "radio button" or count.
+          //
+          // Fix: hide the label and spacer from the accessibility tree so TalkBack
+          // lands directly on the <input> which already has aria-label,
+          // aria-setsize and aria-posinset. The input's aria-labelledby still
+          // resolves the accessible name from the hidden label per ARIA spec.
+          const flexWrapper = radio.parentElement;
+          if (flexWrapper) {
+            var _label$textContent;
+            // Hide label sibling — only set if not already applied to
+            // avoid re-triggering the attributeFilter observer in a loop
+            const label = flexWrapper.querySelector("label");
+            if (label && label.getAttribute("aria-hidden") !== "true") {
+              label.setAttribute("aria-hidden", "true");
+            }
+            // Hide spacer siblings (any non-input, non-label divs)
+            Array.from(flexWrapper.children).forEach(child => {
+              const tag = child.tagName.toLowerCase();
+              if (tag !== "input" && tag !== "label" && child.getAttribute("aria-hidden") !== "true") {
+                child.setAttribute("aria-hidden", "true");
+              }
+            });
+
+            // TalkBack reads content-desc from the Android accessibility node,
+            // which Chrome populates from aria-label. However, aria-labelledby
+            // (set by the adaptive card renderer) takes precedence over aria-label.
+            // Since we hide the label (aria-hidden=true), Chrome can no longer
+            // resolve aria-labelledby and returns empty content-desc.
+            //
+            // Fix: remove aria-labelledby so Chrome falls back to aria-label,
+            // then encode the position count into aria-label so TalkBack announces
+            // e.g. "Standard, 1 of 2, radio button, not checked".
+            if (radio.hasAttribute("aria-labelledby")) {
+              radio.removeAttribute("aria-labelledby");
+            }
+            const labelText = (label === null || label === void 0 ? void 0 : (_label$textContent = label.textContent) === null || _label$textContent === void 0 ? void 0 : _label$textContent.trim()) || radio.getAttribute("aria-label") || "";
+            const expectedLabel = `${labelText}, ${index + 1} of ${groupSize}`;
+            if (radio.getAttribute("aria-label") !== expectedLabel) {
+              radio.setAttribute("aria-label", expectedLabel);
+            }
+          }
+        });
+      });
+    };
+
+    // Use MutationObserver to patch after WebChat finishes rendering the card.
+    // Also watch attribute changes on aria-hidden so we can re-apply if React
+    // reconciliation removes it from labels.
+    const observer = new MutationObserver(() => {
+      patchRadioGroups();
+    });
+    observer.observe(containerRef.current, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-hidden"]
+    });
+
+    // Also run immediately in case the card is already rendered
+    patchRadioGroups();
+    return () => observer.disconnect();
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    style: style,
+    ref: containerRef
+  }, children);
+};
+var _default = AdaptiveCardAccessibilityWrapper;
+exports.default = _default;