[Ezra bug] change behavior to tab to close and remove focus zone. (#5524)

* change behavior to tab to close and remove focus zone.

* remove console

* change

* fix spelling

* add callback to handle shift tabs

* update to handle cwc behavior

* fix cwc behavior

* fix build

Author: dmceachernmsft

change-beta/@azure-communication-react-1502fd01-ef0d-489a-a99d-6946fc4e9258.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Ezra",
+  "comment": "Update people button behavior to meet A11y requirements",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-1502fd01-ef0d-489a-a99d-6946fc4e9258.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Ezra",
+  "comment": "Update people button behavior to meet A11y requirements",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -162,6 +162,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
   const controlBarRef = useRef<FocusableElement>(null);
   const peopleButtonRef = useRef<IButton>(null);
   const cameraButtonRef = useRef<IButton>(null);
+  const sidePaneDismissButtonRef = useRef<IButton>(null);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const containerWidth = _useContainerWidth(containerRef);
@@ -204,7 +205,9 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
       onFetchParticipantMenuItems: props.callControlProps?.onFetchParticipantMenuItems,
       mobileView: props.mobileView,
       peopleButtonRef,
-      setParticipantActioned
+      setParticipantActioned,
+      sidePaneDismissButtonRef,
+      chatButtonPresent: !!props.onCloseChatPane
     }),
     [
       updateSidePaneRenderer,
@@ -213,7 +216,9 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
       props.onFetchAvatarPersonaData,
       props.mobileView,
       peopleButtonRef,
-      setParticipantActioned
+      setParticipantActioned,
+      sidePaneDismissButtonRef,
+      props.onCloseChatPane
     ]
   );
 
@@ -589,6 +594,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                   }
                   onToggleTeamsMeetingConferenceModal={toggleTeamsMeetingConferenceModal}
                   teamsMeetingConferenceModalPresent={showTeamsMeetingConferenceModal}
+                  sidePaneDismissButtonRef={sidePaneDismissButtonRef}
                 />
               )}
             </Stack>

packages/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx

