fix(html-reporter): use h2 for non-expandable chip headers

packages/html-reporter/src/chip.css

@@ -23,7 +23,7 @@
   background-color: var(--color-canvas-subtle);
   padding: 0 8px;
   border-bottom: none;
-  margin-top: 12px;
+  margin: 12px 0 0;
   color: inherit;
   font: inherit;
   font-weight: 600;

packages/html-reporter/src/chip.spec.ts

@@ -50,10 +50,13 @@ test('body render prop is rendered', async ({ mount }) => {
   await expect(component.getByText('Chip children')).toBeVisible();
 });
 
-test('chip without setExpanded is not a button', async ({ mount }) => {
+test('chip without setExpanded is a heading', async ({ mount }) => {
   const component = await mount<typeof NotExpandable>('chip/NotExpandable');
   await expect(component.getByRole('button')).toHaveCount(0);
-  await expect(component.getByText('Body')).toBeVisible();
+  await expect(component).toMatchAriaSnapshot(`
+    - heading "Title" [level=2]
+    - region: Body
+  `);
 });
 
 test('expand collapse with the keyboard', async ({ mount, page }) => {

packages/html-reporter/src/chip.tsx

@@ -47,9 +47,9 @@ export const Chip: React.FC<{
       onClick={() => setExpanded(!expanded)}
       title={title}>
       {headerContent}
-    </button> : <div className='chip-header' title={title}>
+    </button> : <h2 className='chip-header' title={title}>
       {headerContent}
-    </div>}
+    </h2>}
     {(!setExpanded || expanded) && <div id={id} role='region' className={clsx('chip-body', noInsets && 'chip-body-no-insets')}>
       {children}
       {body && body()}

tests/playwright-test/reporter-html.spec.ts

@@ -3431,7 +3431,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
         await expect(page.getByRole('link', { name: 'Speedboard' })).toHaveAttribute('aria-selected', 'true');
 
         await expect(page).toMatchAriaSnapshot(`
-          - text: /Slowest Tests/
+          - heading "Slowest Tests" [level=2]
           - region:
             - list:
               - listitem:
@@ -3455,7 +3455,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
         `);
         await page.getByText('foo').first().click();
         await expect(page).toMatchAriaSnapshot(`
-          - text: /Slowest Tests/
+          - heading "Slowest Tests" [level=2]
         `);
 
         await page.getByRole('link', { name: 'Failed' }).click();