[A11y Bugfix] Add announcements for people button/ people flyout (#2588)

* Add announcements for people button/ people flyout

* Change files

* Duplicate change files for beta release

* fix lint

Author: dmceachernmsft

change-beta/@azure-communication-react-a82ecb60-9a00-46cb-9774-877caf25e5b1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add narrator announcements to participant button copy link and peoplepane copylink button in CallWithChat composite.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-a82ecb60-9a00-46cb-9774-877caf25e5b1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add narrator announcements to participant button copy link and peoplepane copylink button in CallWithChat composite.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -2786,6 +2786,7 @@ export type ParticipantsButtonSelector = (state: CallClientState, props: Calling
 
 // @public
 export interface ParticipantsButtonStrings {
+    copyInviteLinkActionedAriaLabel: string;
     copyInviteLinkButtonLabel: string;
     label: string;
     menuHeader: string;

packages/communication-react/review/stable/communication-react.api.md

@@ -2169,6 +2169,7 @@ export type ParticipantsButtonSelector = (state: CallClientState, props: Calling
 
 // @public
 export interface ParticipantsButtonStrings {
+    copyInviteLinkActionedAriaLabel: string;
     copyInviteLinkButtonLabel: string;
     label: string;
     menuHeader: string;

packages/react-components/review/beta/react-components.api.md

@@ -1310,6 +1310,7 @@ export interface ParticipantsButtonProps extends ControlBarButtonProps {
 
 // @public
 export interface ParticipantsButtonStrings {
+    copyInviteLinkActionedAriaLabel: string;
     copyInviteLinkButtonLabel: string;
     label: string;
     menuHeader: string;

packages/react-components/review/stable/react-components.api.md

@@ -1113,6 +1113,7 @@ export interface ParticipantsButtonProps extends ControlBarButtonProps {
 
 // @public
 export interface ParticipantsButtonStrings {
+    copyInviteLinkActionedAriaLabel: string;
     copyInviteLinkButtonLabel: string;
     label: string;
     menuHeader: string;

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

@@ -11,7 +11,7 @@ import {
 } from '@fluentui/react';
 import { _formatString } from '@internal/acs-ui-common';
 import copy from 'copy-to-clipboard';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   ParticipantList,
   ParticipantListProps,
@@ -29,6 +29,7 @@ import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';
 /* @conditional-compile-remove(rooms) */
 import { _usePermissions } from '../permissions/PermissionsProvider';
+import { Announcer } from './Announcer';
 
 /**
  * Styles for the {@link ParticipantsButton} menu.
@@ -82,6 +83,10 @@ export interface ParticipantsButtonStrings {
    * Label of menu button to mute all participants
    */
   muteAllButtonLabel: string;
+  /**
+   * Narrator announcement for when the invite link has been copied by the user to the clipboard
+   */
+  copyInviteLinkActionedAriaLabel: string;
 }
 
 /**
@@ -178,6 +183,8 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
 
   const disabled = props.disabled;
 
+  const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');
+
   const onRenderPeopleIcon = (): JSX.Element => (
     <_HighContrastAwareIcon disabled={disabled} iconName="ControlButtonParticipants" />
   );
@@ -227,6 +234,20 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
   const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);
   const participantCount = participants.length;
 
+  /**
+   * sets the announcement string for when the link is copied.
+   */
+  const toggleAnnouncerString = useCallback(() => {
+    setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
+    /**
+     * Clears the announcer string after the user clicks the
+     * copyInviteLink button allowing it to be re-announced.
+     */
+    setTimeout(() => {
+      setCopyInviteLinkAnnouncerStrings('');
+    }, 3000);
+  }, [strings.copyInviteLinkActionedAriaLabel]);
+
   const generateDefaultParticipantsSubMenuProps = useCallback((): IContextualMenuItem[] => {
     const items: IContextualMenuItem[] = [];
 
@@ -313,7 +334,10 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
         title: strings.copyInviteLinkButtonLabel,
         itemProps: { styles: styles?.menuStyles?.menuItemStyles },
         iconProps: { iconName: 'Link' },
-        onClick: onCopyCallback
+        onClick: () => {
+          onCopyCallback();
+          toggleAnnouncerString();
+        }
       });
     }
 
@@ -329,18 +353,22 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
     excludeMe,
     ids.participantButtonPeopleMenuItem,
     generateDefaultParticipantsSubMenuProps,
-    onCopyCallback
+    onCopyCallback,
+    toggleAnnouncerString
   ]);
 
   return (
-    <ControlBarButton
-      {...props}
-      disabled={disabled}
-      menuProps={props.menuProps ?? defaultMenuProps}
-      menuIconProps={{ hidden: true }}
-      onRenderIcon={onRenderIcon ?? onRenderPeopleIcon}
-      strings={strings}
-      labelKey={props.labelKey ?? 'participantsButtonLabel'}
-    />
+    <>
+      <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />
+      <ControlBarButton
+        {...props}
+        disabled={disabled}
+        menuProps={props.menuProps ?? defaultMenuProps}
+        menuIconProps={{ hidden: true }}
+        onRenderIcon={onRenderIcon ?? onRenderPeopleIcon}
+        strings={strings}
+        labelKey={props.labelKey ?? 'participantsButtonLabel'}
+      />
+    </>
   );
 };

packages/react-components/src/localization/locales/en-US/strings.json

@@ -90,7 +90,8 @@
     "menuHeader": "In this call",
     "participantsListButtonLabel": "{numParticipants} people",
     "muteAllButtonLabel": "Mute all",
-    "copyInviteLinkButtonLabel": "Copy invite link"
+    "copyInviteLinkButtonLabel": "Copy invite link",
+    "copyInviteLinkActionedAriaLabel": "Invite link copied"
   },
   "screenShareButton": {
     "onLabel": "Stop presenting",

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import { concatStyleSets, DefaultButton, IButtonStyles, PrimaryButton, Stack, useTheme } from '@fluentui/react';
 import copy from 'copy-to-clipboard';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { CallWithChatCompositeStrings } from '../../index-public';
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 import { CallCompositeStrings } from '../../index-public';
@@ -21,6 +21,7 @@ import { AddPeopleDropdown } from './AddPeopleDropdown';
 import { PhoneNumberIdentifier } from '@azure/communication-common';
 /* @conditional-compile-remove(PSTN-calls) */
 import { AddPhoneNumberOptions } from '@azure/communication-calling';
+import { Announcer } from '@internal/react-components';
 
 /** @private */
 export interface AddPeopleButtonProps {
@@ -41,10 +42,25 @@ export const AddPeopleButton = (props: AddPeopleButtonProps): JSX.Element => {
 
   const theme = useTheme();
 
+  const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');
+
   const copyLinkButtonStylesThemed = useMemo(
     (): IButtonStyles => concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles(mobileView, theme)),
     [mobileView, theme]
   );
+  /**
+   * sets the announcement string for when the link is copied.
+   */
+  const toggleAnnouncerString = useCallback(() => {
+    setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
+    /**
+     * Clears the announcer string after the user clicks the
+     * copyInviteLink button allowing it to be re-announced.
+     */
+    setTimeout(() => {
+      setCopyInviteLinkAnnouncerStrings('');
+    }, 3000);
+  }, [strings.copyInviteLinkActionedAriaLabel]);
 
   /* @conditional-compile-remove(PSTN-calls) */
   if (mobileView) {
@@ -77,8 +93,12 @@ export const AddPeopleButton = (props: AddPeopleButtonProps): JSX.Element => {
       <Stack>
         {inviteLink && (
           <Stack.Item styles={copyLinkButtonContainerStyles}>
+            <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />
             <PrimaryButton
-              onClick={() => copy(inviteLink ?? '')}
+              onClick={() => {
+                copy(inviteLink ?? '');
+                toggleAnnouncerString();
+              }}
               styles={copyLinkButtonStylesThemed}
               onRenderIcon={() => <CallWithChatCompositeIcon iconName="Link" style={linkIconStyles} />}
               text={strings.copyInviteLinkButtonLabel}
@@ -92,10 +112,14 @@ export const AddPeopleButton = (props: AddPeopleButtonProps): JSX.Element => {
       <Stack tokens={peoplePaneContainerTokens}>
         {inviteLink && (
           <Stack styles={copyLinkButtonStackStyles}>
+            <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />
             <DefaultButton
               text={strings.copyInviteLinkButtonLabel}
               onRenderIcon={() => <CallWithChatCompositeIcon iconName="Link" style={linkIconStyles} />}
-              onClick={() => copy(inviteLink ?? '')}
+              onClick={() => {
+                copy(inviteLink ?? '');
+                toggleAnnouncerString();
+              }}
               styles={copyLinkButtonStylesThemed}
             />
           </Stack>