@@ -58,6 +58,8 @@ export const usePeoplePane = (props: {
   onPermitOthersVideo?: () => Promise<void>;
   /* @conditional-compile-remove(media-access) */
   meetingMediaAccess?: MediaAccess;
+  sidePaneDismissButtonRef?: RefObject<IButton>;
+  chatButtonPresent?: boolean;
 }): {
   openPeoplePane: () => void;
   closePeoplePane: () => void;
@@ -102,7 +104,9 @@ export const usePeoplePane = (props: {
     /* @conditional-compile-remove(media-access) */
     onPermitOthersVideo,
     /* @conditional-compile-remove(media-access) */
-    meetingMediaAccess
+    meetingMediaAccess,
+    sidePaneDismissButtonRef,
+    chatButtonPresent
   } = props;
 
   const closePane = useCallback(() => {
@@ -325,12 +329,23 @@ export const usePeoplePane = (props: {
     () => (
       <SidePaneHeader
         onClose={closePane}
+        paneOpenerButton={peopleButtonRef}
         headingText={localeStrings.peoplePaneTitle}
         dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel}
         mobileView={mobileView ?? false}
+        dismissButtonComponentRef={sidePaneDismissButtonRef}
+        chatButtonPresent={chatButtonPresent}
       />
     ),
-    [mobileView, closePane, localeStrings]
+    [
+      closePane,
+      peopleButtonRef,
+      localeStrings.peoplePaneTitle,
+      localeStrings.dismissSidePaneButtonLabel,
+      mobileView,
+      sidePaneDismissButtonRef,
+      chatButtonPresent
+    ]
   );
 
   const onFetchParticipantMenuItemsForCallComposite = useCallback(

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

@@ -625,9 +625,10 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
         onClose={closeChat}
         dismissSidePaneButtonAriaLabel={callWithChatStrings.dismissSidePaneButtonLabel ?? ''}
         mobileView={mobileView}
+        chatButtonPresent={showChatButton}
       />
     ),
-    [chatPaneTitle, callWithChatStrings.dismissSidePaneButtonLabel, closeChat, mobileView]
+    [chatPaneTitle, closeChat, callWithChatStrings.dismissSidePaneButtonLabel, mobileView, showChatButton]
   );
 
   const sidePaneContentRenderer = useMemo(

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

@@ -1,7 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useMemo, useRef, useEffect, useState, useCallback, useImperativeHandle, forwardRef } from 'react';
+import React, {
+  useMemo,
+  useRef,
+  useEffect,
+  useState,
+  useCallback,
+  useImperativeHandle,
+  forwardRef,
+  RefObject
+} from 'react';
 import { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';
 import { CallAdapter } from '../../CallComposite';
 import { PeopleButton } from './PeopleButton';
@@ -78,17 +87,16 @@ export interface CommonCallControlBarProps {
   onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;
   onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;
   userSetGalleryLayout?: VideoGalleryLayout;
-  peopleButtonRef?: React.RefObject<IButton>;
-  cameraButtonRef?: React.RefObject<IButton>;
-  videoBackgroundPickerRef?: React.RefObject<IButton>;
+  peopleButtonRef?: RefObject<IButton>;
+  cameraButtonRef?: RefObject<IButton>;
+  videoBackgroundPickerRef?: RefObject<IButton>;
   onSetDialpadPage?: () => void;
   dtmfDialerPresent?: boolean;
   onStopLocalSpotlight?: () => void;
   useTeamsCaptions?: boolean;
-
   onToggleTeamsMeetingConferenceModal?: () => void;
-
   teamsMeetingConferenceModalPresent?: boolean;
+  sidePaneDismissButtonRef?: RefObject<IButton>;
 }
 
 const inferCommonCallControlOptions = (
@@ -580,6 +588,8 @@ export const CommonCallControlBar = forwardRef<FocusableElement, CommonCallContr
                       strings={peopleButtonStrings}
                       styles={commonButtonStyles}
                       componentRef={props.peopleButtonRef}
+                      chatButtonPresent={isEnabled(options.chatButton)}
+                      peoplePaneDismissButtonRef={props.sidePaneDismissButtonRef}
                     />
                   )}
                   {customButtons['secondary']

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

@@ -1,18 +1,27 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, RefObject } from 'react';
 import { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';
-import { concatStyleSets } from '@fluentui/react';
+import { concatStyleSets, IButton } from '@fluentui/react';
 import { CallCompositeIcon } from '../icons';
 
 const icon = (): JSX.Element => <CallCompositeIcon iconName={'ControlBarPeopleButton'} />;
 
 /**
  * @private
+ * props for the PeopleButton component
  */
-export const PeopleButton = (props: ControlBarButtonProps): JSX.Element => {
-  const { strings, onRenderOnIcon, onRenderOffIcon, onClick } = props;
+export interface PeopleButtonProps extends ControlBarButtonProps {
+  peoplePaneDismissButtonRef?: RefObject<IButton>;
+  chatButtonPresent?: boolean;
+}
+
+/**
+ * @private
+ */
+export const PeopleButton = (props: PeopleButtonProps): JSX.Element => {
+  const { strings, onRenderOnIcon, onRenderOffIcon, onClick, peoplePaneDismissButtonRef, chatButtonPresent } = props;
   const theme = useTheme();
   const styles: ControlBarButtonStyles = useMemo(
     () =>
@@ -27,14 +36,37 @@ export const PeopleButton = (props: ControlBarButtonProps): JSX.Element => {
     [props.styles, theme.palette.neutralLight]
   );
 
+  const handleTab = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key === 'Tab' && !event.shiftKey && peoplePaneDismissButtonRef?.current && !chatButtonPresent) {
+        peoplePaneDismissButtonRef.current.focus();
+        event.preventDefault();
+      }
+    },
+    [peoplePaneDismissButtonRef, chatButtonPresent]
+  );
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      onClick?.(event);
+      if (chatButtonPresent) {
+        console.log(peoplePaneDismissButtonRef);
+        peoplePaneDismissButtonRef?.current?.focus();
+        event.preventDefault();
+      }
+    },
+    [chatButtonPresent, onClick, peoplePaneDismissButtonRef]
+  );
+
   return (
     <ControlBarButton
       {...props}
       strings={strings}
       labelKey={'peopleButtonLabelKey'}
       onRenderOnIcon={onRenderOnIcon ?? icon}
       onRenderOffIcon={onRenderOffIcon ?? icon}
-      onClick={onClick}
+      onClick={handleClick}
+      onKeyDown={handleTab}
       styles={styles}
     />
   );

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

@@ -12,7 +12,7 @@ import {
   headingMoreButtonStyles
 } from './styles/ParticipantContainer.styles';
 import { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';
-import { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';
+import { Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';
 import { DefaultButton, IContextualMenuProps } from '@fluentui/react';
 import { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';
 import { useId } from '@fluentui/react-hooks';
@@ -97,7 +97,6 @@ export const ParticipantListWithHeading = (props: {
           (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (
           <Stack.Item>
             <DefaultButton
-              autoFocus
               data-ui-id="people-pane-header-more-button"
               ariaLabel={headingMoreButtonAriaLabel}
               styles={headingMoreButtonStyles(theme)}
@@ -109,7 +108,7 @@ export const ParticipantListWithHeading = (props: {
           </Stack.Item>
         )}
       </Stack>
-      <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>
+      <Stack className={participantListContainerStyle}>
         <ParticipantList
           {...participantListProps}
           pinnedParticipants={pinnedParticipants}
@@ -139,7 +138,7 @@ export const ParticipantListWithHeading = (props: {
           showParticipantOverflowTooltip={!props.isMobile}
           participantAriaLabelledBy={subheadingUniqueId}
         />
-      </FocusZone>
+      </Stack>
     </Stack>
   );
 };

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

@@ -1,9 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';
+import { CommandBarButton, DefaultButton, IButton, Stack, concatStyleSets } from '@fluentui/react';
 import { useTheme } from '@internal/react-components';
-import React, { useMemo } from 'react';
+import React, { useMemo, RefObject, useCallback } from 'react';
 import { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';
 import {
   mobilePaneBackButtonStyles,
@@ -22,6 +22,9 @@ export const SidePaneHeader = (props: {
   dismissSidePaneButtonAriaDescription?: string;
   onClose: () => void;
   mobileView: boolean;
+  paneOpenerButton?: RefObject<IButton>;
+  dismissButtonComponentRef?: RefObject<IButton>;
+  chatButtonPresent?: boolean;
 }): JSX.Element => {
   const theme = useTheme();
   const sidePaneCloseButtonStyles = useMemo(
@@ -43,6 +46,16 @@ export const SidePaneHeader = (props: {
     [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground, theme.effects.roundedCorner4]
   );
 
+  const handleShiftTab = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key === 'Tab' && event.shiftKey && !props.chatButtonPresent) {
+        props.paneOpenerButton?.current?.focus();
+        event.preventDefault();
+      }
+    },
+    [props.chatButtonPresent, props.paneOpenerButton]
+  );
+
   if (props.mobileView) {
     return <SidePaneMobileHeader {...props} />;
   }
@@ -57,8 +70,12 @@ export const SidePaneHeader = (props: {
           ariaLabel={props.dismissSidePaneButtonAriaLabel}
           styles={sidePaneCloseButtonStyles}
           iconProps={{ iconName: 'cancel' }}
-          onClick={props.onClose}
-          autoFocus
+          onClick={() => {
+            props.onClose();
+            props.paneOpenerButton?.current?.focus();
+          }}
+          onKeyDown={handleShiftTab}
+          componentRef={props.dismissButtonComponentRef}
         />
       </Stack.Item>
     </Stack>