add hook usage to new buttons

Author: dmceachernmsft

packages/react-components/src/Accessibility/AccessibilityProvider.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import { IButton } from '@fluentui/react';
 import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { useEffect } from 'react';
 
 /**
  * Type for reference to the last component used
@@ -48,10 +49,17 @@ export const AccessibilityProvider = (props: AccessibilityProviderProps): JSX.El
   console.log('AccessibilityProvider');
   const [componentRef, setComponentRef] = useState<AccessibilityComponentRef>(null);
 
-  const handleSetComponentRef = useCallback((ref: AccessibilityComponentRef) => {
-    console.log(ref);
-    setComponentRef(ref);
-  }, []);
+  const handleSetComponentRef = useCallback(
+    (ref: AccessibilityComponentRef) => {
+      console.log(ref);
+      setComponentRef(ref);
+    },
+    [setComponentRef]
+  );
+
+  useEffect(() => {
+    console.log('componentRef', componentRef);
+  }, [componentRef]);
 
   return (
     <AccessibilityContext.Provider value={{ setComponentRef: handleSetComponentRef, componentRef }}>

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

@@ -1,14 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, useRef } from 'react';
 import { useLocale } from '../localization';
 import { VideoStreamOptions } from '../types';
 import { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 
 import {
   ContextualMenuItemType,
+  IButton,
   IButtonProps,
   IContextualMenuItem,
   IContextualMenuItemStyles,
@@ -17,6 +18,7 @@ import {
 import { ControlBarButtonStyles } from './ControlBarButton';
 import { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';
 import { Announcer } from './Announcer';
+import { useAccessibility } from '../Accessibility';
 
 const defaultLocalVideoViewOptions = {
   scalingMode: 'Crop',
@@ -177,6 +179,8 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
   const strings = { ...localeStrings, ...props.strings };
   const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);
   const [announcerPresent, setAnnouncerPresent] = useState<boolean>(false);
+  const accessibility = useAccessibility();
+  const cameraButtonRef = useRef<IButton | null>(null);
 
   const disabled = props.disabled || waitForCamera;
 
@@ -322,6 +326,8 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
         aria-description={strings.cameraButtonAriaDescription}
         aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}
         ariaLabel={ariaLabel}
+        onMenuClick={() => accessibility.setComponentRef(cameraButtonRef.current)}
+        componentRef={cameraButtonRef}
         splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}
         splitButtonMenuProps={splitButtonMenuProps}
         onFocus={() => setAnnouncerPresent(true)}

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

@@ -141,7 +141,6 @@ export const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {
         : props?.strings?.tooltipOffContent);
 
   const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;
-
   return (
     <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>
       <DefaultButton
@@ -154,6 +153,8 @@ export const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {
         aria-describedby={tooltipId}
         menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.
         text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
       >
         {props.showLabel ? labelText : <></>}
       </DefaultButton>

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

@@ -22,6 +22,7 @@ import { ControlBarButtonStyles } from './ControlBarButton';
 import { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';
 import { Announcer } from './Announcer';
 import { useAccessibility } from '../Accessibility';
+import { useRef } from 'react';
 
 /**
  * Strings of {@link MicrophoneButton} that can be overridden.
@@ -225,8 +226,8 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
   };
   // activate the context
   const accessibility = useAccessibility();
-  // create a ref for the local component
-  const micButtonRef = React.useRef<IButton | null>(null);
+  // create a ref for the local component - this only works when it is not a split button.
+  const micButtonRef = useRef<IButton | null>(null);
 
   const isMicOn = props.checked;
 
@@ -319,7 +320,7 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
   };
 
   return (
-    <>
+    <div>
       {announcerPresent && <Announcer announcementString={announcerString} ariaLive={'polite'} />}
       <ControlBarButton
         {...props}
@@ -347,14 +348,15 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
         splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}
         disabled={disabled}
         primaryDisabled={primaryDisabled}
-        onFocus={() => setAnnouncerPresent(true)}
-        onBlur={(event) => {
-          console.log('onBlur event', event);
-          props.onBlur?.(event);
+        onFocus={() => {
+          setAnnouncerPresent(true);
+        }}
+        onBlur={() => {
           accessibility.setComponentRef(micButtonRef.current);
           setAnnouncerPresent(false);
         }}
+        componentRef={micButtonRef}
       />
-    </>
+    </div>
   );
 };

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

@@ -7,11 +7,12 @@ import {
   IContextualMenuProps,
   IContextualMenuStyles,
   IContextualMenuItemStyles,
-  merge
+  merge,
+  IButton
 } from '@fluentui/react';
 import { _formatString } from '@internal/acs-ui-common';
 import copy from 'copy-to-clipboard';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useRef } from 'react';
 import {
   ParticipantList,
   ParticipantListProps,
@@ -28,6 +29,7 @@ import { ParticipantListParticipant } from '../types';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';
 import { Announcer } from './Announcer';
+import { useAccessibility } from '../Accessibility';
 
 /**
  * Styles for the {@link ParticipantsButton} menu.
@@ -183,6 +185,9 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
     showParticipantOverflowTooltip
   } = props;
 
+  const accessibility = useAccessibility();
+  const participantsButtonRef = useRef<IButton | null>(null);
+
   const disabled = props.disabled;
 
   const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');
@@ -372,6 +377,10 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
         strings={strings}
         aria-label={strings.ariaLabel}
         labelKey={props.labelKey ?? 'participantsButtonLabel'}
+        componentRef={participantsButtonRef}
+        onBlur={() => {
+          accessibility.setComponentRef(participantsButtonRef.current);
+        }}
       />
     </>
   );

packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx

@@ -156,7 +156,6 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
   );
 
   const peopleButtonRef = useRef<IButton>(null);
-  const cameraButtonRef = useRef<IButton>(null);
   const sidePaneDismissButtonRef = useRef<IButton>(null);
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -430,8 +429,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
     props.updateSidePaneRenderer,
     props.mobileView,
     props.latestErrors as ActiveErrorMessage[],
-    props.onDismissError,
-    cameraButtonRef
+    props.onDismissError
   );
   const [showDrawer, setShowDrawer] = useState(false);
   const onMoreButtonClicked = useCallback(() => {
@@ -676,8 +674,6 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                   userSetGalleryLayout={props.userSetGalleryLayout}
                   onSetDialpadPage={props.onSetDialpadPage}
                   dtmfDialerPresent={props.dtmfDialerPresent}
-                  peopleButtonRef={peopleButtonRef}
-                  cameraButtonRef={cameraButtonRef}
                   onStopLocalSpotlight={
                     !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined
                   }

packages/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx

@@ -2,11 +2,11 @@
 // Licensed under the MIT License.
 
 import { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';
-import { Dropdown, IDropdownOption, Label, mergeStyles, Stack } from '@fluentui/react';
+import { Dropdown, IButton, IDropdownOption, Label, mergeStyles, Stack } from '@fluentui/react';
 
 import { DefaultButton } from '@fluentui/react';
-import { useEffect } from 'react';
-import { useTheme, VideoStreamOptions, _DevicePermissionDropdown } from '@internal/react-components';
+import { useEffect, useRef } from 'react';
+import { useTheme, VideoStreamOptions, _DevicePermissionDropdown, useAccessibility } from '@internal/react-components';
 import React from 'react';
 import { CallCompositeIcon } from '../../common/icons';
 import { useLocale } from '../../localization';
@@ -105,6 +105,8 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
   const theme = useTheme();
   const locale = useLocale();
   const adapter = useAdapter();
+  const accessibility = useAccessibility();
+  const videoEffectsButtonRef = useRef<IButton | null>(null);
 
   const onResolveVideoEffectDependency = useSelector(getVideoEffectsDependency);
   const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;
@@ -255,8 +257,14 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
               <DefaultButton
                 iconProps={{ iconName: 'ConfigurationScreenVideoEffectsButton' }}
                 styles={effectsButtonStyles(theme, !cameraPermissionGranted)}
-                onClick={props.onClickVideoEffects}
+                onClick={() => {
+                  if (props.onClickVideoEffects) {
+                    accessibility.setComponentRef(videoEffectsButtonRef.current);
+                    props.onClickVideoEffects();
+                  }
+                }}
                 disabled={!cameraPermissionGranted}
+                componentRef={videoEffectsButtonRef}
                 data-ui-id={'call-config-video-effects-button'}
               >
                 {locale.strings.call.configurationPageVideoEffectsButtonLabel}

packages/react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { IStackStyles, Stack } from '@fluentui/react';
+import { IButton, IStackStyles, Stack } from '@fluentui/react';
 import { _formatString } from '@internal/acs-ui-common';
-import { ControlBarButtonProps } from '@internal/react-components';
-import React, { useCallback, useMemo } from 'react';
+import { ControlBarButtonProps, useAccessibility } from '@internal/react-components';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { CallWithChatCompositeIcon } from '../../common/icons';
 import { ChatButton } from './ChatButton';
 import { useCallWithChatCompositeStrings } from '../hooks/useCallWithChatCompositeStrings';
@@ -30,6 +30,8 @@ export const ChatButtonWithUnreadMessagesBadge = (props: ChatButtonWithUnreadMes
 
   const baseIcon = props.showLabel ? regularIcon : filledIcon;
   const callWithChatStrings = useCallWithChatCompositeStrings();
+  const accessibility = useAccessibility();
+  const chatButtonRef = useRef<IButton | null>(null);
 
   const numberOfMsgToolTip =
     props.strings?.tooltipOffContent && unreadChatMessagesCount > 0
@@ -65,6 +67,11 @@ export const ChatButtonWithUnreadMessagesBadge = (props: ChatButtonWithUnreadMes
       onRenderOffIcon={notificationOnIcon}
       onRenderOnIcon={onRenderOnIcon}
       strings={chatStrings}
+      onClick={(event) => {
+        accessibility.setComponentRef(chatButtonRef.current);
+        props.onClick?.(event);
+      }}
+      componentRef={chatButtonRef}
     />
   );
 };

packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx

@@ -79,8 +79,6 @@ export interface CommonCallControlBarProps {
   onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;
   onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;
   userSetGalleryLayout?: VideoGalleryLayout;
-  peopleButtonRef?: RefObject<IButton>;
-  cameraButtonRef?: RefObject<IButton>;
   videoBackgroundPickerRef?: RefObject<IButton>;
   onSetDialpadPage?: () => void;
   dtmfDialerPresent?: boolean;
@@ -449,7 +447,6 @@ export const CommonCallControlBar = (props: CommonCallControlBarMergedProps): JS
                         splitButtonsForDeviceSelection={!props.mobileView}
                         disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}
                         onClickVideoEffects={props.onClickVideoEffects}
-                        componentRef={props.cameraButtonRef}
                         disableTooltip={props.mobileView}
                       />
                     )}
@@ -596,7 +593,6 @@ export const CommonCallControlBar = (props: CommonCallControlBarMergedProps): JS
                     }
                     strings={peopleButtonStrings}
                     styles={commonButtonStyles}
-                    componentRef={props.peopleButtonRef}
                     chatButtonPresent={isEnabled(options.chatButton)}
                     peoplePaneDismissButtonRef={props.sidePaneDismissButtonRef}
                   />

packages/react-composites/src/composites/common/ControlBar/PeopleButton.tsx

@@ -1,8 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useCallback, useMemo, RefObject } from 'react';
-import { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';
+import React, { useCallback, useMemo, RefObject, useRef } from 'react';
+import {
+  ControlBarButton,
+  ControlBarButtonProps,
+  ControlBarButtonStyles,
+  useAccessibility,
+  useTheme
+} from '@internal/react-components';
 import { concatStyleSets, IButton } from '@fluentui/react';
 import { CallCompositeIcon } from '../icons';
 
@@ -23,6 +29,8 @@ export interface PeopleButtonProps extends ControlBarButtonProps {
 export const PeopleButton = (props: PeopleButtonProps): JSX.Element => {
   const { strings, onRenderOnIcon, onRenderOffIcon, onClick, peoplePaneDismissButtonRef, chatButtonPresent } = props;
   const theme = useTheme();
+  const accessibility = useAccessibility();
+  const peopleButtonRef = useRef<IButton | null>(null);
   const styles: ControlBarButtonStyles = useMemo(
     () =>
       concatStyleSets(
@@ -64,9 +72,13 @@ export const PeopleButton = (props: PeopleButtonProps): JSX.Element => {
       labelKey={'peopleButtonLabelKey'}
       onRenderOnIcon={onRenderOnIcon ?? icon}
       onRenderOffIcon={onRenderOffIcon ?? icon}
-      onClick={handleClick}
+      onClick={(event: React.MouseEvent<HTMLElement>) => {
+        accessibility.setComponentRef(peopleButtonRef.current);
+        handleClick(event);
+      }}
       onKeyDown={handleTab}
       styles={styles}
+      componentRef={peopleButtonRef}
     />
   );
 };

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

@@ -72,8 +72,9 @@ export const SidePaneHeader = (props: {
           styles={sidePaneCloseButtonStyles}
           iconProps={{ iconName: 'cancel' }}
           onClick={() => {
-            props.onClose();
             accessibility.componentRef?.focus();
+            console.log('close', accessibility.componentRef);
+            props.onClose();
           }}
           onKeyDown={handleShiftTab}
           componentRef={props.dismissButtonComponentRef}