@microsoft/omnichannel-chat-widget 1.8.4-main.9edfa7a → 1.8.4-main.a37560d

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/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",

package/lib/cjs/components/webchatcontainerstateful/common/utils/citationA11y.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.patchCitationAnchorsForA11y = void 0;
+// Accessibility helper: Merges WebChat's citation card number badge and link
+// text into a single focusable element.
+//
+// WebChat's LinkDefinitionItem renders an <a> containing a badge <div> (number)
+// and a text <div> (title). On iOS VoiceOver, these block-level descendants are
+// announced as two separate focusable links (e.g. "1, link" and
+// "Assessment of eligibility..., link"). Setting a combined aria-label on the
+// anchor and hiding inner descendants from the accessibility tree ensures the
+// whole card is announced as one link.
+
+const CITATION_ANCHOR_SELECTOR = "a.webchat__link-definitions__list-item-box";
+const PATCHED_MARKER = "ocwCitationA11yPatched";
+const STYLE_TAG_ID = "ocw-citation-a11y-styles";
+
+// Global CSS injected once per document. Neutralizes iOS Safari's per-inner-
+// element tap highlight / selection / focus rectangles that otherwise make
+// the "1" badge and the link text appear as separate selectable areas even
+// though they are inside a single <a>.
+// Strategy:
+//  - Make the anchor a block-level positioning parent.
+//  - Add a transparent ::after pseudo-element that covers the entire anchor.
+//    iOS Safari hit-tests that overlay as a SINGLE region, so the tap
+//    highlight / selection rectangle always covers the whole card instead
+//    of just the "1" badge or just the link text.
+//  - Make every descendant transparent to pointer / focus, so they can never
+//    become a standalone tap target.
+const STYLE_RULES = `
+a.webchat__link-definitions__list-item-box {
+    position: relative;
+    display: block;
+    isolation: isolate;
+    -webkit-tap-highlight-color: rgba(0, 120, 212, 0.15);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+}
+a.webchat__link-definitions__list-item-box::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    background: transparent;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: rgba(0, 120, 212, 0.15);
+}
+a.webchat__link-definitions__list-item-box * {
+    pointer-events: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    outline: none;
+    text-decoration: inherit;
+    cursor: inherit;
+}
+`;
+const ensureStyleInjected = doc => {
+  if (!doc || typeof doc.getElementById !== "function" || doc.getElementById(STYLE_TAG_ID)) {
+    return;
+  }
+  const style = doc.createElement("style");
+  style.id = STYLE_TAG_ID;
+  style.textContent = STYLE_RULES;
+  (doc.head || doc.documentElement).appendChild(style);
+};
+const patchCitationAnchorsForA11y = root => {
+  var _defaultView;
+  if (!root || typeof root.querySelectorAll !== "function") {
+    return;
+  }
+
+  // Inject global CSS once per document. This covers every citation anchor
+  // regardless of whether our per-node patch has run on it yet.
+  const rootNode = root;
+  const doc = rootNode.ownerDocument ?? ((_defaultView = root.defaultView) === null || _defaultView === void 0 ? void 0 : _defaultView.document) ?? root ?? (typeof document !== "undefined" ? document : null);
+  if (doc && typeof doc.createElement === "function") {
+    ensureStyleInjected(doc);
+  }
+
+  // Also include the root itself when it matches — calls from MutationObserver
+  // pass the anchor element directly, which querySelectorAll wouldn't return.
+  const matched = new Set();
+  if (typeof root.matches === "function" && root.matches(CITATION_ANCHOR_SELECTOR)) {
+    matched.add(root);
+  }
+  root.querySelectorAll(CITATION_ANCHOR_SELECTOR).forEach(n => {
+    matched.add(n);
+  });
+  matched.forEach(anchor => {
+    var _badge$textContent, _textEl$textContent;
+    const badge = anchor.querySelector(".webchat__link-definitions__badge");
+    const textEl = anchor.querySelector(".webchat__link-definitions__list-item-text");
+    const identifier = (badge === null || badge === void 0 ? void 0 : (_badge$textContent = badge.textContent) === null || _badge$textContent === void 0 ? void 0 : _badge$textContent.trim()) ?? "";
+    // Prefer the explicit text element. For plain (non-card) citation anchors
+    // (no badge), fall back to the title or the anchor's own text. When a
+    // badge is present but no text element, avoid using anchor.textContent
+    // since it would duplicate the identifier.
+    let text = (textEl === null || textEl === void 0 ? void 0 : (_textEl$textContent = textEl.textContent) === null || _textEl$textContent === void 0 ? void 0 : _textEl$textContent.trim()) ?? "";
+    if (!text && !badge) {
+      var _anchor$getAttribute, _anchor$textContent;
+      text = ((_anchor$getAttribute = anchor.getAttribute("title")) === null || _anchor$getAttribute === void 0 ? void 0 : _anchor$getAttribute.trim()) || ((_anchor$textContent = anchor.textContent) === null || _anchor$textContent === void 0 ? void 0 : _anchor$textContent.trim()) || "";
+    }
+    if (!identifier && !text) {
+      return;
+    }
+    const combinedLabel = identifier && text ? `${identifier}, ${text}` : identifier || text;
+
+    // Always (re-)apply aria-label if absent. Setting it again with the same
+    // value when it already matches is a no-op for the DOM; this keeps the
+    // patch idempotent so React re-renders that strip the attribute heal.
+    const existingLabel = anchor.getAttribute("aria-label");
+    if (!existingLabel) {
+      anchor.setAttribute("aria-label", combinedLabel);
+    }
+
+    // Explicitly mark the anchor as a single link so iOS VoiceOver treats
+    // the whole card as one element.
+    if (!anchor.getAttribute("role")) {
+      anchor.setAttribute("role", "link");
+    }
+
+    // Nuclear a11y lockdown of EVERY descendant of the anchor (not just
+    // known class names, because WebChat can render additional nodes).
+    // iOS VoiceOver is known to split focus on block-level descendants
+    // inside an <a>. Applying all of the following guarantees only the
+    // outer <a> is a selectable a11y / focus target:
+    //   - aria-hidden="true"      removes element from the a11y tree
+    //   - role="presentation"     strips any implicit semantic role
+    //   - inert                   removes element from focus + interaction
+    //   - tabindex="-1"           defensive (covers browsers without inert)
+    //   - title removed           iOS VoiceOver in WKWebView still surfaces
+    //                             elements with a `title` attribute as a
+    //                             separately swipeable item even when
+    //                             aria-hidden=true. WebChat's ItemBody sets
+    //                             title={text} on the inner link-text div,
+    //                             which is the root cause of the "two
+    //                             separate links" announcement on iOS.
+    //                             We move the title to a data-* attribute
+    //                             so any tooltip-like tooling can still
+    //                             read it, but iOS VO ignores it.
+    anchor.querySelectorAll("*").forEach(el => {
+      const inner = el;
+      if (inner.getAttribute("aria-hidden") !== "true") {
+        inner.setAttribute("aria-hidden", "true");
+      }
+      if (inner.getAttribute("role") !== "presentation") {
+        inner.setAttribute("role", "presentation");
+      }
+      if (inner.getAttribute("tabindex") !== "-1") {
+        inner.setAttribute("tabindex", "-1");
+      }
+      if (!inner.hasAttribute("inert")) {
+        inner.setAttribute("inert", "");
+      }
+      const innerTitle = inner.getAttribute("title");
+      if (innerTitle !== null) {
+        inner.removeAttribute("title");
+        if (!inner.dataset.ocwOriginalTitle) {
+          inner.dataset.ocwOriginalTitle = innerTitle;
+        }
+      }
+      if (inner.style.pointerEvents !== "none") {
+        inner.style.pointerEvents = "none";
+      }
+    });
+
+    // DOM-level full-bleed overlay. Inline styles are used so this works
+    // even when the widget renders inside a shadow DOM (where an
+    // injected <style> tag in document.head cannot reach). The overlay
+    // becomes the ONLY visible hit-test target for iOS Safari, so tapping
+    // anywhere on the card highlights the entire card instead of just the
+    // "1" badge or just the link text.
+    const anchorStyle = anchor.style;
+    if (!anchorStyle.position) {
+      anchorStyle.position = "relative";
+    }
+    if (!anchorStyle.display || anchorStyle.display === "inline") {
+      anchorStyle.display = "block";
+    }
+    const ownerDoc = anchor.ownerDocument;
+    const existingOverlay = anchor.querySelector(":scope > [data-ocw-citation-overlay='true']");
+    if (!existingOverlay && ownerDoc && typeof ownerDoc.createElement === "function") {
+      const overlay = ownerDoc.createElement("span");
+      overlay.setAttribute("aria-hidden", "true");
+      overlay.setAttribute("data-ocw-citation-overlay", "true");
+      overlay.style.cssText = ["position:absolute", "top:0", "left:0", "right:0", "bottom:0", "z-index:2", "background:transparent", "pointer-events:auto", "-webkit-tap-highlight-color:rgba(0,120,212,0.15)", "-webkit-touch-callout:none", "-webkit-user-select:none", "user-select:none", "cursor:pointer"].join(";");
+      anchor.appendChild(overlay);
+    }
+    anchor.dataset[PATCHED_MARKER] = "true";
+  });
+};
+exports.patchCitationAnchorsForA11y = patchCitationAnchorsForA11y;

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

