Cherry pick hot fix into release branch (#5904)

* rtt

* lint fix

* change files

Author: carocao-msft

change-beta/@azure-communication-react-bf500f55-e029-446a-9fbe-f81238ea783f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "feature",
+  "workstream": "RTT and Captions",
+  "comment": "Auto announce completed RTT and caption messages ",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-bf500f55-e029-446a-9fbe-f81238ea783f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "feature",
+  "workstream": "RTT and Captions",
+  "comment": "Auto announce completed RTT and caption messages ",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/calling-component-bindings/src/captionsSelector.ts

@@ -158,7 +158,8 @@ export const captionsBannerSelector: CaptionsBannerSelector = reselect.createSel
         displayName: finalDisplayName ?? 'Unnamed Participant',
         captionText: c.captionText,
         userId,
-        createdTimeStamp: c.timestamp
+        createdTimeStamp: c.timestamp,
+        isFinalized: c.resultType === 'Final'
       };
     });
 
@@ -220,17 +221,14 @@ export const captionsBannerSelector: CaptionsBannerSelector = reselect.createSel
 
     return {
       captions: captionsInfo ?? [],
-
       realTimeTexts: {
         completedMessages: completedRealTimeTexts as RealTimeTextInformation[],
         currentInProgress: inProgressRealTimeTexts as RealTimeTextInformation[],
         myInProgress: myInProgress as RealTimeTextInformation
       },
       isCaptionsOn: isCaptionsFeatureActive ?? false,
       startCaptionsInProgress: startCaptionsInProgress ?? false,
-
       isRealTimeTextOn: isRealTimeTextActive ?? false,
-
       latestLocalRealTimeText: (myInProgress ?? latestLocalRealTimeText) as RealTimeTextInformation
     };
   }

packages/communication-react/review/beta/communication-react.api.md

@@ -1973,6 +1973,7 @@ export type CaptionsInformation = {
     captionText: string;
     userId?: string;
     createdTimeStamp?: Date;
+    isFinalized?: boolean;
 };
 
 // @public

packages/communication-react/review/stable/communication-react.api.md

@@ -1784,6 +1784,7 @@ export type CaptionsInformation = {
     captionText: string;
     userId?: string;
     createdTimeStamp?: Date;
+    isFinalized?: boolean;
 };
 
 // @public

packages/react-components/src/components/CaptionsBanner.tsx

@@ -10,6 +10,7 @@ import {
   captionsBannerClassName,
   captionsBannerFullHeightClassName,
   captionsContainerClassName,
+  hiddenAnnouncementClassName,
   loadingBannerFullHeightStyles,
   loadingBannerStyles
 } from './styles/Captions.style';
@@ -54,6 +55,10 @@ export type CaptionsInformation = {
    * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated
    */
   createdTimeStamp?: Date;
+  /**
+   * If caption is finalized
+   */
+  isFinalized?: boolean;
 };
 
 /**
@@ -238,6 +243,10 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
   const theme = useTheme();
 
   const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);
+  const [announcedRTT, setAnnouncedRTT] = useState<number[]>([]);
+  const [announcedCaption, setAnnouncedCaption] = useState<string[]>([]);
+  const [captionAnnouncementText, setCaptionAnnouncementText] = useState<CaptionsInformation[]>([]);
+  const [rttAnnouncementText, setRTTAnnouncementText] = useState<RealTimeTextInformation[]>([]);
 
   const getTitle = (): string => {
     if (isCaptionsOn && isRealTimeTextOn) {
@@ -305,6 +314,29 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     }
   }, [latestLocalRealTimeText]);
 
+  useEffect(() => {
+    if (realTimeTexts?.completedMessages) {
+      //filter out the messages that have already been announced
+      const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter(
+        (message) => !announcedRTT.includes(message.id)
+      );
+      if (rTTMessagesToAnnounce.length > 0) {
+        setRTTAnnouncementText(rTTMessagesToAnnounce);
+        setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);
+      }
+    }
+    if (captions.length > 0) {
+      // filter out the captions that have already been announced
+      const captionsToAnnounce = captions.filter(
+        (caption) => !announcedCaption.includes(caption.id) && caption.isFinalized
+      );
+      if (captionsToAnnounce.length > 0) {
+        setCaptionAnnouncementText(captionsToAnnounce);
+        setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);
+      }
+    }
+  }, [captions, realTimeTexts?.completedMessages, announcedRTT, announcedCaption]);
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
     if (event.key === 'Enter') {
       event.preventDefault();
@@ -352,6 +384,26 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     <>
       {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (
         <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id="captions-banner">
+          {/* ARIA live region */}
+          {(rttAnnouncementText.length > 0 || captionAnnouncementText?.length > 0) && (
+            <div aria-live="assertive" role="alert" aria-atomic="true" className={hiddenAnnouncementClassName}>
+              <span>
+                {rttAnnouncementText.map((text) => (
+                  <span>
+                    {strings.realTimeTextBannerTitle} {text.displayName}: {text.message}
+                  </span>
+                ))}
+              </span>
+              <span>
+                {captionAnnouncementText.map((text) => (
+                  <span>
+                    {strings.captionsOnlyContainerTitle} {text.displayName}: {text.captionText}
+                  </span>
+                ))}
+              </span>
+            </div>
+          )}
+
           {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (
             <Stack
               horizontal

packages/react-components/src/components/styles/Captions.style.ts

@@ -114,6 +114,20 @@ export const captionsContainerClassName = mergeStyles({
   overflowX: 'hidden'
 });
 
+/**
+ * @private
+ */
+export const hiddenAnnouncementClassName = mergeStyles({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0
+});
+
 /**
  * @private
  */