@microsoft/omnichannel-chat-widget 2.0.1-main.6ca1911 → 2.0.1-main.74b9796

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initWebChatComposer = void 0;
+exports.initWebChatComposer = exports.createScreenReaderMarkdownRenderer = void 0;
 var _Constants = require("../../../common/Constants");
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
 var _utils = require("../../../common/utils");
@@ -20,6 +20,7 @@ var _attachmentSentAnnouncementMiddleware = _interopRequireDefault(require("../.
 var _channelDataMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/channelDataMiddleware"));
 var _activityMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware");
 var _activityStatusMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware");
+var _attachmentForScreenReaderMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentForScreenReaderMiddleware");
 var _attachmentMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware");
 var _attachmentUploadValidatorMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware"));
 var _avatarMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware");
@@ -48,7 +49,34 @@ var _htmlTextMiddleware = _interopRequireDefault(require("../../webchatcontainer
 var _preProcessingMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/preProcessingMiddleware"));
 var _sanitizationMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const markdownSanitizeConfig = {
+  FORBID_TAGS: ["form", "button", "script", "div", "input"],
+  FORBID_ATTR: ["action"],
+  ADD_ATTR: ["target"]
+};
+
+/**
+ * Renders Markdown for the screen reader text of Adaptive Cards, from the same pieces as the visible card:
+ * the host renderMarkdown when set, the hyperlink text override, and the same sanitization.
+ * Markdown is always formatted, also when the widget shows Markdown unformatted, so that screen readers do not read the syntax.
+ * Styles are removed with their content because the card does not show them.
+ */
+const createScreenReaderMarkdownRenderer = webChatContainerProps => {
+  var _webChatContainerProp;
+  const hostRenderMarkdown = webChatContainerProps === null || webChatContainerProps === void 0 || (_webChatContainerProp = webChatContainerProps.webChatProps) === null || _webChatContainerProp === void 0 ? void 0 : _webChatContainerProp.renderMarkdown;
+  const markdown = (0, _createMarkdown.createMarkdown)(false, (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.disableNewLineMarkdownSupport) ?? _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.disableNewLineMarkdownSupport, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.opensMarkdownLinksInSameTab);
+  const hyperlinkTextOverrideRenderer = new _HyperlinkTextOverrideRenderer.default((webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.hyperlinkTextOverride) ?? _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.hyperlinkTextOverride);
+  return text => {
+    const html = hostRenderMarkdown ? hostRenderMarkdown(text) : markdown.render(text);
+    return _dompurify.default.sanitize(hyperlinkTextOverrideRenderer.render(html), {
+      ...markdownSanitizeConfig,
+      FORBID_TAGS: [...markdownSanitizeConfig.FORBID_TAGS, "style"]
+    });
+  };
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+exports.createScreenReaderMarkdownRenderer = createScreenReaderMarkdownRenderer;
 const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) => {
   var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _state$domainStates$l4, _props$webChatContain0, _state$domainStates$r, _state$domainStates$r2, _props$webChatContain1, _state$domainStates$r3, _props$webChatContain10, _state$domainStates$l5, _props$webChatContain11, _props$webChatContain12, _state$domainStates$r4, _state$domainStates$r5, _props$webChatContain13, _defaultWebChatContai, _props$webChatContain14, _defaultWebChatContai2, _props$webChatContain15, _props$webChatContain16, _props$webChatContain17;
   // Add a hook to make all links open a new window
@@ -154,12 +182,7 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
     });
 
     // EXISTING sanitization (continues to work as before)
-    const config = {
-      FORBID_TAGS: ["form", "button", "script", "div", "input"],
-      FORBID_ATTR: ["action"],
-      ADD_ATTR: ["target"]
-    };
-    text = _dompurify.default.sanitize(text, config);
+    text = _dompurify.default.sanitize(text, markdownSanitizeConfig);
 
     // MONITOR-ONLY: Test what the stricter allowlist would remove (Phase 1)
     // This does NOT modify the text, only logs telemetry
@@ -363,6 +386,7 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
     store: webChatStore,
     activityMiddleware: (_props$webChatContain0 = props.webChatContainerProps) !== null && _props$webChatContain0 !== void 0 && (_props$webChatContain0 = _props$webChatContain0.renderingMiddlewareProps) !== null && _props$webChatContain0 !== void 0 && _props$webChatContain0.disableActivityMiddleware ? undefined : (0, _activityMiddleware.createActivityMiddleware)(renderMarkdown, (_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.systemMessageStyleProps, (_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.userMessageStyleProps, localizedTexts),
     attachmentMiddleware: (_props$webChatContain1 = props.webChatContainerProps) !== null && _props$webChatContain1 !== void 0 && (_props$webChatContain1 = _props$webChatContain1.renderingMiddlewareProps) !== null && _props$webChatContain1 !== void 0 && _props$webChatContain1.disableAttachmentMiddleware ? undefined : (0, _attachmentMiddleware.createAttachmentMiddleware)(((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 || (_state$domainStates$r3 = _state$domainStates$r3.attachmentProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.enableInlinePlaying) ?? _defaultAttachmentProps.defaultAttachmentProps.enableInlinePlaying),
+    attachmentForScreenReaderMiddleware: (0, _attachmentForScreenReaderMiddleware.createAttachmentForScreenReaderMiddleware)(createScreenReaderMarkdownRenderer(props.webChatContainerProps)),
     activityStatusMiddleware: (_props$webChatContain10 = props.webChatContainerProps) !== null && _props$webChatContain10 !== void 0 && (_props$webChatContain10 = _props$webChatContain10.renderingMiddlewareProps) !== null && _props$webChatContain10 !== void 0 && _props$webChatContain10.disableActivityStatusMiddleware ? undefined : (0, _activityStatusMiddleware.createActivityStatusMiddleware)((0, _omnichannelChatSdk.getLocaleStringFromId)((_state$domainStates$l5 = state.domainStates.liveChatConfig) === null || _state$domainStates$l5 === void 0 || (_state$domainStates$l5 = _state$domainStates$l5.ChatWidgetLanguage) === null || _state$domainStates$l5 === void 0 ? void 0 : _state$domainStates$l5.msdyn_localeid)),
     toastMiddleware: (_props$webChatContain11 = props.webChatContainerProps) !== null && _props$webChatContain11 !== void 0 && (_props$webChatContain11 = _props$webChatContain11.renderingMiddlewareProps) !== null && _props$webChatContain11 !== void 0 && _props$webChatContain11.disableToastMiddleware ? undefined : (0, _toastMiddleware.createToastMiddleware)(props.notificationPaneProps, endChat),
     renderMarkdown,

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

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAdaptiveCardSpeak = exports.createAttachmentForScreenReaderMiddleware = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Constants = require("../../../../../common/Constants");
+var _botframeworkWebchat = require("botframework-webchat");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /* eslint-disable @typescript-eslint/no-explicit-any */ /******
+ * AttachmentForScreenReaderMiddleware
+ *
+ * Web Chat reads an Adaptive Card to screen readers only from the card's `speak` property.
+ * A card without `speak` is announced as "A card" with no content.
+ * This middleware sets `speak` from the visible text of the card, then lets Web Chat render it as usual.
+ ******/
+const useAdaptiveCardsPackage = _botframeworkWebchat.hooks.useAdaptiveCardsPackage,
+  useStyleOptions = _botframeworkWebchat.hooks.useStyleOptions;
+const ADAPTIVE_CARD_CONTENT_TYPE = "application/vnd.microsoft.card.adaptive";
+const HTML_BLOCK_END = /<\/(p|li|h[1-6]|div|tr|td|th|blockquote|pre)>|<br\s*\/?>/gi;
+// The "opens in a new window" icon of each link is left out: it describes the link target, not the content of the message.
+const htmlToText = html => {
+  const body = new DOMParser().parseFromString(html.replace(HTML_BLOCK_END, "$& "), "text/html").body;
+  body.querySelectorAll(`script, style, template, img.${_Constants.Constants.OpenLinkIconCssClass}`).forEach(element => element.remove());
+  body.querySelectorAll("img").forEach(image => image.replaceWith(` ${image.getAttribute("alt") ?? ""} `));
+  return (body.textContent ?? "").replace(/\s+/g, " ").trim();
+};
+
+// Renders the element as the visible card does: Adaptive Cards formats {{DATE()}} and {{TIME()}}, then the Markdown is rendered.
+// Web Chat sets the static Markdown handler before each visible render, and this restores the previous handler after rendering.
+const getRenderedText = (element, AdaptiveCard, renderMarkdownAsHTML) => {
+  const previousOnProcessMarkdown = AdaptiveCard.onProcessMarkdown;
+  try {
+    AdaptiveCard.onProcessMarkdown = (text, result) => {
+      result.outputHtml = renderMarkdownAsHTML(text);
+      result.didProcess = true;
+    };
+    const renderedElement = element.render();
+    return renderedElement ? htmlToText(renderedElement.outerHTML) : "";
+  } catch {
+    var _element$asString;
+    return ((_element$asString = element.asString) === null || _element$asString === void 0 ? void 0 : _element$asString.call(element)) ?? "";
+  } finally {
+    AdaptiveCard.onProcessMarkdown = previousOnProcessMarkdown;
+  }
+};
+
+// Collects the visible text of the card in document order, after the parser has applied element fallbacks.
+// Inputs and actions are not collected because Web Chat already lists them after the card text.
+const getAdaptiveCardSpeak = (content, adaptiveCardsPackage, renderMarkdownAsHTML, adaptiveCardsParserMaxVersion) => {
+  const AdaptiveCard = adaptiveCardsPackage.AdaptiveCard,
+    FactSet = adaptiveCardsPackage.FactSet,
+    Image = adaptiveCardsPackage.Image,
+    RichTextBlock = adaptiveCardsPackage.RichTextBlock,
+    SerializationContext = adaptiveCardsPackage.SerializationContext,
+    TextBlock = adaptiveCardsPackage.TextBlock,
+    Version = adaptiveCardsPackage.Version;
+  const maxVersion = adaptiveCardsParserMaxVersion ? Version.parse(adaptiveCardsParserMaxVersion, new SerializationContext()) : undefined;
+  const card = new AdaptiveCard();
+  const texts = [];
+  card.parse(content, new SerializationContext(maxVersion !== null && maxVersion !== void 0 && maxVersion.isValid ? maxVersion : undefined));
+  const getFactText = (factSet, text) => {
+    const textBlock = new TextBlock(text);
+    textBlock.setParent(factSet);
+    return getRenderedText(textBlock, AdaptiveCard, renderMarkdownAsHTML);
+  };
+  const walk = element => {
+    if (!(element !== null && element !== void 0 && element.isVisible)) {
+      return;
+    }
+    if (element instanceof TextBlock || element instanceof RichTextBlock) {
+      texts.push(getRenderedText(element, AdaptiveCard, renderMarkdownAsHTML));
+    } else if (element instanceof FactSet) {
+      element.facts.forEach(_ref => {
+        let name = _ref.name,
+          value = _ref.value;
+        texts.push([name, value].map(text => text ? getFactText(element, text) : "").filter(Boolean).join(": "));
+      });
+    } else if (element instanceof Image) {
+      texts.push(element.altText);
+    }
+    if (element.getItemAt && element.getItemCount) {
+      for (let index = 0, count = element.getItemCount(); index < count; index++) {
+        walk(element.getItemAt(index));
+      }
+    }
+  };
+  walk(card);
+  return texts.filter(text => typeof text === "string" && text).join(" ").replace(/\s+/g, " ").trim();
+};
+exports.getAdaptiveCardSpeak = getAdaptiveCardSpeak;
+const AdaptiveCardForScreenReader = _ref2 => {
+  let args = _ref2.args,
+    next = _ref2.next,
+    renderMarkdownAsHTML = _ref2.renderMarkdownAsHTML;
+  const _useAdaptiveCardsPack = useAdaptiveCardsPackage(),
+    _useAdaptiveCardsPack2 = _slicedToArray(_useAdaptiveCardsPack, 1),
+    adaptiveCardsPackage = _useAdaptiveCardsPack2[0];
+  const _useStyleOptions = useStyleOptions(),
+    _useStyleOptions2 = _slicedToArray(_useStyleOptions, 1),
+    adaptiveCardsParserMaxVersion = _useStyleOptions2[0].adaptiveCardsParserMaxVersion;
+  const _args = _slicedToArray(args, 1),
+    options = _args[0];
+  const attachment = options.attachment;
+
+  // The widget creates a new Markdown renderer on each render with the same settings, so the text is computed once for each attachment.
+  const contentWithSpeak = (0, _react.useMemo)(() => {
+    try {
+      const content = typeof attachment.content === "string" ? JSON.parse(attachment.content) : attachment.content;
+      if (!content || typeof content !== "object" || content.speak) {
+        return undefined;
+      }
+      const speak = getAdaptiveCardSpeak(content, adaptiveCardsPackage, renderMarkdownAsHTML, adaptiveCardsParserMaxVersion);
+      return speak ? {
+        ...content,
+        speak
+      } : undefined;
+    } catch {
+      return undefined;
+    }
+  }, [adaptiveCardsPackage, adaptiveCardsParserMaxVersion, attachment]);
+  const render = contentWithSpeak ? next({
+    ...options,
+    attachment: {
+      ...attachment,
+      content: contentWithSpeak
+    }
+  }, ...args.slice(1)) : next(...args);
+  return typeof render === "function" ? render() : null;
+};
+const createAttachmentForScreenReaderMiddleware = renderMarkdownAsHTML => {
+  const attachmentForScreenReaderMiddleware = () => next => function () {
+    var _args$;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    const attachment = (_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.attachment;
+
+    // Web Chat renders nothing for a card without content, so it is left to Web Chat.
+    if ((attachment === null || attachment === void 0 ? void 0 : attachment.contentType) !== ADAPTIVE_CARD_CONTENT_TYPE || !attachment.content) {
+      return next(...args);
+    }
+
+    // eslint-disable-next-line react/display-name
+    return () => /*#__PURE__*/_react.default.createElement(AdaptiveCardForScreenReader, {
+      args: args,
+      next: next,
+      renderMarkdownAsHTML: renderMarkdownAsHTML
+    });
+  };
+  return attachmentForScreenReaderMiddleware;
+};
+exports.createAttachmentForScreenReaderMiddleware = createAttachmentForScreenReaderMiddleware;

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

@@ -15,6 +15,7 @@ import createAttachmentSentAnnouncementMiddleware from "../../webchatcontainerst
 import channelDataMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/channelDataMiddleware";
 import { createActivityMiddleware } from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware";
 import { createActivityStatusMiddleware } from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware";
+import { createAttachmentForScreenReaderMiddleware } from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentForScreenReaderMiddleware";
 import { createAttachmentMiddleware } from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware";
 import createAttachmentUploadValidatorMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware";
 import { createAvatarMiddleware } from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware";
@@ -42,6 +43,31 @@ import htmlPlayerMiddleware from "../../webchatcontainerstateful/webchatcontroll
 import htmlTextMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/htmlTextMiddleware";
 import preProcessingMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/preProcessingMiddleware";
 import sanitizationMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware";
+const markdownSanitizeConfig = {
+  FORBID_TAGS: ["form", "button", "script", "div", "input"],
+  FORBID_ATTR: ["action"],
+  ADD_ATTR: ["target"]
+};
+
+/**
+ * Renders Markdown for the screen reader text of Adaptive Cards, from the same pieces as the visible card:
+ * the host renderMarkdown when set, the hyperlink text override, and the same sanitization.
+ * Markdown is always formatted, also when the widget shows Markdown unformatted, so that screen readers do not read the syntax.
+ * Styles are removed with their content because the card does not show them.
+ */
+export const createScreenReaderMarkdownRenderer = webChatContainerProps => {
+  var _webChatContainerProp;
+  const hostRenderMarkdown = webChatContainerProps === null || webChatContainerProps === void 0 || (_webChatContainerProp = webChatContainerProps.webChatProps) === null || _webChatContainerProp === void 0 ? void 0 : _webChatContainerProp.renderMarkdown;
+  const markdown = createMarkdown(false, (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.disableNewLineMarkdownSupport) ?? defaultWebChatContainerStatefulProps.disableNewLineMarkdownSupport, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.opensMarkdownLinksInSameTab);
+  const hyperlinkTextOverrideRenderer = new HyperlinkTextOverrideRenderer((webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.hyperlinkTextOverride) ?? defaultWebChatContainerStatefulProps.hyperlinkTextOverride);
+  return text => {
+    const html = hostRenderMarkdown ? hostRenderMarkdown(text) : markdown.render(text);
+    return DOMPurify.sanitize(hyperlinkTextOverrideRenderer.render(html), {
+      ...markdownSanitizeConfig,
+      FORBID_TAGS: [...markdownSanitizeConfig.FORBID_TAGS, "style"]
+    });
+  };
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) => {
@@ -149,12 +175,7 @@ export const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endCh
     });
 
     // EXISTING sanitization (continues to work as before)
-    const config = {
-      FORBID_TAGS: ["form", "button", "script", "div", "input"],
-      FORBID_ATTR: ["action"],
-      ADD_ATTR: ["target"]
-    };
-    text = DOMPurify.sanitize(text, config);
+    text = DOMPurify.sanitize(text, markdownSanitizeConfig);
 
     // MONITOR-ONLY: Test what the stricter allowlist would remove (Phase 1)
     // This does NOT modify the text, only logs telemetry
@@ -358,6 +379,7 @@ export const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endCh
     store: webChatStore,
     activityMiddleware: (_props$webChatContain0 = props.webChatContainerProps) !== null && _props$webChatContain0 !== void 0 && (_props$webChatContain0 = _props$webChatContain0.renderingMiddlewareProps) !== null && _props$webChatContain0 !== void 0 && _props$webChatContain0.disableActivityMiddleware ? undefined : createActivityMiddleware(renderMarkdown, (_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.systemMessageStyleProps, (_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.userMessageStyleProps, localizedTexts),
     attachmentMiddleware: (_props$webChatContain1 = props.webChatContainerProps) !== null && _props$webChatContain1 !== void 0 && (_props$webChatContain1 = _props$webChatContain1.renderingMiddlewareProps) !== null && _props$webChatContain1 !== void 0 && _props$webChatContain1.disableAttachmentMiddleware ? undefined : createAttachmentMiddleware(((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 || (_state$domainStates$r3 = _state$domainStates$r3.attachmentProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.enableInlinePlaying) ?? defaultAttachmentProps.enableInlinePlaying),
+    attachmentForScreenReaderMiddleware: createAttachmentForScreenReaderMiddleware(createScreenReaderMarkdownRenderer(props.webChatContainerProps)),
     activityStatusMiddleware: (_props$webChatContain10 = props.webChatContainerProps) !== null && _props$webChatContain10 !== void 0 && (_props$webChatContain10 = _props$webChatContain10.renderingMiddlewareProps) !== null && _props$webChatContain10 !== void 0 && _props$webChatContain10.disableActivityStatusMiddleware ? undefined : createActivityStatusMiddleware(getLocaleStringFromId((_state$domainStates$l5 = state.domainStates.liveChatConfig) === null || _state$domainStates$l5 === void 0 || (_state$domainStates$l5 = _state$domainStates$l5.ChatWidgetLanguage) === null || _state$domainStates$l5 === void 0 ? void 0 : _state$domainStates$l5.msdyn_localeid)),
     toastMiddleware: (_props$webChatContain11 = props.webChatContainerProps) !== null && _props$webChatContain11 !== void 0 && (_props$webChatContain11 = _props$webChatContain11.renderingMiddlewareProps) !== null && _props$webChatContain11 !== void 0 && _props$webChatContain11.disableToastMiddleware ? undefined : createToastMiddleware(props.notificationPaneProps, endChat),
     renderMarkdown,

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentForScreenReaderMiddleware.js

@@ -0,0 +1,153 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/******
+ * AttachmentForScreenReaderMiddleware
+ *
+ * Web Chat reads an Adaptive Card to screen readers only from the card's `speak` property.
+ * A card without `speak` is announced as "A card" with no content.
+ * This middleware sets `speak` from the visible text of the card, then lets Web Chat render it as usual.
+ ******/
+
+import React, { useMemo } from "react";
+import { Constants } from "../../../../../common/Constants";
+import { hooks } from "botframework-webchat";
+const useAdaptiveCardsPackage = hooks.useAdaptiveCardsPackage,
+  useStyleOptions = hooks.useStyleOptions;
+const ADAPTIVE_CARD_CONTENT_TYPE = "application/vnd.microsoft.card.adaptive";
+const HTML_BLOCK_END = /<\/(p|li|h[1-6]|div|tr|td|th|blockquote|pre)>|<br\s*\/?>/gi;
+// The "opens in a new window" icon of each link is left out: it describes the link target, not the content of the message.
+const htmlToText = html => {
+  const body = new DOMParser().parseFromString(html.replace(HTML_BLOCK_END, "$& "), "text/html").body;
+  body.querySelectorAll(`script, style, template, img.${Constants.OpenLinkIconCssClass}`).forEach(element => element.remove());
+  body.querySelectorAll("img").forEach(image => image.replaceWith(` ${image.getAttribute("alt") ?? ""} `));
+  return (body.textContent ?? "").replace(/\s+/g, " ").trim();
+};
+
+// Renders the element as the visible card does: Adaptive Cards formats {{DATE()}} and {{TIME()}}, then the Markdown is rendered.
+// Web Chat sets the static Markdown handler before each visible render, and this restores the previous handler after rendering.
+const getRenderedText = (element, AdaptiveCard, renderMarkdownAsHTML) => {
+  const previousOnProcessMarkdown = AdaptiveCard.onProcessMarkdown;
+  try {
+    AdaptiveCard.onProcessMarkdown = (text, result) => {
+      result.outputHtml = renderMarkdownAsHTML(text);
+      result.didProcess = true;
+    };
+    const renderedElement = element.render();
+    return renderedElement ? htmlToText(renderedElement.outerHTML) : "";
+  } catch {
+    var _element$asString;
+    return ((_element$asString = element.asString) === null || _element$asString === void 0 ? void 0 : _element$asString.call(element)) ?? "";
+  } finally {
+    AdaptiveCard.onProcessMarkdown = previousOnProcessMarkdown;
+  }
+};
+
+// Collects the visible text of the card in document order, after the parser has applied element fallbacks.
+// Inputs and actions are not collected because Web Chat already lists them after the card text.
+export const getAdaptiveCardSpeak = (content, adaptiveCardsPackage, renderMarkdownAsHTML, adaptiveCardsParserMaxVersion) => {
+  const AdaptiveCard = adaptiveCardsPackage.AdaptiveCard,
+    FactSet = adaptiveCardsPackage.FactSet,
+    Image = adaptiveCardsPackage.Image,
+    RichTextBlock = adaptiveCardsPackage.RichTextBlock,
+    SerializationContext = adaptiveCardsPackage.SerializationContext,
+    TextBlock = adaptiveCardsPackage.TextBlock,
+    Version = adaptiveCardsPackage.Version;
+  const maxVersion = adaptiveCardsParserMaxVersion ? Version.parse(adaptiveCardsParserMaxVersion, new SerializationContext()) : undefined;
+  const card = new AdaptiveCard();
+  const texts = [];
+  card.parse(content, new SerializationContext(maxVersion !== null && maxVersion !== void 0 && maxVersion.isValid ? maxVersion : undefined));
+  const getFactText = (factSet, text) => {
+    const textBlock = new TextBlock(text);
+    textBlock.setParent(factSet);
+    return getRenderedText(textBlock, AdaptiveCard, renderMarkdownAsHTML);
+  };
+  const walk = element => {
+    if (!(element !== null && element !== void 0 && element.isVisible)) {
+      return;
+    }
+    if (element instanceof TextBlock || element instanceof RichTextBlock) {
+      texts.push(getRenderedText(element, AdaptiveCard, renderMarkdownAsHTML));
+    } else if (element instanceof FactSet) {
+      element.facts.forEach(_ref => {
+        let name = _ref.name,
+          value = _ref.value;
+        texts.push([name, value].map(text => text ? getFactText(element, text) : "").filter(Boolean).join(": "));
+      });
+    } else if (element instanceof Image) {
+      texts.push(element.altText);
+    }
+    if (element.getItemAt && element.getItemCount) {
+      for (let index = 0, count = element.getItemCount(); index < count; index++) {
+        walk(element.getItemAt(index));
+      }
+    }
+  };
+  walk(card);
+  return texts.filter(text => typeof text === "string" && text).join(" ").replace(/\s+/g, " ").trim();
+};
+const AdaptiveCardForScreenReader = _ref2 => {
+  let args = _ref2.args,
+    next = _ref2.next,
+    renderMarkdownAsHTML = _ref2.renderMarkdownAsHTML;
+  const _useAdaptiveCardsPack = useAdaptiveCardsPackage(),
+    _useAdaptiveCardsPack2 = _slicedToArray(_useAdaptiveCardsPack, 1),
+    adaptiveCardsPackage = _useAdaptiveCardsPack2[0];
+  const _useStyleOptions = useStyleOptions(),
+    _useStyleOptions2 = _slicedToArray(_useStyleOptions, 1),
+    adaptiveCardsParserMaxVersion = _useStyleOptions2[0].adaptiveCardsParserMaxVersion;
+  const _args = _slicedToArray(args, 1),
+    options = _args[0];
+  const attachment = options.attachment;
+
+  // The widget creates a new Markdown renderer on each render with the same settings, so the text is computed once for each attachment.
+  const contentWithSpeak = useMemo(() => {
+    try {
+      const content = typeof attachment.content === "string" ? JSON.parse(attachment.content) : attachment.content;
+      if (!content || typeof content !== "object" || content.speak) {
+        return undefined;
+      }
+      const speak = getAdaptiveCardSpeak(content, adaptiveCardsPackage, renderMarkdownAsHTML, adaptiveCardsParserMaxVersion);
+      return speak ? {
+        ...content,
+        speak
+      } : undefined;
+    } catch {
+      return undefined;
+    }
+  }, [adaptiveCardsPackage, adaptiveCardsParserMaxVersion, attachment]);
+  const render = contentWithSpeak ? next({
+    ...options,
+    attachment: {
+      ...attachment,
+      content: contentWithSpeak
+    }
+  }, ...args.slice(1)) : next(...args);
+  return typeof render === "function" ? render() : null;
+};
+export const createAttachmentForScreenReaderMiddleware = renderMarkdownAsHTML => {
+  const attachmentForScreenReaderMiddleware = () => next => function () {
+    var _args$;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    const attachment = (_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.attachment;
+
+    // Web Chat renders nothing for a card without content, so it is left to Web Chat.
+    if ((attachment === null || attachment === void 0 ? void 0 : attachment.contentType) !== ADAPTIVE_CARD_CONTENT_TYPE || !attachment.content) {
+      return next(...args);
+    }
+
+    // eslint-disable-next-line react/display-name
+    return () => /*#__PURE__*/React.createElement(AdaptiveCardForScreenReader, {
+      args: args,
+      next: next,
+      renderMarkdownAsHTML: renderMarkdownAsHTML
+    });
+  };
+  return attachmentForScreenReaderMiddleware;
+};

package/lib/types/components/livechatwidget/common/initWebChatComposer.d.ts

@@ -4,4 +4,12 @@ import { ILiveChatWidgetAction } from "../../../contexts/common/ILiveChatWidgetA
 import { ILiveChatWidgetContext } from "../../../contexts/common/ILiveChatWidgetContext";
 import { ILiveChatWidgetProps } from "../interfaces/ILiveChatWidgetProps";
 import { IWebChatProps } from "../../webchatcontainerstateful/interfaces/IWebChatProps";
+import { IWebChatContainerStatefulProps } from "../../webchatcontainerstateful/interfaces/IWebChatContainerStatefulProps";
+/**
+ * Renders Markdown for the screen reader text of Adaptive Cards, from the same pieces as the visible card:
+ * the host renderMarkdown when set, the hyperlink text override, and the same sanitization.
+ * Markdown is always formatted, also when the widget shows Markdown unformatted, so that screen readers do not read the syntax.
+ * Styles are removed with their content because the card does not show them.
+ */
+export declare const createScreenReaderMarkdownRenderer: (webChatContainerProps?: IWebChatContainerStatefulProps) => (text: string) => string;
 export declare const initWebChatComposer: (props: ILiveChatWidgetProps, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>, facadeChatSDK: FacadeChatSDK, endChat: any) => IWebChatProps;

package/lib/types/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentForScreenReaderMiddleware.d.ts

@@ -0,0 +1,11 @@
+/******
+ * AttachmentForScreenReaderMiddleware
+ *
+ * Web Chat reads an Adaptive Card to screen readers only from the card's `speak` property.
+ * A card without `speak` is announced as "A card" with no content.
+ * This middleware sets `speak` from the visible text of the card, then lets Web Chat render it as usual.
+ ******/
+type RenderMarkdownAsHTML = (markdown: string) => string;
+export declare const getAdaptiveCardSpeak: (content: any, adaptiveCardsPackage: any, renderMarkdownAsHTML: RenderMarkdownAsHTML, adaptiveCardsParserMaxVersion?: string) => string;
+export declare const createAttachmentForScreenReaderMiddleware: (renderMarkdownAsHTML: RenderMarkdownAsHTML) => () => (next: any) => (...args: any[]) => any;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-widget",
-  "version": "2.0.1-main.6ca1911",
+  "version": "2.0.1-main.74b9796",
   "description": "Microsoft Omnichannel Chat Widget",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",