@microsoft/omnichannel-chat-widget 1.8.4-hotfix.system-message-spacing.1 → 1.8.4-main.05edfd3

package/README.md

@@ -311,6 +311,7 @@ BroadcastService.getMessageByEventName("CloseChat").subscribe(async (msg) => {
 [Create LiveChatWidget with Webpack5 and TypeScript](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/BuildingUsingWebpack5.md)\
 [Omnichannel Features](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Features.md)\
 [How to Add Visual Regression Tests](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/VisualRegressionTestingGuide.md)\
+[Accessibility Tooling](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/accessibility/README.md)\
 [Security](https://github.com/microsoft/omnichannel-chat-widget/blob/main/SECURITY.md)\
 [Third Party Cookie Support](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Tpc.md)\
 [Storybook](https://microsoft.github.io/omnichannel-chat-widget/docs/storybook/)

package/lib/cjs/common/Constants.js

@@ -146,6 +146,9 @@ _defineProperty(Constants, "customEventValue", "customEventValue");
 _defineProperty(Constants, "Hidden", "Hidden");
 _defineProperty(Constants, "EndConversationDueToOverflow", "endconversationduetooverflow");
 _defineProperty(Constants, "SkipSessionCloseForPersistentChatFlag", "skipSessionCloseForPersistentChat");
+// Minimum font-size for input fields to prevent iOS Safari auto-zoom on focus
+_defineProperty(Constants, "minInputFontSizePx", 16);
+_defineProperty(Constants, "minInputFontSize", "16px");
 const Regex = (_class = /*#__PURE__*/_createClass(function Regex() {
   _classCallCheck(this, Regex);
 }), _defineProperty(_class, "EmailRegex", "^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"[^\"\\\\]*(?:\\\\.[^\"\\\\]*)*\")@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)*|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\])$"), _class);

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/telemetry/TelemetryManager.js

@@ -11,6 +11,7 @@ var _appInsightsLogger = require("./loggers/appInsightsLogger");
 var _ariaTelemetryLogger = require("./loggers/ariaTelemetryLogger");
 var _consoleLogger = require("./loggers/consoleLogger");
 var _defaultAriaConfig = require("./defaultConfigs/defaultAriaConfig");
+var _sanitizeSasInPayload = require("./sanitizeSasInPayload");
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -81,11 +82,15 @@ const RegisterLoggers = () => {
     };
   };
   const logTelemetry = telemetryEvent => {
+    // Redact Azure SAS credentials in any URL embedded in the payload (e.g.
+    // customer-supplied blob asset URLs in widget customization props) before
+    // it fans out to console, Aria, AppInsights, or any custom logger.
+    const sanitizedPayload = (0, _sanitizeSasInPayload.sanitizeSasInPayload)(telemetryEvent === null || telemetryEvent === void 0 ? void 0 : telemetryEvent.payload);
     loggers.map(logger => {
       var _payload, _telemetryInput$paylo;
       const logLevel = telemetryEvent.logLevel ?? _TelemetryConstants.LogLevel.INFO;
       const scenarioType = ((_payload = telemetryEvent.payload) === null || _payload === void 0 ? void 0 : _payload.scenarioType) ?? _TelemetryConstants.ScenarioType.UNDEFINED;
-      const telemetryInput = parseInput(telemetryEvent === null || telemetryEvent === void 0 ? void 0 : telemetryEvent.payload, scenarioType);
+      const telemetryInput = parseInput(sanitizedPayload, scenarioType);
       telemetryInput.telemetryInfo = {
         telemetryInfo: _TelemetryHelper.TelemetryHelper.buildTelemetryEvent(logLevel, telemetryInput)
       };

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizeSasInPayload = void 0;
+/**
+ * Redacts the values of Azure Shared Access Signature (SAS) query parameters in any
+ * URL embedded in a telemetry payload, so customer-supplied SAS URLs (e.g. blob asset
+ * URLs in widget customization props) cannot leak credentials through Aria/AppInsights.
+ *
+ * Trigger: any URL whose query string contains `sig=`. When detected, every well-known
+ * SAS parameter value in that query is replaced with `[REDACTED]`. Other URLs and other
+ * substrings of the payload pass through unchanged.
+ *
+ * Coverage of SAS parameter names:
+ *  - Service/Blob SAS:        sig, sv, se, st, sp, spr, sr, sip
+ *  - Account SAS:             ss, srt
+ *  - User-delegation key SAS: skoid, sktid, skt, ske, sks, skv, saoid, suoid, sce, sdd
+ *  - Response header overrides: rscc, rscd, rsce, rscl, rsct
+ *
+ * Reference: https://learn.microsoft.com/en-us/rest/api/storageservices/create-service-sas
+ */
+
+const SAS_PARAM_NAMES = new Set(["sig", "sv", "se", "st", "sp", "spr", "sr", "sip", "ss", "srt", "skoid", "sktid", "skt", "ske", "sks", "skv", "saoid", "suoid", "sce", "sdd", "rscc", "rscd", "rsce", "rscl", "rsct"]);
+const REDACTED_VALUE = "[REDACTED]";
+
+// Matches any http(s) URL substring up to whitespace / closing quote / angle-bracket / paren.
+const URL_REGEX = /\bhttps?:\/\/[^\s"'<>)]+/gi;
+const redactQueryIfSas = url => {
+  const queryIdx = url.indexOf("?");
+  if (queryIdx < 0) {
+    return url;
+  }
+  // Separate the fragment (#...) before processing the query — fragments come
+  // after the query string in URL syntax and must not be folded into the last
+  // query parameter's value when we split on `&`.
+  const afterQuestionMark = url.slice(queryIdx + 1);
+  const fragIdx = afterQuestionMark.indexOf("#");
+  const query = fragIdx < 0 ? afterQuestionMark : afterQuestionMark.slice(0, fragIdx);
+  const fragment = fragIdx < 0 ? "" : afterQuestionMark.slice(fragIdx); // includes the leading '#'
+  if (!/(^|&)sig=/i.test(query)) {
+    // No SAS signature present — leave the URL alone so legitimate non-SAS query
+    // strings (e.g. ?utm_source=...) are not mangled.
+    return url;
+  }
+  const base = url.slice(0, queryIdx);
+  const sanitizedQuery = query.split("&").map(pair => {
+    const eqIdx = pair.indexOf("=");
+    if (eqIdx < 0) {
+      return pair;
+    }
+    const name = pair.slice(0, eqIdx).toLowerCase();
+    return SAS_PARAM_NAMES.has(name) ? `${pair.slice(0, eqIdx)}=${REDACTED_VALUE}` : pair;
+  }).join("&");
+  return `${base}?${sanitizedQuery}${fragment}`;
+};
+const sanitizeString = s => s.replace(URL_REGEX, redactQueryIfSas);
+
+/**
+ * Deep-walk a value and redact SAS credentials in any string it contains.
+ * Returns a new object/array (originals are not mutated); non-string leaves are
+ * passed through. Tree-shaped, JSON-like values only — not designed for class
+ * instances, prototype-bound objects, or cyclic graphs.
+ */
+const sanitizeSasInPayload = value => {
+  if (typeof value === "string") {
+    return sanitizeString(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(sanitizeSasInPayload);
+  }
+  if (value !== null && typeof value === "object") {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+      out[k] = sanitizeSasInPayload(v);
+    }
+    return out;
+  }
+  return value;
+};
+exports.sanitizeSasInPayload = sanitizeSasInPayload;

package/lib/cjs/common/utils.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCustomEventValue = exports.getConversationDetailsCall = exports.getBroadcastChannelName = exports.formatTemplateString = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.debounceLeading = exports.createTimer = exports.createFileAndDownload = exports.checkContactIdError = exports.changeLanguageCodeFormatForWebChat = exports.addDelayInMs = void 0;
+exports.getCustomEventValue = exports.getConversationDetailsCall = exports.getBroadcastChannelName = exports.formatTemplateString = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.debounceLeading = exports.createTimer = exports.createFileAndDownload = exports.checkContactIdError = exports.changeLanguageCodeFormatForWebChat = exports.announceMessageImmediately = exports.addDelayInMs = void 0;
 exports.getDeviceType = getDeviceType;
 exports.getWidgetEndChatEventName = exports.getWidgetCacheIdfromProps = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getStateFromCache = exports.getLocaleDirection = exports.getIconText = exports.getDomain = void 0;
 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);
@@ -117,6 +158,41 @@ const setFocusOnElement = selector => {
   element === null || element === void 0 ? void 0 : element.focus();
 };
 exports.setFocusOnElement = setFocusOnElement;
+const IMMEDIATE_ANNOUNCEMENT_REGION_ID = "oc-lcw-immediate-announcement";
+
+// Announces a message to screen readers via an aria-live="assertive" region
+// attached to document.body — outside the chat widget's DOM subtree — so the
+// screen reader does not have to traverse chat content to reach it.
+const announceMessageImmediately = message => {
+  if (!message || typeof document === "undefined") {
+    return;
+  }
+  let region = document.getElementById(IMMEDIATE_ANNOUNCEMENT_REGION_ID);
+  if (!region) {
+    region = document.createElement("div");
+    region.id = IMMEDIATE_ANNOUNCEMENT_REGION_ID;
+    region.setAttribute("aria-live", "assertive");
+    region.setAttribute("role", "alert");
+    region.setAttribute("aria-atomic", "true");
+    region.style.position = "absolute";
+    region.style.width = "1px";
+    region.style.height = "1px";
+    region.style.overflow = "hidden";
+    region.style.clip = "rect(0 0 0 0)";
+    region.style.clipPath = "inset(50%)";
+    region.style.whiteSpace = "nowrap";
+    document.body.appendChild(region);
+  }
+  region.textContent = "";
+  // Re-set on the next tick so screen readers detect the change even when
+  // the same message is announced twice in a row.
+  setTimeout(() => {
+    if (region) {
+      region.textContent = message;
+    }
+  }, 50);
+};
+exports.announceMessageImmediately = announceMessageImmediately;
 const escapeHtml = inputString => {
   const entityMap = {
     "<": "&lt;",

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,13 @@ const CitationPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.UXCitationPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return () => {
+      // internal tracking: restore parent tab indices on unmount so focus
+      // can escape the widget even if the pane is dismissed by an
+      // external state change rather than a user button click.
+      (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
+      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,17 @@ const ConfirmationPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.UXConfirmationPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return () => {
+      // internal tracking: when the confirmation pane unmounts (page reload,
+      // parent state change, or any path that bypasses onConfirm /
+      // onCancel) the tab indices that were forced to -1 on sibling
+      // focusable elements must be restored, otherwise Tab order
+      // remains broken and focus can be trapped inside the widget.
+      // setTabIndices is a no-op when initialTabIndexMap is already
+      // empty (onConfirm / onCancel already restored).
+      (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
+      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

@@ -35,16 +35,23 @@ const EmailTranscriptPaneStateful = props => {
   const [state, dispatch] = (0, _useChatContextStore.default)();
   const [facadeChatSDK] = (0, _useFacadeChatSDKStore.default)();
   const [initialEmail, setInitialEmail] = (0, _react.useState)("");
-  const closeEmailTranscriptPane = () => {
+  // restoreFocus=false is used on the submit path: the notification banner
+  // (success or error) takes focus via NotificationHandler.setFocusOnNotificationCloseButton,
+  // so an intermediate restore to the chat-widget shell would otherwise cause SRs to
+  // announce "Enter <widget>" in between the dialog and the banner.
+  const closeEmailTranscriptPane = function () {
+    let restoreFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
       payload: false
     });
-    const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
-    if (previousFocusedElementId) {
-      (0, _utils.setFocusOnElement)("#" + previousFocusedElementId);
-    } else {
-      (0, _utils.setFocusOnSendBox)();
+    if (restoreFocus) {
+      const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
+      if (previousFocusedElementId) {
+        (0, _utils.setFocusOnElement)("#" + previousFocusedElementId);
+      } else {
+        (0, _utils.setFocusOnSendBox)();
+      }
     }
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
@@ -55,23 +62,31 @@ const EmailTranscriptPaneStateful = props => {
   const onSend = (0, _react.useCallback)(async email => {
     var _state$domainStates;
     const liveChatContext = state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.liveChatContext;
-    closeEmailTranscriptPane();
+    closeEmailTranscriptPane(false);
     const chatTranscriptBody = {
       emailAddress: email,
       attachmentMessage: (props === null || props === void 0 ? void 0 : props.attachmentMessage) ?? "The following attachment was uploaded during the conversation:"
     };
     try {
-      var _state$domainStates2, _state$domainStates2$;
+      var _state$domainStates2, _state$domainStates2$, _state$domainStates3, _state$domainStates3$;
       await (facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.emailLiveChatTranscript(chatTranscriptBody, {
         liveChatContext
       }));
-      _NotificationHandler.NotificationHandler.notifySuccess(_NotificationScenarios.NotificationScenarios.EmailAddressSaved, (state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : (_state$domainStates2$ = _state$domainStates2.middlewareLocalizedTexts) === null || _state$domainStates2$ === void 0 ? void 0 : _state$domainStates2$.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS) ?? (_defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts === null || _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts === void 0 ? void 0 : _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS));
+      const successMessage = (state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : (_state$domainStates2$ = _state$domainStates2.middlewareLocalizedTexts) === null || _state$domainStates2$ === void 0 ? void 0 : _state$domainStates2$.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS) ?? (_defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts === null || _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts === void 0 ? void 0 : _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS);
+      // Announce from a live region at document.body level so the
+      // screen reader speaks the confirmation immediately, without
+      // traversing the chat transcript on the way to the banner.
+      // Prefix with the explicit state word so SR users hear the outcome
+      // (visual users already see a success icon on the banner).
+      const successSrPrefix = (state === null || state === void 0 ? void 0 : (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : (_state$domainStates3$ = _state$domainStates3.middlewareLocalizedTexts) === null || _state$domainStates3$ === void 0 ? void 0 : _state$domainStates3$.MIDDLEWARE_SR_PREFIX_SUCCESS) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_SR_PREFIX_SUCCESS;
+      (0, _utils.announceMessageImmediately)(`${successSrPrefix}${successMessage}`);
+      _NotificationHandler.NotificationHandler.notifySuccess(_NotificationScenarios.NotificationScenarios.EmailAddressSaved, successMessage);
       _TelemetryHelper.TelemetryHelper.logActionEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptSent,
         Description: "Transcript sent to email successfully."
       });
     } catch (ex) {
-      var _state$domainStates3, _state$domainStates3$;
+      var _state$domainStates4, _state$domainStates4$, _state$domainStates5, _state$domainStates5$;
       _TelemetryHelper.TelemetryHelper.logActionEventToAllTelemetry(_TelemetryConstants.LogLevel.ERROR, {
         Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptFailed,
         Description: "Email transcript failed.",
@@ -79,8 +94,11 @@ const EmailTranscriptPaneStateful = props => {
           exception: ex
         }
       });
-      const message = (0, _utils.formatTemplateString)((state === null || state === void 0 ? void 0 : (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : (_state$domainStates3$ = _state$domainStates3.middlewareLocalizedTexts) === null || _state$domainStates3$ === void 0 ? void 0 : _state$domainStates3$.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
-      _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.EmailTranscriptError, (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? message);
+      const message = (0, _utils.formatTemplateString)((state === null || state === void 0 ? void 0 : (_state$domainStates4 = state.domainStates) === null || _state$domainStates4 === void 0 ? void 0 : (_state$domainStates4$ = _state$domainStates4.middlewareLocalizedTexts) === null || _state$domainStates4$ === void 0 ? void 0 : _state$domainStates4$.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
+      const bannerMessage = (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? message;
+      const errorSrPrefix = (state === null || state === void 0 ? void 0 : (_state$domainStates5 = state.domainStates) === null || _state$domainStates5 === void 0 ? void 0 : (_state$domainStates5$ = _state$domainStates5.middlewareLocalizedTexts) === null || _state$domainStates5$ === void 0 ? void 0 : _state$domainStates5$.MIDDLEWARE_SR_PREFIX_ERROR) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_SR_PREFIX_ERROR;
+      (0, _utils.announceMessageImmediately)(`${errorSrPrefix}${bannerMessage}`);
+      _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.EmailTranscriptError, bannerMessage);
     }
   }, [props.attachmentMessage, props.bannerMessageOnError, facadeChatSDK, state.domainStates.liveChatContext]);
   const controlProps = {
@@ -103,7 +121,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 +136,11 @@ const EmailTranscriptPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.UXEmailTranscriptPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return () => {
+      // internal tracking: restore parent tab indices on unmount.
+      (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
+      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/createMarkdown.js

@@ -42,10 +42,8 @@ const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdown
 
   markdown.disable(["strikethrough"]);
 
-  // Custom plugin to fix numbered list continuity
+  // Custom plugin to fix numbered list continuity and merge adjacent markdown links with the same href.
   markdown.use(function (md) {
-    const originalRender = md.render.bind(md);
-    const originalRenderInline = md.renderInline.bind(md);
     function preprocessText(text) {
       // Handle numbered lists that come with double line breaks (knowledge article format)
       // This ensures proper continuous numbering instead of separate lists
@@ -80,16 +78,111 @@ const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdown
       return result;
     }
 
+    // Accessibility fix: when a bot emits content like "[1.](url) [View details](url)",
+    // markdown-it renders two sibling links that screen readers announce as two separate
+    // focusable links. Merge consecutive markdown link tokens with identical attributes so
+    // the number and label form one combined focusable link without discarding metadata.
+    md.core.ruler.after("inline", "merge_adjacent_same_href_links", function (state) {
+      const sortedAttrs = token => (token.attrs || []).map(attr => `${attr[0]}=${attr[1]}`).sort();
+      const hasSameAttributes = (first, second) => {
+        const firstAttrs = sortedAttrs(first);
+        const secondAttrs = sortedAttrs(second);
+        return firstAttrs.length === secondAttrs.length && firstAttrs.every((attr, index) => attr === secondAttrs[index]);
+      };
+      const collectLink = (children, index) => {
+        var _open$attrGet;
+        const open = children[index];
+        if (!open || open.type !== "link_open") {
+          return undefined;
+        }
+        const href = (_open$attrGet = open.attrGet) === null || _open$attrGet === void 0 ? void 0 : _open$attrGet.call(open, "href");
+        if (!href) {
+          return undefined;
+        }
+        let depth = 0;
+        for (let currentIndex = index; currentIndex < children.length; currentIndex++) {
+          const token = children[currentIndex];
+          if (token.type === "link_open") {
+            depth++;
+          } else if (token.type === "link_close") {
+            depth--;
+            if (depth === 0) {
+              return {
+                closeIndex: currentIndex,
+                href,
+                open
+              };
+            }
+          }
+        }
+        return undefined;
+      };
+      const getNextAdjacentLink = (children, startIndex) => {
+        const separatorTokens = [];
+        let index = startIndex;
+        while (index < children.length && children[index].type === "text" && /^\s*$/.test(children[index].content || "")) {
+          separatorTokens.push(children[index]);
+          index++;
+        }
+        const link = collectLink(children, index);
+        if (!link) {
+          return undefined;
+        }
+        return {
+          ...link,
+          openIndex: index,
+          separatorTokens
+        };
+      };
+      state.tokens.forEach(blockToken => {
+        if (blockToken.type !== "inline" || !blockToken.children) {
+          return;
+        }
+        const mergedChildren = [];
+        const children = blockToken.children;
+        let index = 0;
+        while (index < children.length) {
+          const firstLink = collectLink(children, index);
+          if (!firstLink) {
+            mergedChildren.push(children[index]);
+            index++;
+            continue;
+          }
+          const linkTokens = [firstLink.open, ...children.slice(index + 1, firstLink.closeIndex)];
+          let nextIndex = firstLink.closeIndex + 1;
+          let mergedAnyLink = false;
+          let nextLink = getNextAdjacentLink(children, nextIndex);
+          while (nextLink && nextLink.href === firstLink.href && hasSameAttributes(firstLink.open, nextLink.open)) {
+            linkTokens.push(...nextLink.separatorTokens);
+            linkTokens.push(...children.slice(nextLink.openIndex + 1, nextLink.closeIndex));
+            nextIndex = nextLink.closeIndex + 1;
+            mergedAnyLink = true;
+            nextLink = getNextAdjacentLink(children, nextIndex);
+          }
+          if (mergedAnyLink) {
+            mergedChildren.push(...linkTokens, children[firstLink.closeIndex]);
+            index = nextIndex;
+          } else {
+            mergedChildren.push(children[index]);
+            index++;
+          }
+        }
+        blockToken.children = mergedChildren;
+      });
+    });
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     md.render = function (text, env) {
+      const safeEnv = env ?? {};
       const processedText = preprocessText(text);
-      return originalRender(processedText, env);
+      return md.renderer.render(md.parse(processedText, safeEnv), md.options, safeEnv);
     };
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     md.renderInline = function (text, env) {
+      const safeEnv = env ?? {};
       const processedText = preprocessText(text);
-      return originalRenderInline(processedText, env);
+      return md.renderer.render(md.parseInline(processedText, safeEnv), md.options, safeEnv);
     };
   });
 

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

@@ -11,6 +11,7 @@ var _renderSurveyHelpers = require("./renderSurveyHelpers");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _ConversationState = require("../../../contexts/common/ConversationState");
 var _LazyLoadActivity = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activities/LazyLoadActivity");
+var _activityMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware");
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
 var _NotificationHandler = require("../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
 var _NotificationScenarios = require("../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
@@ -249,6 +250,7 @@ const endChat = async (props, facadeChatSDK, state, dispatch, setAdapter, setWeb
 
       // Call direct reset to ensure LazyLoadHandler gets reset regardless of broadcast timing
       _LazyLoadActivity.LazyLoadHandler.directReset();
+      (0, _activityMiddleware.resetActivityMiddlewareCache)();
       _omnichannelChatComponents.BroadcastService.postMessage({
         eventName: _TelemetryConstants.BroadcastEvent.PersistentConversationReset
       });
@@ -344,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);