[Accessibility Bug Fix] RTT Modal heading is not defined as heading (#5800)

* update

* Change files

* update

Author: carocao-msft

change-beta/@azure-communication-react-fdcffbdb-2066-4b9d-9539-9c1fa2a7eaa9.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTT",
+  "comment": "Fix bug where modal title is not defined as heading",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-fdcffbdb-2066-4b9d-9539-9c1fa2a7eaa9.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTT",
+  "comment": "Fix bug where modal title is not defined as heading",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -348,7 +348,9 @@ export const CaptionsSettingsModal = (props: CaptionsSettingsModalProps): JSX.El
           styles={CaptionsSettingsModalStyle}
         >
           <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className={titleContainerClassName}>
-            <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>
+            <Text className={titleClassName} role="heading" aria-level={1}>
+              {strings?.captionsSettingsModalTitle}
+            </Text>
             <IconButton
               iconProps={{ iconName: 'Cancel' }}
               ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel}

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

@@ -95,7 +95,9 @@ export const RealTimeTextModal = (props: RealTimeTextModalProps): JSX.Element =>
           styles={RealTimeTextModalStyle}
         >
           <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className={titleContainerClassName}>
-            <Text className={titleClassName}>{strings?.realTimeTextModalTitle}</Text>
+            <Text role="heading" className={titleClassName} aria-level={1}>
+              {strings?.realTimeTextModalTitle}
+            </Text>
             <IconButton
               iconProps={{ iconName: 'Cancel' }}
               ariaLabel={strings?.realTimeTextCloseModalButtonAriaLabel}