PageHeader: Address dom order issues (screen reader experience feedback from sign-off)

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',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })

script/generate-e2e-tests.js

@@ -871,6 +871,10 @@ const components = new Map([
           id: 'drafts-components-pageheader-features--with-parent-link-and-actions-of-context-area',
           name: 'With Parent Link and Actions of Context Area',
         },
+        {
+          id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+          name: 'Large Variant with Multiline Title',
+        },
       ],
     },
   ],

src/PageHeader/PageHeader.dev.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import {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'
+
+export default {
+  title: 'Drafts/Components/PageHeader/DevOnly',
+  parameters: {
+    layout: 'fullscreen',
+    controls: {expanded: true},
+  },
+} as 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>
+)