PageHeader: Address dom order issues (screen reader experience feedba…

…ck from sign-off) (#4358)

* Update layout styles so that all interactive elements come after the title

* Add PageHeder.Breadcrumbs sub component

* remove shapshot check on jest

* test(vrt): update snapshots

* test(vrt): update snapshots

* make the interactive element in the heading check a warning not error

* add pageheader story for screen reader tes

* add links

* add onclick events to the buttons

* add a placeholder for file content example

* test(vrt): update snapshots

* elements losing context when viewport is narrrow - keep the same text for buttons in all viewports

* fix linting

* test(vrt): update snapshots

* hide the overflow menu in narrow since we show it on the context area

* accomodate different format sx prop for font size

* when no fontsize is specified css var returns as an empty string so need ternary instead of Nullish coalescing

* temporary fix on navlist

---------

Co-authored-by: broccolinisoup <[email protected]>

.changeset/clever-schools-shave.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+PageHeader: Update the layout styles so that all interactive content comes after the title (while keeping the component visually the same)
+This is a breaking change however PageHeader is still a draft component so we are releasing the changes as minor but please upgrade with caution.
+```

e2e/components/PageHeader.test.ts

@@ -673,4 +673,38 @@ test.describe('PageHeader', () => {
       })
     }
   })
+
+  test.describe('Large Variant with Multiline Title', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`PageHeader.Large Variant with Multiline Title.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })

packages/react/src/PageHeader/PageHeader.dev.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {Button, IconButton, Box} from '..'
+import Label from '../Label'
+import {GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-react'
+
+import {PageHeader} from './PageHeader'
+
+const meta: Meta<typeof PageHeader> = {
+  title: 'Drafts/Components/PageHeader/DevOnly',
+  parameters: {
+    layout: 'fullscreen',
+    controls: {expanded: true},
+  },
+}
+
+export default meta
+
+export const LargeVariantWithMultilineTitle = () => (
+  <Box sx={{padding: 3}}>
+    <PageHeader>
+      <PageHeader.LeadingAction>
+        <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
+      </PageHeader.LeadingAction>
+      <PageHeader.TitleArea variant="large">
+        <PageHeader.LeadingVisual>
+          <GitBranchIcon />
+        </PageHeader.LeadingVisual>
+        <PageHeader.Title>
+          Title long title some extra loooong looong words here some extra loooong looong words here some extra loooong
+          looong words here some extra loooong looong words here some extra loooong looong words here
+        </PageHeader.Title>
+        <PageHeader.TrailingVisual>
+          <Label>Beta</Label>
+        </PageHeader.TrailingVisual>
+      </PageHeader.TitleArea>
+      <PageHeader.TrailingAction>
+        <IconButton aria-label="Expand sidebar" icon={SidebarExpandIcon} variant="invisible" />
+      </PageHeader.TrailingAction>
+      <PageHeader.Actions>
+        <Button variant="primary">Add Item</Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  </Box>
+)
+
+export const ArrayTypeFontSizeOnTitle = () => (
+  <Box sx={{padding: 3}}>
+    <PageHeader>
+      <PageHeader.TitleArea>
+        <PageHeader.Title
+          sx={{
+            lineHeight: '1.25',
+            fontWeight: 'normal',
+            fontSize: ['26px', '26px', 'var(--text-title-size-large, 32px)', 'var(--text-title-size-large, 32px)'], // it doesn't support this format right now.
+          }}
+        >
+          Issue Title
+        </PageHeader.Title>
+      </PageHeader.TitleArea>
+    </PageHeader>
+  </Box>
+)
+
+export const ThemeBaseFontSizeOnTitle = () => (
+  <Box sx={{padding: 3}}>
+    <PageHeader>
+      <PageHeader.TitleArea>
+        <PageHeader.Title
+          sx={{
+            fontSize: 8,
+          }}
+        >
+          Issue Title
+        </PageHeader.Title>
+      </PageHeader.TitleArea>
+    </PageHeader>
+  </Box>
+)
+
+export const StringTypeFontSizeOnTitle = () => (
+  <Box sx={{padding: 3}}>
+    <PageHeader>
+      <PageHeader.TitleArea>
+        <PageHeader.Title
+          sx={{
+            fontSize: '56px',
+          }}
+        >
+          Issue Title
+        </PageHeader.Title>
+      </PageHeader.TitleArea>
+    </PageHeader>
+  </Box>
+)