[bugfix][a11y][update] Associate in this call with username for React 16 (#3239)

* Expose aria-labelledby prop for participantItems

Author: edwardlee-msft

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 { useId } from '@fluentui/react-hooks';
 
 /**
  * Fluent styles for {@link ParticipantItem}.

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 { useId } from '@fluentui/react-hooks';
 
 type ParticipantContainerProps = {
   onRenderAvatar?: OnRenderAvatarCallback;