Fix bug where 'in this call' text is incorrectly wrapped inside h2 tag

change/@azure-communication-react-d4f2f781-4d16-4eb6-af75-d5c647c6ec99.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Participant container",
+  "comment": "Fix bug where 'in this call' text is incorrectly wrapped inside h2 tag",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -71,7 +71,7 @@ export const ParticipantListWithHeading = (props: {
   const subheadingStyleThemed = useMemo(
     () => ({
       root: {
-        h2: {
+        '.participant-container-heading': {
           color: theme.palette.neutralSecondary,
           margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',
           fontSize: theme.fonts.smallPlus.fontSize,
@@ -86,12 +86,12 @@ export const ParticipantListWithHeading = (props: {
     <Stack className={participantListStack}>
       <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
         <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>
-          <h2>
+          <span className="participant-container-heading">
             {paneTitleTrampoline(
               title ?? '',
               /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount
             )}
-          </h2>
+          </span>
         </Stack.Item>
         {(onClickHeadingMoreButton ||
           (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (