[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/acs-ui-common/review/beta/acs-ui-common.api.md

@@ -42,6 +42,9 @@ export const fromFlatCommunicationIdentifier: (id: string) => CommunicationIdent
 // @public
 export type FunctionWithKey<KeyT, ArgsT extends unknown[], RetT> = (key: KeyT, ...args: ArgsT) => RetT;
 
+// @internal
+export const _generateUniqueId: () => string;
+
 // @internal
 export const _getApplicationId: () => string;
 

packages/acs-ui-common/review/stable/acs-ui-common.api.md

@@ -42,6 +42,9 @@ export const fromFlatCommunicationIdentifier: (id: string) => CommunicationIdent
 // @public
 export type FunctionWithKey<KeyT, ArgsT extends unknown[], RetT> = (key: KeyT, ...args: ArgsT) => RetT;
 
+// @internal
+export const _generateUniqueId: () => string;
+
 // @internal
 export const _getApplicationId: () => string;
 

packages/acs-ui-common/src/common.ts

@@ -27,3 +27,12 @@ export const _preventDismissOnEvent = (
 ): boolean => {
   return ev.type === 'resize' || ev.type === 'scroll';
 };
+
+/**
+ * @internal
+ *  * Generate a unique id
+ * TODO: Replace with useId() once React 18 becomes a required dependency.
+ */
+export const _generateUniqueId = (): string => {
+  return 'acr-' + self.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
+};

packages/acs-ui-common/src/index.ts

@@ -11,7 +11,7 @@ export {
 export { _getApplicationId } from './telemetry';
 export { _formatString } from './localizationUtils';
 export { _safeJSONStringify } from './safeStringify';
-export { _convertRemToPx, _preventDismissOnEvent } from './common';
+export { _convertRemToPx, _preventDismissOnEvent, _generateUniqueId } from './common';
 
 export type { Common, CommonProperties } from './commonProperties';
 export type { CallbackType, FunctionWithKey } from './memoizeFnAll';

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 '@internal/acs-ui-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-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 '@internal/acs-ui-common';
 
 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(
     () => ({