@@ -32,6 +32,21 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
       const container = containerRef.current;
       if (!container) return;
 
+      // action-button-toggle / login-button-toggle: submit/login action buttons can be
+      // rendered with toggle-only ARIA that causes screen readers to announce them as
+      // switches instead of plain push buttons. Preserve Action.ToggleVisibility buttons,
+      // which own aria-controls and legitimately expose a pressed state.
+      const actionButtons = container.querySelectorAll(".ac-actionSet button.ac-pushButton:not([aria-controls])");
+      actionButtons.forEach(btn => {
+        if (btn.hasAttribute("aria-pressed")) {
+          btn.removeAttribute("aria-pressed");
+        }
+        const role = btn.getAttribute("role");
+        if (role === "switch") {
+          btn.removeAttribute("role");
+        }
+      });
+
       // Find all radio inputs inside the adaptive card
       const radios = container.querySelectorAll("input[type='radio']");
       if (radios.length === 0) return;

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

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

package/lib/esm/components/livechatwidget/common/createMarkdown.js

@@ -36,10 +36,8 @@ export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineM
 
   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
@@ -74,16 +72,109 @@ export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineM
       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/esm/components/postchatloadingpanestateful/PostChatLoadingPaneStateful.js

@@ -1,5 +1,5 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createTimer, findAllFocusableElement } from "../../common/utils";
 import { LoadingPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
@@ -7,13 +7,22 @@ import { defaultGeneralPostChatLoadingPaneStyleProps } from "./common/defaultgen
 import useChatContextStore from "../../hooks/useChatContextStore";
 let uiTimer;
 export 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] = useState("");
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.UXPostChatLoadingPaneStart
     });
   }, []);
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      setAnnouncedSubtitleText(subtitleText);
+    }, 0);
+    return () => window.clearTimeout(timeout);
+  }, [subtitleText]);
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
@@ -27,8 +36,11 @@ export 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/esm/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.js

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

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

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

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

