@microsoft/omnichannel-chat-widget 1.8.4-main.2b0b03f → 1.8.4-main.2e8be66

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

@@ -158,6 +158,7 @@ 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/common/utils.js

@@ -3,7 +3,7 @@
 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;
@@ -158,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/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 = {

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,109 @@ 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 processedText = preprocessText(text);
-      return originalRender(processedText, env);
+      return md.renderer.render(md.parse(processedText, env), md.options, env);
     };
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     md.renderInline = function (text, env) {
       const processedText = preprocessText(text);
-      return originalRenderInline(processedText, env);
+      return md.renderer.render(md.parseInline(processedText, env), md.options, env);
     };
   });
 

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/postchatloadingpanestateful/PostChatLoadingPaneStateful.js

@@ -16,13 +16,22 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 PostChatLoadingPaneStateful = props => {
-  var _props$styleProps;
+  var _props$controlProps, _props$styleProps;
+  const defaultSubtitleText = "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now.";
+  const subtitleText = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.subtitleText) ?? defaultSubtitleText;
+  const [announcedSubtitleText, setAnnouncedSubtitleText] = (0, _react.useState)("");
   (0, _react.useEffect)(() => {
     uiTimer = (0, _utils.createTimer)();
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.UXPostChatLoadingPaneStart
     });
   }, []);
+  (0, _react.useEffect)(() => {
+    const timeout = window.setTimeout(() => {
+      setAnnouncedSubtitleText(subtitleText);
+    }, 0);
+    return () => window.clearTimeout(timeout);
+  }, [subtitleText]);
   const [state] = (0, _useChatContextStore.default)();
   const generalStyleProps = Object.assign({}, _defaultgeneralPostChatLoadingPaneStyleProps.defaultGeneralPostChatLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
@@ -36,8 +45,11 @@ const PostChatLoadingPaneStateful = props => {
     hideTitle: true,
     hideSpinner: true,
     hideSpinnerText: true,
-    subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now.",
-    ...props.controlProps
+    ...props.controlProps,
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    subtitleText: announcedSubtitleText
   };
 
   // Move focus to the first button

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

@@ -31,6 +31,7 @@ var _liveChatConfigUtils = require("../livechatwidget/common/liveChatConfigUtils
 var _ = require("../..");
 var _useFacadeChatSDKStore = _interopRequireDefault(require("../../hooks/useFacadeChatSDKStore"));
 var _usePersistentChatHistory = _interopRequireDefault(require("./hooks/usePersistentChatHistory"));
+var _citationA11y = require("./common/utils/citationA11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -155,6 +156,56 @@ const WebChatContainerStateful = props => {
     document.addEventListener("click", clickHandler);
     return () => document.removeEventListener("click", clickHandler);
   }, [state]);
+
+  // Accessibility: Merge citation card's number badge and link text into a single
+  // focusable element. WebChat's LinkDefinitionItem renders an <a> containing a
+  // badge <div> (the number, e.g. "1") and a text <div> (the title). On iOS
+  // VoiceOver and Android TalkBack, those block-level descendants are otherwise
+  // announced as two separate focusable links. The patch sets a combined
+  // aria-label on the anchor and hides every descendant from the a11y tree so
+  // the whole card is announced as one link.
+  (0, _react2.useEffect)(() => {
+    const webChatRoot = document.getElementById("ms_lcw_webchat_root");
+    if (!webChatRoot) {
+      return;
+    }
+    (0, _citationA11y.patchCitationAnchorsForA11y)(webChatRoot);
+    const observer = new MutationObserver(mutations => {
+      for (const m of mutations) {
+        if (m.type === "childList") {
+          m.addedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              var _parentElement, _parentElement$closes;
+              (0, _citationA11y.patchCitationAnchorsForA11y)(node);
+              // A child added inside an existing anchor (e.g. React
+              // mounting OpenInNewWindowIcon after the anchor) means
+              // the parent anchor needs to re-walk its descendants.
+              const ancestor = (_parentElement = node.parentElement) === null || _parentElement === void 0 ? void 0 : (_parentElement$closes = _parentElement.closest) === null || _parentElement$closes === void 0 ? void 0 : _parentElement$closes.call(_parentElement, "a.webchat__link-definitions__list-item-box");
+              if (ancestor) {
+                (0, _citationA11y.patchCitationAnchorsForA11y)(ancestor);
+              }
+            }
+          });
+        } else if (m.type === "attributes" && m.target.nodeType === Node.ELEMENT_NODE) {
+          var _target$closest;
+          // React may strip our aria-hidden during a re-render; reapply
+          // by re-patching the closest matching anchor ancestor.
+          const target = m.target;
+          const ancestor = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "a.webchat__link-definitions__list-item-box");
+          if (ancestor) {
+            (0, _citationA11y.patchCitationAnchorsForA11y)(ancestor);
+          }
+        }
+      }
+    });
+    observer.observe(webChatRoot, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-hidden", "role", "tabindex", "inert"]
+    });
+    return () => observer.disconnect();
+  }, []);
   const minimizedStyles = state.appStates.isMinimized ? shouldLoadPersistentHistoryMessages ? {
     visibility: "hidden",
     position: "absolute",
@@ -445,7 +496,23 @@ const WebChatContainerStateful = props => {
       height: "100%",
       width: "100%"
     }
-  }, shouldLoadPersistentHistoryMessages && /*#__PURE__*/_react2.default.createElement(_WebChatEventSubscribers.default, null), /*#__PURE__*/_react2.default.createElement(BasicWebChat, null))), citationPaneOpen && /*#__PURE__*/_react2.default.createElement(_CitationPaneStateful.default, {
+  }, 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, {
     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/defaultMiddlewareLocalizedTexts.js

@@ -33,8 +33,11 @@ const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat.",
   THIRD_PARTY_COOKIES_BLOCKED_ALERT_MESSAGE: "Allow sites to save/read cookies in browser settings. Reloading page starts a new chat.",
   MIDDLEWARE_BANNER_FILE_IS_MALICIOUS: "{0} has been blocked because the file may contain a malware.",
+  MIDDLEWARE_BANNER_FILE_SENT: "File sent successfully.",
   MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS: "Email will be sent after chat ends!",
   MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR: "Email {0} could not be saved, try again later.",
+  MIDDLEWARE_SR_PREFIX_SUCCESS: "Success. ",
+  MIDDLEWARE_SR_PREFIX_ERROR: "Error. ",
   PREVIOUS_MESSAGES_LOADING: "Loading previous messages...",
   CONVERSATION_DIVIDER_ARIA_LABEL: "Conversation history divider"
 };