refactor(assistant): Improve accessibility with semantic heading and Fluent UI Subtitle2 component (#8711)

* Update tag and styles for header

* Add unit test

Author: ccastrotrejo

libs/chatbot/src/lib/ui/__test__/panelheader.spec.tsx

@@ -126,6 +126,13 @@ describe('ui/panelheader/CopilotPanelHeader', () => {
       expect(icon.tagName.toLowerCase()).toBe('img');
     });
 
+    it('should use semantic h2 heading for the header title', () => {
+      renderWithProviders(<CopilotPanelHeader closeCopilot={closeCopilotMock} />);
+
+      const heading = screen.getByRole('heading', { level: 2, name: 'Workflow assistant' });
+      expect(heading).toBeDefined();
+    });
+
     it('should have aria-label on protected pill tooltip for screen readers', () => {
       renderWithProviders(<CopilotPanelHeader closeCopilot={closeCopilotMock} />);
 

libs/chatbot/src/lib/ui/panelheader.tsx

@@ -1,6 +1,6 @@
 import Workflow from '../images/Workflow.svg';
 import { FontSizes, Link, useTheme } from '@fluentui/react';
-import { Tooltip, mergeClasses } from '@fluentui/react-components';
+import { Tooltip, mergeClasses, Subtitle2 } from '@fluentui/react-components';
 import { ShieldCheckmarkRegular } from '@fluentui/react-icons';
 import { IconButton } from '@fluentui/react/lib/Button';
 import { LogEntryLevel, LoggerService } from '@microsoft/logic-apps-shared';
@@ -50,9 +50,9 @@ export const CopilotPanelHeader = ({ closeCopilot }: CopilotPanelHeaderProps): J
       <div className={styles.headerIcon}>
         <img src={Workflow} alt="Logic Apps" />
       </div>
-      <div className={styles.headerTitleContainer}>
-        <div className={styles.headerTitle}>{headerTitle}</div>
-        <div className={mergeClasses(styles.headerSubtitle, isInverted && darkStyles.headerSubtitle)}>{subtitleText}</div>
+      <div>
+        <h2 className={styles.headerTitle}>{headerTitle}</h2>
+        <Subtitle2 className={mergeClasses(styles.headerSubtitle, isInverted && darkStyles.headerSubtitle)}>{subtitleText}</Subtitle2>
       </div>
       <div>
         <Tooltip content={protectedMessage} relationship="label" positioning="below" withArrow>

libs/chatbot/src/lib/ui/styles.ts

@@ -40,10 +40,6 @@ export const useChatbotStyles = makeStyles({
     ...shorthands.margin(0, 0, '5px', '5px'),
   },
 
-  headerTitleContainer: {
-    // Nested styles handled in separate classes
-  },
-
   headerTitle: {
     fontWeight: tokens.fontWeightSemibold,
     fontSize: tokens.fontSizeBase400,
@@ -56,9 +52,10 @@ export const useChatbotStyles = makeStyles({
     width: 'fit-content',
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
+    borderRadius: tokens.borderRadiusCircular,
     lineHeight: '15px',
     color: tokens.colorNeutralForeground2,
+    display: 'block',
   },
 
   // Mode pill styles