Conditionaly render announcers (#5526)

* Conditionaly render announcers

* change

change-beta/@azure-communication-react-05df919a-0892-4766-8264-47a1ada378c7.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Change the announcers in the Mic and Camera button to be conditionally rendered to stop them being read in scan mode if the button isn't focused",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-05df919a-0892-4766-8264-47a1ada378c7.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Change the announcers in the Mic and Camera button to be conditionally rendered to stop them being read in scan mode if the button isn't focused",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -176,6 +176,7 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
   const localeStrings = useLocale().strings.cameraButton;
   const strings = { ...localeStrings, ...props.strings };
   const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);
+  const [announcerPresent, setAnnouncerPresent] = useState<boolean>(false);
 
   const disabled = props.disabled || waitForCamera;
 
@@ -297,7 +298,7 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
 
   return (
     <>
-      <Announcer announcementString={announcerString} ariaLive={'polite'} />
+      {announcerPresent && <Announcer announcementString={announcerString} ariaLive={'polite'} />}
       <ControlBarButton
         {...props}
         disabled={disabled}
@@ -323,6 +324,8 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
         ariaLabel={ariaLabel}
         splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}
         splitButtonMenuProps={splitButtonMenuProps}
+        onFocus={() => setAnnouncerPresent(true)}
+        onBlur={() => setAnnouncerPresent(false)}
       />
     </>
   );

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

@@ -202,6 +202,7 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
   const localeStrings = useLocale().strings.microphoneButton;
   const strings = { ...localeStrings, ...props.strings };
   const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);
+  const [announcerPresent, setAnnouncerPresent] = useState<boolean>(false);
 
   const isSplit = props.split ?? props.enableDeviceSelectionMenu;
 
@@ -313,7 +314,7 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
 
   return (
     <>
-      <Announcer announcementString={announcerString} ariaLive={'polite'} />
+      {announcerPresent && <Announcer announcementString={announcerString} ariaLive={'polite'} />}
       <ControlBarButton
         {...props}
         onClick={props.onToggleMicrophone ? onToggleClick : props.onClick}
@@ -340,6 +341,8 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
         splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}
         disabled={disabled}
         primaryDisabled={primaryDisabled}
+        onFocus={() => setAnnouncerPresent(true)}
+        onBlur={() => setAnnouncerPresent(false)}
       />
     </>
   );