Fix an issue where system chat messages weren't announced (#5463)

Author: vhuseinova-msft

change-beta/@azure-communication-react-c95c62ba-69c0-4b2f-8e20-d2e4aa13b025.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix an issue where system chat messages weren't announced",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-c95c62ba-69c0-4b2f-8e20-d2e4aa13b025.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix an issue where system chat messages weren't announced",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -2,9 +2,10 @@
 // Licensed under the MIT License.
 
 import { IStyle, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { systemMessageIconStyle } from './styles/SystemMessage.styles';
 import { ComponentSlotStyle } from '../types';
+import LiveMessage from './Announcer/LiveMessage';
 
 /**
  * Todo: We need to add more types of system messages that we support.
@@ -37,13 +38,25 @@ export type SystemMessageProps = {
 export const SystemMessage = (props: SystemMessageProps): JSX.Element => {
   const { iconName, content } = props;
   const Icon: JSX.Element = <FontIcon iconName={iconName} className={mergeStyles(systemMessageIconStyle)} />;
+  const [liveMessage, setLiveMessage] = useState('');
+
+  useEffect(() => {
+    // Timeout is needed to handle situation when the same user joins and leaves a chat a few times in a row, otherwise Narrator won't repeat the system message text.
+    // Because delay value is not provided, setMessage function will be executed asynchronously in the next event cycle
+    setTimeout(() => {
+      setLiveMessage(content);
+    });
+  }, [content]);
 
   return (
-    <Stack horizontal className={mergeStyles(props?.containerStyle as IStyle)} tabIndex={0}>
-      {Icon}
-      <Text style={{ wordBreak: 'break-word' }} role="status" title={content} variant={'small'}>
-        {content}
-      </Text>
-    </Stack>
+    <>
+      <LiveMessage message={liveMessage} ariaLive="polite" clearOnUnmount={true} />
+      <Stack horizontal className={mergeStyles(props?.containerStyle as IStyle)} tabIndex={0}>
+        {Icon}
+        <Text style={{ wordBreak: 'break-word' }} role="status" title={content} variant={'small'}>
+          {content}
+        </Text>
+      </Stack>
+    </>
   );
 };