Fix bug where Captions Banner Aria label is showing 'Live Captions' when RTT is on (#5997)

* fix aria label

* changelog

---------

Co-authored-by: James Burnside <2684369+JamesBurnside@users.noreply.github.com>

Author: carocao-msft

change/@azure-communication-react-1f274a8f-2b10-4ffd-9d72-d8dc87c2c99c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Captions",
+  "comment": "Fixed bug when RTT is on, captions banner aria label is still showing Live Captions",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/common/CallingCaptionsBanner.tsx

@@ -99,6 +99,13 @@ export const CallingCaptionsBanner = (props: {
 
   const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';
 
+  const containerAriaLabel = // 3 cases, captions only, RTT only, captions + RTT we adjust the aria-label accordingly
+    captionsBannerProps.isCaptionsOn && !(props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn)
+      ? strings.liveCaptionsLabel
+      : !captionsBannerProps.isCaptionsOn && (props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn)
+        ? strings.realTimeTextLabel
+        : strings.captionsAndRealTimeTextContainerTitle;
+
   return (
     <>
       {isCaptionsSettingsOpen && (
@@ -109,7 +116,7 @@ export const CallingCaptionsBanner = (props: {
         />
       )}
       {
-        <div className={containerClassName} role="region" aria-label={strings.liveCaptionsLabel}>
+        <div className={containerClassName} role="region" aria-label={containerAriaLabel}>
           <Stack horizontalAlign="center">
             <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>
               <CaptionsBanner