@microsoft/omnichannel-chat-widget 2.0.1-main.c997354 → 2.0.1-main.eaef039

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

@@ -67,7 +67,7 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
   // Initialize Web Chat's redux store
   let webChatStore = _WebChatStoreLoader.WebChatStoreLoader.store;
   if (!webChatStore) {
-    var _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _props$webChatContain7;
+    var _state$domainStates$l, _state$domainStates$l2, _props$controlProps, _state$domainStates$l3, _props$webChatContain7;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const addConversationalSurveyTagsCallback = action => {
       var _inMemoryState$appSta;
@@ -126,7 +126,7 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
     };
     webChatStore = (0, _botframeworkWebchat.createStore)({},
     //initial state
-    _preProcessingMiddleware.default, _attachmentProcessingMiddleware.default, (0, _attachmentUploadValidatorMiddleware.default)((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), _attachmentSentAnnouncementMiddleware.default, (0, _customEventMiddleware.default)(_omnichannelChatComponents.BroadcastService), (0, _queueOverflowHandlerMiddleware.createQueueOverflowMiddleware)(state, dispatch), (0, _channelDataMiddleware.default)(addConversationalSurveyTagsCallback), (0, _conversationEndMiddleware.default)(conversationEndCallback, startConversationalSurveyCallback, endConversationalSurveyCallback), (0, _dataMaskingMiddleware.default)((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), _messageTimestampMiddleware.createMessageTimeStampMiddleware, _messageSequenceIdOverrideMiddleware.createMessageSequenceIdOverrideMiddleware, (0, _citationsMiddleware.createCitationsMiddleware)(state, dispatch), _gifUploadMiddleware.default, _htmlPlayerMiddleware.default, (0, _htmlTextMiddleware.default)(honorsTargetInHTMLLinks), (0, _maxMessageSizeValidator.default)(localizedTexts), _sanitizationMiddleware.default, (0, _callActionMiddleware.default)(),
+    _preProcessingMiddleware.default, _attachmentProcessingMiddleware.default, (0, _attachmentUploadValidatorMiddleware.default)((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), (0, _attachmentSentAnnouncementMiddleware.default)(localizedTexts, ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) || "oc-lcw"), (0, _customEventMiddleware.default)(_omnichannelChatComponents.BroadcastService), (0, _queueOverflowHandlerMiddleware.createQueueOverflowMiddleware)(state, dispatch), (0, _channelDataMiddleware.default)(addConversationalSurveyTagsCallback), (0, _conversationEndMiddleware.default)(conversationEndCallback, startConversationalSurveyCallback, endConversationalSurveyCallback), (0, _dataMaskingMiddleware.default)((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), _messageTimestampMiddleware.createMessageTimeStampMiddleware, _messageSequenceIdOverrideMiddleware.createMessageSequenceIdOverrideMiddleware, (0, _citationsMiddleware.createCitationsMiddleware)(state, dispatch), _gifUploadMiddleware.default, _htmlPlayerMiddleware.default, (0, _htmlTextMiddleware.default)(honorsTargetInHTMLLinks), (0, _maxMessageSizeValidator.default)(localizedTexts), _sanitizationMiddleware.default, (0, _callActionMiddleware.default)(),
     // Pass a callback so middleware can push initials into React context for reactivity
     (0, _localizedStringsBotInitialsMiddleware.localizedStringsBotInitialsMiddleware)(initials => {
       dispatch({

package/lib/cjs/components/webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts.js

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

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

@@ -94,6 +94,19 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
         }
       });
 
+      // action-button-double-read: the adaptivecards renderer writes the action
+      // title to the button text, aria-label AND title. The title becomes the
+      // accessible description, so TalkBack reads the label twice ("Submit,
+      // button, Submit"). Drop the title only when it repeats the button name;
+      // a distinct title (an action tooltip) adds information and is kept.
+      container.querySelectorAll("button[title]").forEach(btn => {
+        const title = (btn.getAttribute("title") || "").trim();
+        const name = (btn.getAttribute("aria-label") ?? btn.textContent ?? "").trim();
+        if (title && title === name) {
+          btn.removeAttribute("title");
+        }
+      });
+
       // Find all radio inputs inside the adaptive card
       const radios = container.querySelectorAll("input[type='radio']");
       if (radios.length === 0) return;
@@ -175,7 +188,8 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
 
     // Use MutationObserver to patch after WebChat finishes rendering the card.
     // Also watch attribute changes on aria-hidden so we can re-apply if React
-    // reconciliation removes it from labels.
+    // reconciliation removes it from labels, and on title so a re-added
+    // duplicate button title is removed again.
     const observer = new MutationObserver(() => {
       patchRadioGroups();
     });
@@ -183,7 +197,7 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ["aria-hidden"]
+      attributeFilter: ["aria-hidden", "title"]
     });
 
     // Also run immediately in case the card is already rendered

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

@@ -3,31 +3,41 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getFileSentMessage = exports.default = exports.createAttachmentSentAnnouncementMiddleware = exports.ATTACHMENT_ANNOUNCEMENT_REGION_ID = void 0;
 var _IWebChatAction = require("../../../interfaces/IWebChatAction");
 var _WebChatActionType = require("../../enums/WebChatActionType");
 /******
  * AttachmentSentAnnouncementMiddleware
  *
  * When a file attachment is successfully sent, announces the result to
- * screen readers via an aria-live region so that assistive technology
- * users receive immediate feedback.
+ * screen readers so that assistive technology users receive immediate
+ * feedback ("File report.pdf sent").
+ *
+ * The announcement region lives inside the chat dialog. While the dialog is
+ * open it is aria-modal and its host siblings are aria-hidden, so screen
+ * readers (TalkBack, VoiceOver) ignore live regions outside it.
  ******/
 
-const ARIA_LIVE_REGION_ID = "oc-lcw-attachment-announcement";
+const ATTACHMENT_ANNOUNCEMENT_REGION_ID = exports.ATTACHMENT_ANNOUNCEMENT_REGION_ID = "oc-lcw-attachment-announcement";
+const DEFAULT_FILE_SENT_TEXT = "File {2} sent";
+const DEFAULT_FILES_SENT_TEXT = "{0} files sent";
+
+// Let the send-box focus shift settle before speaking, then keep the node
+// long enough for the screen reader to read it.
+const ANNOUNCE_DELAY_MS = 100;
+const ANNOUNCEMENT_LIFETIME_MS = 5000;
 
 /**
- * Ensures a visually-hidden aria-live region exists in the DOM for
- * announcing attachment upload results to screen readers.
+ * Ensures a visually-hidden aria-live region exists inside the chat dialog
+ * for announcing attachment upload results to screen readers.
  */
-const ensureAriaLiveRegion = () => {
-  let region = document.getElementById(ARIA_LIVE_REGION_ID);
+const ensureAriaLiveRegion = widgetElementId => {
+  const host = document.getElementById(widgetElementId) || document.body;
+  let region = document.getElementById(ATTACHMENT_ANNOUNCEMENT_REGION_ID);
   if (!region) {
     region = document.createElement("div");
-    region.id = ARIA_LIVE_REGION_ID;
+    region.id = ATTACHMENT_ANNOUNCEMENT_REGION_ID;
     region.setAttribute("aria-live", "polite");
-    region.setAttribute("role", "status");
-    region.setAttribute("aria-atomic", "true");
     // Visually hidden but available to screen readers
     Object.assign(region.style, {
       position: "absolute",
@@ -40,44 +50,62 @@ const ensureAriaLiveRegion = () => {
       whiteSpace: "nowrap",
       border: "0"
     });
-    const container = document.getElementById("oc-lcw-container");
-    (container || document.body).appendChild(region);
+  }
+  if (region.parentElement !== host) {
+    host.appendChild(region);
   }
   return region;
 };
 
 /**
- * Announces a message to screen readers by updating the aria-live region.
- * Clears it briefly first so repeated identical messages are still announced.
+ * Announces a message by appending a fresh node to the live region.
+ * TalkBack reliably speaks newly added nodes but often misses text changes
+ * on an existing node, so each announcement gets its own element.
  */
-const announce = message => {
-  const region = ensureAriaLiveRegion();
-  region.textContent = "";
-  // Small delay so the screen reader detects the content change
+const announce = (message, widgetElementId) => {
+  const region = ensureAriaLiveRegion(widgetElementId);
   setTimeout(() => {
-    region.textContent = message;
-  }, 100);
+    const node = document.createElement("div");
+    node.textContent = message;
+    region.appendChild(node);
+    setTimeout(() => node.remove(), ANNOUNCEMENT_LIFETIME_MS);
+  }, ANNOUNCE_DELAY_MS);
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const attachmentSentAnnouncementMiddleware = _ref => {
-  let dispatch = _ref.dispatch;
-  return next => action => {
-    if (!(0, _IWebChatAction.isWebChatAction)(action)) {
-      return next(action);
-    }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getFileSentMessage = (attachments, localizedTexts) => {
+  var _attachments$;
+  if (attachments.length > 1) {
+    // Replacer callbacks insert values literally; a string would treat "$&" or "$$" as patterns.
+    return ((localizedTexts === null || localizedTexts === void 0 ? void 0 : localizedTexts.MIDDLEWARE_BANNER_FILES_SENT) || DEFAULT_FILES_SENT_TEXT).replace("{0}", () => String(attachments.length));
+  }
+  const name = typeof ((_attachments$ = attachments[0]) === null || _attachments$ === void 0 ? void 0 : _attachments$.name) === "string" ? attachments[0].name.trim() : "";
+  return ((localizedTexts === null || localizedTexts === void 0 ? void 0 : localizedTexts.MIDDLEWARE_BANNER_FILE_SENT) || DEFAULT_FILE_SENT_TEXT).replace("{2}", () => name).replace(/\s{2,}/g, " ").trim();
+};
+exports.getFileSentMessage = getFileSentMessage;
+const createAttachmentSentAnnouncementMiddleware = function (localizedTexts) {
+  let widgetElementId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "oc-lcw";
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _ref => {
+      let dispatch = _ref.dispatch;
+      return next => action => {
+        if (!(0, _IWebChatAction.isWebChatAction)(action)) {
+          return next(action);
+        }
 
-    // Intercept successfully posted activities that contain attachments
-    if (action.type === _WebChatActionType.WebChatActionType.DIRECT_LINE_POST_ACTIVITY_FULFILLED) {
-      var _action$payload;
-      const attachments = (_action$payload = action.payload) === null || _action$payload === void 0 || (_action$payload = _action$payload.activity) === null || _action$payload === void 0 ? void 0 : _action$payload.attachments;
-      if (attachments && attachments.length > 0) {
-        const count = attachments.length;
-        const message = count === 1 ? "File sent" : `${count} files sent`;
-        announce(message);
-      }
+        // Intercept successfully posted activities that contain attachments
+        if (action.type === _WebChatActionType.WebChatActionType.DIRECT_LINE_POST_ACTIVITY_FULFILLED) {
+          var _action$payload;
+          const attachments = (_action$payload = action.payload) === null || _action$payload === void 0 || (_action$payload = _action$payload.activity) === null || _action$payload === void 0 ? void 0 : _action$payload.attachments;
+          if (attachments && attachments.length > 0) {
+            announce(getFileSentMessage(attachments, localizedTexts), widgetElementId);
+          }
+        }
+        return next(action);
+      };
     }
-    return next(action);
-  };
+  );
 };
-var _default = exports.default = attachmentSentAnnouncementMiddleware;
+exports.createAttachmentSentAnnouncementMiddleware = createAttachmentSentAnnouncementMiddleware;
+var _default = exports.default = createAttachmentSentAnnouncementMiddleware;

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

@@ -18,27 +18,6 @@ var _WebChatActionType = require("../../enums/WebChatActionType");
  ******/
 
 const MBtoBRatio = 1000000;
-const announceFileSent = message => {
-  // TalkBack on Android WebView reliably announces newly *appended*
-  // role="alert" nodes but often misses text-content updates on existing
-  // nodes. Wait 500ms for the send-box focus shift to settle, then inject
-  // a fresh alert element appended to document.body and remove it after 3s.
-  setTimeout(() => {
-    const el = document.createElement("div");
-    el.setAttribute("role", "alert");
-    el.setAttribute("aria-live", "assertive");
-    el.setAttribute("aria-atomic", "true");
-    el.style.cssText = "position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;";
-    el.textContent = message;
-    document.body.appendChild(el);
-    // Remove after TalkBack has had time to read it
-    setTimeout(() => {
-      if (el.parentNode) {
-        el.parentNode.removeChild(el);
-      }
-    }, 3000);
-  }, 500);
-};
 
 /*
 * If an attachment is invalid, delete this attachment from the attachments list
@@ -227,13 +206,7 @@ const createAttachmentUploadValidatorMiddleware = (allowedFileExtensions, maxFil
       var _payload$activity, _payload$activity2;
       const payload = action.payload;
       if (payload !== null && payload !== void 0 && payload.activity.attachments && payload.activity.attachments.length > 0 && (payload === null || payload === void 0 || (_payload$activity = payload.activity) === null || _payload$activity === void 0 || (_payload$activity = _payload$activity.attachments) === null || _payload$activity === void 0 ? void 0 : _payload$activity.length) === (payload === null || payload === void 0 || (_payload$activity2 = payload.activity) === null || _payload$activity2 === void 0 || (_payload$activity2 = _payload$activity2.channelData) === null || _payload$activity2 === void 0 || (_payload$activity2 = _payload$activity2.attachmentSizes) === null || _payload$activity2 === void 0 ? void 0 : _payload$activity2.length)) {
-        var _validatedAction$payl;
         const validatedAction = validateAttachment(action, allowedFileExtensions, maxFileSizeSupportedByDynamics, localizedTexts);
-
-        // Announce to screen readers that the file was sent when validation passes
-        if (((_validatedAction$payl = validatedAction.payload) === null || _validatedAction$payl === void 0 || (_validatedAction$payl = _validatedAction$payl.activity) === null || _validatedAction$payl === void 0 || (_validatedAction$payl = _validatedAction$payl.attachments) === null || _validatedAction$payl === void 0 ? void 0 : _validatedAction$payl.length) > 0) {
-          announceFileSent(localizedTexts.MIDDLEWARE_BANNER_FILE_SENT ?? "File sent successfully.");
-        }
         return next(validatedAction);
       }
     }

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

@@ -11,7 +11,7 @@ import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidge
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { WebChatStoreLoader } from "../../webchatcontainerstateful/webchatcontroller/WebChatStoreLoader";
 import attachmentProcessingMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentProcessingMiddleware";
-import attachmentSentAnnouncementMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentSentAnnouncementMiddleware";
+import createAttachmentSentAnnouncementMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentSentAnnouncementMiddleware";
 import channelDataMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/channelDataMiddleware";
 import { createActivityMiddleware } from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware";
 import { createActivityStatusMiddleware } from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware";
@@ -62,7 +62,7 @@ export const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endCh
   // Initialize Web Chat's redux store
   let webChatStore = WebChatStoreLoader.store;
   if (!webChatStore) {
-    var _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _props$webChatContain7;
+    var _state$domainStates$l, _state$domainStates$l2, _props$controlProps, _state$domainStates$l3, _props$webChatContain7;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const addConversationalSurveyTagsCallback = action => {
       var _inMemoryState$appSta;
@@ -121,7 +121,7 @@ export const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endCh
     };
     webChatStore = createStore({},
     //initial state
-    preProcessingMiddleware, attachmentProcessingMiddleware, createAttachmentUploadValidatorMiddleware((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), attachmentSentAnnouncementMiddleware, createCustomEventMiddleware(BroadcastService), createQueueOverflowMiddleware(state, dispatch), channelDataMiddleware(addConversationalSurveyTagsCallback), createConversationEndMiddleware(conversationEndCallback, startConversationalSurveyCallback, endConversationalSurveyCallback), createDataMaskingMiddleware((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), createMessageTimeStampMiddleware, createMessageSequenceIdOverrideMiddleware, createCitationsMiddleware(state, dispatch), gifUploadMiddleware, htmlPlayerMiddleware, htmlTextMiddleware(honorsTargetInHTMLLinks), createMaxMessageSizeValidator(localizedTexts), sanitizationMiddleware, createCallActionMiddleware(),
+    preProcessingMiddleware, attachmentProcessingMiddleware, createAttachmentUploadValidatorMiddleware((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), createAttachmentSentAnnouncementMiddleware(localizedTexts, ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) || "oc-lcw"), createCustomEventMiddleware(BroadcastService), createQueueOverflowMiddleware(state, dispatch), channelDataMiddleware(addConversationalSurveyTagsCallback), createConversationEndMiddleware(conversationEndCallback, startConversationalSurveyCallback, endConversationalSurveyCallback), createDataMaskingMiddleware((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), createMessageTimeStampMiddleware, createMessageSequenceIdOverrideMiddleware, createCitationsMiddleware(state, dispatch), gifUploadMiddleware, htmlPlayerMiddleware, htmlTextMiddleware(honorsTargetInHTMLLinks), createMaxMessageSizeValidator(localizedTexts), sanitizationMiddleware, createCallActionMiddleware(),
     // Pass a callback so middleware can push initials into React context for reactivity
     localizedStringsBotInitialsMiddleware(initials => {
       dispatch({

package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts.js

@@ -27,7 +27,8 @@ export const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat.",
   THIRD_PARTY_COOKIES_BLOCKED_ALERT_MESSAGE: "Allow sites to save/read cookies in browser settings. Reloading page starts a new chat.",
   MIDDLEWARE_BANNER_FILE_IS_MALICIOUS: "{0} has been blocked because the file may contain a malware.",
-  MIDDLEWARE_BANNER_FILE_SENT: "File sent successfully.",
+  MIDDLEWARE_BANNER_FILE_SENT: "File {2} sent",
+  MIDDLEWARE_BANNER_FILES_SENT: "{0} files sent",
   MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS: "Email will be sent after chat ends!",
   MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR: "Email {0} could not be saved, try again later.",
   MIDDLEWARE_SR_PREFIX_SUCCESS: "Success. ",

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

@@ -88,6 +88,19 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
         }
       });
 
+      // action-button-double-read: the adaptivecards renderer writes the action
+      // title to the button text, aria-label AND title. The title becomes the
+      // accessible description, so TalkBack reads the label twice ("Submit,
+      // button, Submit"). Drop the title only when it repeats the button name;
+      // a distinct title (an action tooltip) adds information and is kept.
+      container.querySelectorAll("button[title]").forEach(btn => {
+        const title = (btn.getAttribute("title") || "").trim();
+        const name = (btn.getAttribute("aria-label") ?? btn.textContent ?? "").trim();
+        if (title && title === name) {
+          btn.removeAttribute("title");
+        }
+      });
+
       // Find all radio inputs inside the adaptive card
       const radios = container.querySelectorAll("input[type='radio']");
       if (radios.length === 0) return;
@@ -169,7 +182,8 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
 
     // Use MutationObserver to patch after WebChat finishes rendering the card.
     // Also watch attribute changes on aria-hidden so we can re-apply if React
-    // reconciliation removes it from labels.
+    // reconciliation removes it from labels, and on title so a re-added
+    // duplicate button title is removed again.
     const observer = new MutationObserver(() => {
       patchRadioGroups();
     });
@@ -177,7 +191,7 @@ const AdaptiveCardAccessibilityWrapper = _ref => {
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ["aria-hidden"]
+      attributeFilter: ["aria-hidden", "title"]
     });
 
     // Also run immediately in case the card is already rendered

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

@@ -2,26 +2,36 @@
  * AttachmentSentAnnouncementMiddleware
  *
  * When a file attachment is successfully sent, announces the result to
- * screen readers via an aria-live region so that assistive technology
- * users receive immediate feedback.
+ * screen readers so that assistive technology users receive immediate
+ * feedback ("File report.pdf sent").
+ *
+ * The announcement region lives inside the chat dialog. While the dialog is
+ * open it is aria-modal and its host siblings are aria-hidden, so screen
+ * readers (TalkBack, VoiceOver) ignore live regions outside it.
  ******/
 
 import { isWebChatAction } from "../../../interfaces/IWebChatAction";
 import { WebChatActionType } from "../../enums/WebChatActionType";
-const ARIA_LIVE_REGION_ID = "oc-lcw-attachment-announcement";
+export const ATTACHMENT_ANNOUNCEMENT_REGION_ID = "oc-lcw-attachment-announcement";
+const DEFAULT_FILE_SENT_TEXT = "File {2} sent";
+const DEFAULT_FILES_SENT_TEXT = "{0} files sent";
+
+// Let the send-box focus shift settle before speaking, then keep the node
+// long enough for the screen reader to read it.
+const ANNOUNCE_DELAY_MS = 100;
+const ANNOUNCEMENT_LIFETIME_MS = 5000;
 
 /**
- * Ensures a visually-hidden aria-live region exists in the DOM for
- * announcing attachment upload results to screen readers.
+ * Ensures a visually-hidden aria-live region exists inside the chat dialog
+ * for announcing attachment upload results to screen readers.
  */
-const ensureAriaLiveRegion = () => {
-  let region = document.getElementById(ARIA_LIVE_REGION_ID);
+const ensureAriaLiveRegion = widgetElementId => {
+  const host = document.getElementById(widgetElementId) || document.body;
+  let region = document.getElementById(ATTACHMENT_ANNOUNCEMENT_REGION_ID);
   if (!region) {
     region = document.createElement("div");
-    region.id = ARIA_LIVE_REGION_ID;
+    region.id = ATTACHMENT_ANNOUNCEMENT_REGION_ID;
     region.setAttribute("aria-live", "polite");
-    region.setAttribute("role", "status");
-    region.setAttribute("aria-atomic", "true");
     // Visually hidden but available to screen readers
     Object.assign(region.style, {
       position: "absolute",
@@ -34,44 +44,60 @@ const ensureAriaLiveRegion = () => {
       whiteSpace: "nowrap",
       border: "0"
     });
-    const container = document.getElementById("oc-lcw-container");
-    (container || document.body).appendChild(region);
+  }
+  if (region.parentElement !== host) {
+    host.appendChild(region);
   }
   return region;
 };
 
 /**
- * Announces a message to screen readers by updating the aria-live region.
- * Clears it briefly first so repeated identical messages are still announced.
+ * Announces a message by appending a fresh node to the live region.
+ * TalkBack reliably speaks newly added nodes but often misses text changes
+ * on an existing node, so each announcement gets its own element.
  */
-const announce = message => {
-  const region = ensureAriaLiveRegion();
-  region.textContent = "";
-  // Small delay so the screen reader detects the content change
+const announce = (message, widgetElementId) => {
+  const region = ensureAriaLiveRegion(widgetElementId);
   setTimeout(() => {
-    region.textContent = message;
-  }, 100);
+    const node = document.createElement("div");
+    node.textContent = message;
+    region.appendChild(node);
+    setTimeout(() => node.remove(), ANNOUNCEMENT_LIFETIME_MS);
+  }, ANNOUNCE_DELAY_MS);
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const attachmentSentAnnouncementMiddleware = _ref => {
-  let dispatch = _ref.dispatch;
-  return next => action => {
-    if (!isWebChatAction(action)) {
-      return next(action);
-    }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getFileSentMessage = (attachments, localizedTexts) => {
+  var _attachments$;
+  if (attachments.length > 1) {
+    // Replacer callbacks insert values literally; a string would treat "$&" or "$$" as patterns.
+    return ((localizedTexts === null || localizedTexts === void 0 ? void 0 : localizedTexts.MIDDLEWARE_BANNER_FILES_SENT) || DEFAULT_FILES_SENT_TEXT).replace("{0}", () => String(attachments.length));
+  }
+  const name = typeof ((_attachments$ = attachments[0]) === null || _attachments$ === void 0 ? void 0 : _attachments$.name) === "string" ? attachments[0].name.trim() : "";
+  return ((localizedTexts === null || localizedTexts === void 0 ? void 0 : localizedTexts.MIDDLEWARE_BANNER_FILE_SENT) || DEFAULT_FILE_SENT_TEXT).replace("{2}", () => name).replace(/\s{2,}/g, " ").trim();
+};
+export const createAttachmentSentAnnouncementMiddleware = function (localizedTexts) {
+  let widgetElementId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "oc-lcw";
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _ref => {
+      let dispatch = _ref.dispatch;
+      return next => action => {
+        if (!isWebChatAction(action)) {
+          return next(action);
+        }
 
-    // Intercept successfully posted activities that contain attachments
-    if (action.type === WebChatActionType.DIRECT_LINE_POST_ACTIVITY_FULFILLED) {
-      var _action$payload;
-      const attachments = (_action$payload = action.payload) === null || _action$payload === void 0 || (_action$payload = _action$payload.activity) === null || _action$payload === void 0 ? void 0 : _action$payload.attachments;
-      if (attachments && attachments.length > 0) {
-        const count = attachments.length;
-        const message = count === 1 ? "File sent" : `${count} files sent`;
-        announce(message);
-      }
+        // Intercept successfully posted activities that contain attachments
+        if (action.type === WebChatActionType.DIRECT_LINE_POST_ACTIVITY_FULFILLED) {
+          var _action$payload;
+          const attachments = (_action$payload = action.payload) === null || _action$payload === void 0 || (_action$payload = _action$payload.activity) === null || _action$payload === void 0 ? void 0 : _action$payload.attachments;
+          if (attachments && attachments.length > 0) {
+            announce(getFileSentMessage(attachments, localizedTexts), widgetElementId);
+          }
+        }
+        return next(action);
+      };
     }
-    return next(action);
-  };
+  );
 };
-export default attachmentSentAnnouncementMiddleware;
+export default createAttachmentSentAnnouncementMiddleware;

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

@@ -12,27 +12,6 @@ import { NotificationScenarios } from "../../enums/NotificationScenarios";
 import { TelemetryHelper } from "../../../../../common/telemetry/TelemetryHelper";
 import { WebChatActionType } from "../../enums/WebChatActionType";
 const MBtoBRatio = 1000000;
-const announceFileSent = message => {
-  // TalkBack on Android WebView reliably announces newly *appended*
-  // role="alert" nodes but often misses text-content updates on existing
-  // nodes. Wait 500ms for the send-box focus shift to settle, then inject
-  // a fresh alert element appended to document.body and remove it after 3s.
-  setTimeout(() => {
-    const el = document.createElement("div");
-    el.setAttribute("role", "alert");
-    el.setAttribute("aria-live", "assertive");
-    el.setAttribute("aria-atomic", "true");
-    el.style.cssText = "position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;";
-    el.textContent = message;
-    document.body.appendChild(el);
-    // Remove after TalkBack has had time to read it
-    setTimeout(() => {
-      if (el.parentNode) {
-        el.parentNode.removeChild(el);
-      }
-    }, 3000);
-  }, 500);
-};
 
 /*
 * If an attachment is invalid, delete this attachment from the attachments list
@@ -221,13 +200,7 @@ const createAttachmentUploadValidatorMiddleware = (allowedFileExtensions, maxFil
       var _payload$activity, _payload$activity2;
       const payload = action.payload;
       if (payload !== null && payload !== void 0 && payload.activity.attachments && payload.activity.attachments.length > 0 && (payload === null || payload === void 0 || (_payload$activity = payload.activity) === null || _payload$activity === void 0 || (_payload$activity = _payload$activity.attachments) === null || _payload$activity === void 0 ? void 0 : _payload$activity.length) === (payload === null || payload === void 0 || (_payload$activity2 = payload.activity) === null || _payload$activity2 === void 0 || (_payload$activity2 = _payload$activity2.channelData) === null || _payload$activity2 === void 0 || (_payload$activity2 = _payload$activity2.attachmentSizes) === null || _payload$activity2 === void 0 ? void 0 : _payload$activity2.length)) {
-        var _validatedAction$payl;
         const validatedAction = validateAttachment(action, allowedFileExtensions, maxFileSizeSupportedByDynamics, localizedTexts);
-
-        // Announce to screen readers that the file was sent when validation passes
-        if (((_validatedAction$payl = validatedAction.payload) === null || _validatedAction$payl === void 0 || (_validatedAction$payl = _validatedAction$payl.activity) === null || _validatedAction$payl === void 0 || (_validatedAction$payl = _validatedAction$payl.attachments) === null || _validatedAction$payl === void 0 ? void 0 : _validatedAction$payl.length) > 0) {
-          announceFileSent(localizedTexts.MIDDLEWARE_BANNER_FILE_SENT ?? "File sent successfully.");
-        }
         return next(validatedAction);
       }
     }

package/lib/types/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentSentAnnouncementMiddleware.d.ts

@@ -2,9 +2,16 @@
  * AttachmentSentAnnouncementMiddleware
  *
  * When a file attachment is successfully sent, announces the result to
- * screen readers via an aria-live region so that assistive technology
- * users receive immediate feedback.
+ * screen readers so that assistive technology users receive immediate
+ * feedback ("File report.pdf sent").
+ *
+ * The announcement region lives inside the chat dialog. While the dialog is
+ * open it is aria-modal and its host siblings are aria-hidden, so screen
+ * readers (TalkBack, VoiceOver) ignore live regions outside it.
  ******/
+import { ILiveChatWidgetLocalizedTexts } from "../../../../../contexts/common/ILiveChatWidgetLocalizedTexts";
 import { WebChatStoreMiddleware } from "../../../interfaces/IWebChatAction";
-declare const attachmentSentAnnouncementMiddleware: WebChatStoreMiddleware;
-export default attachmentSentAnnouncementMiddleware;
+export declare const ATTACHMENT_ANNOUNCEMENT_REGION_ID = "oc-lcw-attachment-announcement";
+export declare const getFileSentMessage: (attachments: any[], localizedTexts?: ILiveChatWidgetLocalizedTexts) => string;
+export declare const createAttachmentSentAnnouncementMiddleware: (localizedTexts?: ILiveChatWidgetLocalizedTexts, widgetElementId?: string) => WebChatStoreMiddleware;
+export default createAttachmentSentAnnouncementMiddleware;

package/lib/types/contexts/common/ILiveChatWidgetLocalizedTexts.d.ts

@@ -35,10 +35,17 @@ export interface ILiveChatWidgetLocalizedTexts {
      */
     MIDDLEWARE_BANNER_FILE_IS_MALICIOUS?: string;
     /**
-     * Success message announced by screen readers when a file is successfully sent.
-     * e.g. "File sent successfully."
+     * Message announced by screen readers when one file is successfully sent.
+     * {2} - File name
+     * e.g. "File {2} sent"
      */
     MIDDLEWARE_BANNER_FILE_SENT?: string;
+    /**
+     * Message announced by screen readers when several files are sent in one message.
+     * {0} - Number of files
+     * e.g. "{0} files sent"
+     */
+    MIDDLEWARE_BANNER_FILES_SENT?: string;
     /**
      * Success message, indicating the email address introduced has been registered to receive the transcript.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-widget",
-  "version": "2.0.1-main.c997354",
+  "version": "2.0.1-main.eaef039",
   "description": "Microsoft Omnichannel Chat Widget",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",
@@ -98,13 +98,13 @@
     "abort-controller": "^3",
     "botframework-webchat": "4.18.1-hotfix.20260308.b15b405",
     "core-js-pure": "^3.42.0",
-    "dompurify": "3.4.16",
-    "markdown-it": "^14.3.0",
+    "dompurify": "3.4.17",
+    "markdown-it": "^14.3.3",
     "markdown-it-attrs": "^4.1.6",
     "markdown-it-for-inline": "^0.1.1",
     "md5-typescript": "^1.0.5",
     "rxjs": "5.5.12",
-    "sanitize-html": "2.17.7",
+    "sanitize-html": "2.18.1",
     "simple-update-in": "2.2.0",
     "slack-markdown-it": "^1.0.5"
   },
@@ -164,7 +164,7 @@
     "**/@types/trusted-types": "2.0.7",
     "**/join-images": "1.1.5",
     "**/valibot": "1.4.2",
-    "**/nanoid": "3.3.18"
+    "**/nanoid": "^3.3.20"
   },
   "jest": {
     "verbose": true,