Fix bug where 'in this call' text is incorrectly wrapped inside h2 tag (#6010)

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

* add missing style

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites ChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update embed html bundle snapshots

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* Update so styling is not changed

* Revert "Update packages/react-composites CallWithChatComposite browser test snapshots"

This reverts commit 2938650.

* Revert "Update embed html bundle snapshots"

This reverts commit c58a60d.

* Revert "Update packages/react-composites CallComposite browser test snapshots"

This reverts commit 3af21bc.

* Revert "Update packages/react-composites CallComposite browser test snapshots"

This reverts commit 62e3cca.

* revert snapshots

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: carocao-msft

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -71,12 +71,10 @@ export const ParticipantListWithHeading = (props: {
   const subheadingStyleThemed = useMemo(
     () => ({
       root: {
-        h2: {
-          color: theme.palette.neutralSecondary,
-          margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',
-          fontSize: theme.fonts.smallPlus.fontSize,
-          fontWeight: 'normal'
-        }
+        color: theme.palette.neutralSecondary,
+        margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',
+        fontSize: theme.fonts.smallPlus.fontSize,
+        fontWeight: 'normal'
       }
     }),
     [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]
@@ -86,12 +84,10 @@ 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>
-            {paneTitleTrampoline(
-              title ?? '',
-              /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount
-            )}
-          </h2>
+          {paneTitleTrampoline(
+            title ?? '',
+            /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount
+          )}
         </Stack.Item>
         {(onClickHeadingMoreButton ||
           (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (