[bugfix][a11y][update] Associate in this call with username for React 16

change-beta/@azure-communication-react-e86c75be-bb27-4e36-adbe-4baadcbd8787.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Replace useId with a communication react specific id generator for React 16",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-e86c75be-bb27-4e36-adbe-4baadcbd8787.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Replace useId with a communication react specific id generator for React 16",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -14,7 +14,7 @@ import {
   Stack,
   Text
 } from '@fluentui/react';
-import React, { useId, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
@@ -32,6 +32,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-u
 /* @conditional-compile-remove(one-to-n-calling) */
 /* @conditional-compile-remove(PSTN-calls) */
 import { ParticipantState } from '../types';
+import { generateUniqueId } from './utils/common';
 
 /**
  * Fluent styles for {@link ParticipantItem}.
@@ -159,7 +160,7 @@ export const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {
   const theme = useTheme();
   const localeStrings = useLocale().strings.participantItem;
   const ids = useIdentifiers();
-  const uniqueId = useId();
+  const uniqueId = generateUniqueId();
 
   const strings = { ...localeStrings, ...props.strings };
 

packages/react-components/src/components/utils/common.ts

@@ -26,3 +26,12 @@ export const useLocaleFileCardStringsTrampoline = (): _FileUploadCardsStrings =>
 export const _isParticipantStateCallingOrHold = (participantState?: ParticipantState): boolean => {
   return !!participantState && ['Idle', 'Connecting', 'EarlyMedia', 'Ringing', 'Hold'].includes(participantState);
 };
+
+/**
+ * @private
+ * Generate a unique id
+ * TODO: Replace with useId() once React 18 becomes a required dependency.
+ */
+export const generateUniqueId = (): string => {
+  return 'acr-' + Math.floor(Math.random() * Date.now()).toString(16);
+};

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import React, { useId, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import {
   participantListContainerStyle,
   participantListMobileStyle,
@@ -17,6 +17,7 @@ import {
 } from '@internal/react-components';
 import { FocusZone, Stack, Text, useTheme } from '@fluentui/react';
 import { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';
+import { generateUniqueId } from './utils';
 
 type ParticipantContainerProps = {
   onRenderAvatar?: OnRenderAvatarCallback;
@@ -51,7 +52,7 @@ export const ParticipantListWithHeading = (props: {
   onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
 }): JSX.Element => {
   const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, title, participantListProps } = props;
-  const subheadingUniqueId = useId();
+  const subheadingUniqueId = generateUniqueId();
   const theme = useTheme();
   const subheadingStyleThemed = useMemo(
     () => ({

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

@@ -53,3 +53,12 @@ export const useMinMaxDragPosition = (modalLayerHostId: string, rtl?: boolean):
  * @private
  */
 export const defaultSpokenLanguage = 'en-us';
+
+/**
+ * @private
+ *  * Generate a unique id
+ * TODO: Replace with useId() once React 18 becomes a required dependency.
+ */
+export const generateUniqueId = (): string => {
+  return 'acr-' + Math.floor(Math.random() * Date.now()).toString(16);
+};