@@ -25,6 +25,7 @@ import { shouldLoadPersistentChatHistory } from "../livechatwidget/common/liveCh
 import { useChatContextStore } from "../..";
 import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
 import usePersistentChatHistory from "./hooks/usePersistentChatHistory";
+import { patchCitationAnchorsForA11y } from "./common/utils/citationA11y";
 let uiTimer;
 const broadcastChannelMessageEvent = "message";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -146,6 +147,56 @@ export 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.
+  useEffect(() => {
+    const webChatRoot = document.getElementById("ms_lcw_webchat_root");
+    if (!webChatRoot) {
+      return;
+    }
+    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;
+              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) {
+                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) {
+            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",

package/lib/esm/components/webchatcontainerstateful/common/utils/citationA11y.js

@@ -0,0 +1,188 @@
+// Accessibility helper: Merges WebChat's citation card number badge and link
+// text into a single focusable element.
+//
+// WebChat's LinkDefinitionItem renders an <a> containing a badge <div> (number)
+// and a text <div> (title). On iOS VoiceOver, these block-level descendants are
+// announced as two separate focusable links (e.g. "1, link" and
+// "Assessment of eligibility..., link"). Setting a combined aria-label on the
+// anchor and hiding inner descendants from the accessibility tree ensures the
+// whole card is announced as one link.
+
+const CITATION_ANCHOR_SELECTOR = "a.webchat__link-definitions__list-item-box";
+const PATCHED_MARKER = "ocwCitationA11yPatched";
+const STYLE_TAG_ID = "ocw-citation-a11y-styles";
+
+// Global CSS injected once per document. Neutralizes iOS Safari's per-inner-
+// element tap highlight / selection / focus rectangles that otherwise make
+// the "1" badge and the link text appear as separate selectable areas even
+// though they are inside a single <a>.
+// Strategy:
+//  - Make the anchor a block-level positioning parent.
+//  - Add a transparent ::after pseudo-element that covers the entire anchor.
+//    iOS Safari hit-tests that overlay as a SINGLE region, so the tap
+//    highlight / selection rectangle always covers the whole card instead
+//    of just the "1" badge or just the link text.
+//  - Make every descendant transparent to pointer / focus, so they can never
+//    become a standalone tap target.
+const STYLE_RULES = `
+a.webchat__link-definitions__list-item-box {
+    position: relative;
+    display: block;
+    isolation: isolate;
+    -webkit-tap-highlight-color: rgba(0, 120, 212, 0.15);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+}
+a.webchat__link-definitions__list-item-box::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    background: transparent;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: rgba(0, 120, 212, 0.15);
+}
+a.webchat__link-definitions__list-item-box * {
+    pointer-events: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    outline: none;
+    text-decoration: inherit;
+    cursor: inherit;
+}
+`;
+const ensureStyleInjected = doc => {
+  if (!doc || typeof doc.getElementById !== "function" || doc.getElementById(STYLE_TAG_ID)) {
+    return;
+  }
+  const style = doc.createElement("style");
+  style.id = STYLE_TAG_ID;
+  style.textContent = STYLE_RULES;
+  (doc.head || doc.documentElement).appendChild(style);
+};
+export const patchCitationAnchorsForA11y = root => {
+  var _defaultView;
+  if (!root || typeof root.querySelectorAll !== "function") {
+    return;
+  }
+
+  // Inject global CSS once per document. This covers every citation anchor
+  // regardless of whether our per-node patch has run on it yet.
+  const rootNode = root;
+  const doc = rootNode.ownerDocument ?? ((_defaultView = root.defaultView) === null || _defaultView === void 0 ? void 0 : _defaultView.document) ?? root ?? (typeof document !== "undefined" ? document : null);
+  if (doc && typeof doc.createElement === "function") {
+    ensureStyleInjected(doc);
+  }
+
+  // Also include the root itself when it matches — calls from MutationObserver
+  // pass the anchor element directly, which querySelectorAll wouldn't return.
+  const matched = new Set();
+  if (typeof root.matches === "function" && root.matches(CITATION_ANCHOR_SELECTOR)) {
+    matched.add(root);
+  }
+  root.querySelectorAll(CITATION_ANCHOR_SELECTOR).forEach(n => {
+    matched.add(n);
+  });
+  matched.forEach(anchor => {
+    var _badge$textContent, _textEl$textContent;
+    const badge = anchor.querySelector(".webchat__link-definitions__badge");
+    const textEl = anchor.querySelector(".webchat__link-definitions__list-item-text");
+    const identifier = (badge === null || badge === void 0 ? void 0 : (_badge$textContent = badge.textContent) === null || _badge$textContent === void 0 ? void 0 : _badge$textContent.trim()) ?? "";
+    // Prefer the explicit text element. For plain (non-card) citation anchors
+    // (no badge), fall back to the title or the anchor's own text. When a
+    // badge is present but no text element, avoid using anchor.textContent
+    // since it would duplicate the identifier.
+    let text = (textEl === null || textEl === void 0 ? void 0 : (_textEl$textContent = textEl.textContent) === null || _textEl$textContent === void 0 ? void 0 : _textEl$textContent.trim()) ?? "";
+    if (!text && !badge) {
+      var _anchor$getAttribute, _anchor$textContent;
+      text = ((_anchor$getAttribute = anchor.getAttribute("title")) === null || _anchor$getAttribute === void 0 ? void 0 : _anchor$getAttribute.trim()) || ((_anchor$textContent = anchor.textContent) === null || _anchor$textContent === void 0 ? void 0 : _anchor$textContent.trim()) || "";
+    }
+    if (!identifier && !text) {
+      return;
+    }
+    const combinedLabel = identifier && text ? `${identifier}, ${text}` : identifier || text;
+
+    // Always (re-)apply aria-label if absent. Setting it again with the same
+    // value when it already matches is a no-op for the DOM; this keeps the
+    // patch idempotent so React re-renders that strip the attribute heal.
+    const existingLabel = anchor.getAttribute("aria-label");
+    if (!existingLabel) {
+      anchor.setAttribute("aria-label", combinedLabel);
+    }
+
+    // Explicitly mark the anchor as a single link so iOS VoiceOver treats
+    // the whole card as one element.
+    if (!anchor.getAttribute("role")) {
+      anchor.setAttribute("role", "link");
+    }
+
+    // Nuclear a11y lockdown of EVERY descendant of the anchor (not just
+    // known class names, because WebChat can render additional nodes).
+    // iOS VoiceOver is known to split focus on block-level descendants
+    // inside an <a>. Applying all of the following guarantees only the
+    // outer <a> is a selectable a11y / focus target:
+    //   - aria-hidden="true"      removes element from the a11y tree
+    //   - role="presentation"     strips any implicit semantic role
+    //   - inert                   removes element from focus + interaction
+    //   - tabindex="-1"           defensive (covers browsers without inert)
+    //   - title removed           iOS VoiceOver in WKWebView still surfaces
+    //                             elements with a `title` attribute as a
+    //                             separately swipeable item even when
+    //                             aria-hidden=true. WebChat's ItemBody sets
+    //                             title={text} on the inner link-text div,
+    //                             which is the root cause of the "two
+    //                             separate links" announcement on iOS.
+    //                             We move the title to a data-* attribute
+    //                             so any tooltip-like tooling can still
+    //                             read it, but iOS VO ignores it.
+    anchor.querySelectorAll("*").forEach(el => {
+      const inner = el;
+      if (inner.getAttribute("aria-hidden") !== "true") {
+        inner.setAttribute("aria-hidden", "true");
+      }
+      if (inner.getAttribute("role") !== "presentation") {
+        inner.setAttribute("role", "presentation");
+      }
+      if (inner.getAttribute("tabindex") !== "-1") {
+        inner.setAttribute("tabindex", "-1");
+      }
+      if (!inner.hasAttribute("inert")) {
+        inner.setAttribute("inert", "");
+      }
+      const innerTitle = inner.getAttribute("title");
+      if (innerTitle !== null) {
+        inner.removeAttribute("title");
+        if (!inner.dataset.ocwOriginalTitle) {
+          inner.dataset.ocwOriginalTitle = innerTitle;
+        }
+      }
+      if (inner.style.pointerEvents !== "none") {
+        inner.style.pointerEvents = "none";
+      }
+    });
+
+    // DOM-level full-bleed overlay. Inline styles are used so this works
+    // even when the widget renders inside a shadow DOM (where an
+    // injected <style> tag in document.head cannot reach). The overlay
+    // becomes the ONLY visible hit-test target for iOS Safari, so tapping
+    // anywhere on the card highlights the entire card instead of just the
+    // "1" badge or just the link text.
+    const anchorStyle = anchor.style;
+    if (!anchorStyle.position) {
+      anchorStyle.position = "relative";
+    }
+    if (!anchorStyle.display || anchorStyle.display === "inline") {
+      anchorStyle.display = "block";
+    }
+    const ownerDoc = anchor.ownerDocument;
+    const existingOverlay = anchor.querySelector(":scope > [data-ocw-citation-overlay='true']");
+    if (!existingOverlay && ownerDoc && typeof ownerDoc.createElement === "function") {
+      const overlay = ownerDoc.createElement("span");
+      overlay.setAttribute("aria-hidden", "true");
+      overlay.setAttribute("data-ocw-citation-overlay", "true");
+      overlay.style.cssText = ["position:absolute", "top:0", "left:0", "right:0", "bottom:0", "z-index:2", "background:transparent", "pointer-events:auto", "-webkit-tap-highlight-color:rgba(0,120,212,0.15)", "-webkit-touch-callout:none", "-webkit-user-select:none", "user-select:none", "cursor:pointer"].join(";");
+      anchor.appendChild(overlay);
+    }
+    anchor.dataset[PATCHED_MARKER] = "true";
+  });
+};

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

@@ -25,6 +25,21 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
       const container = containerRef.current;
       if (!container) return;
 
+      // action-button-toggle / login-button-toggle: submit/login action buttons can be
+      // rendered with toggle-only ARIA that causes screen readers to announce them as
+      // switches instead of plain push buttons. Preserve Action.ToggleVisibility buttons,
+      // which own aria-controls and legitimately expose a pressed state.
+      const actionButtons = container.querySelectorAll(".ac-actionSet button.ac-pushButton:not([aria-controls])");
+      actionButtons.forEach(btn => {
+        if (btn.hasAttribute("aria-pressed")) {
+          btn.removeAttribute("aria-pressed");
+        }
+        const role = btn.getAttribute("role");
+        if (role === "switch") {
+          btn.removeAttribute("role");
+        }
+      });
+
       // Find all radio inputs inside the adaptive card
       const radios = container.querySelectorAll("input[type='radio']");
       if (radios.length === 0) return;

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

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

package/lib/types/components/webchatcontainerstateful/common/utils/citationA11y.d.ts

@@ -0,0 +1 @@
+export declare const patchCitationAnchorsForA11y: (root: ParentNode) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-widget",
-  "version": "1.8.4-main.9edfa7a",
+  "version": "1.8.4-main.a37560d",
   "description": "Microsoft Omnichannel Chat Widget",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",
@@ -84,7 +84,7 @@
     "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "storybook-addon-playwright": "^4.9.2",
-    "swiper": "^9.0.5",
+    "swiper": "^12.1.2",
     "terser-webpack-plugin": "^4.2.3",
     "thread-loader": "^2.1.3",
     "ts-loader": "^9.2.6",
@@ -172,7 +172,7 @@
     "**/lodash": "4.17.23",
     "**/@babel/runtime-corejs3": "^7.29.0",
     "**/brace-expansion": "2.0.3",
-    "**/swiper": "9.4.1"
+    "**/swiper": "12.1.2"
   },
   "jest": {
     "verbose": true,