From 33a7362fa163baadd9675982e2d279f129f03eea Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 12 Sep 2024 14:50:58 -0400
Subject: [PATCH 1/6] fix(PageHeader): add role prop and aria-label in
 top-level element

---
 .../src/Hidden/Hidden.examples.stories.tsx    |  4 +-
 .../src/PageHeader/PageHeader.dev.stories.tsx |  8 +--
 .../PageHeader.examples.stories.tsx           |  6 +--
 .../PageHeader.features.stories.tsx           | 24 ++++-----
 .../src/PageHeader/PageHeader.stories.tsx     |  4 +-
 .../react/src/PageHeader/PageHeader.test.tsx  | 52 ++++++++++++++++---
 packages/react/src/PageHeader/PageHeader.tsx  | 13 ++++-
 .../src/PageHeader/PageHeader.types.test.tsx  | 10 ++--
 .../TooltipV2/Tooltip.examples.stories.tsx    |  2 +-
 9 files changed, 86 insertions(+), 37 deletions(-)

diff --git a/packages/react/src/Hidden/Hidden.examples.stories.tsx b/packages/react/src/Hidden/Hidden.examples.stories.tsx
index ea47ba0f91b..0963b6b5697 100644
--- a/packages/react/src/Hidden/Hidden.examples.stories.tsx
+++ b/packages/react/src/Hidden/Hidden.examples.stories.tsx
@@ -22,7 +22,7 @@ const setViewportParamToNarrow = {
 }
 export const Webhooks = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.ContextArea>
         <PageHeader.ParentLink href="http://github.com">Repository settings</PageHeader.ParentLink>
       </PageHeader.ContextArea>
@@ -51,7 +51,7 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
 
 export const PullRequestPage = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.ContextArea>
         <PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
       </PageHeader.ContextArea>
diff --git a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
index 4dd501791ca..0893ec261dd 100644
--- a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
@@ -18,7 +18,7 @@ export default meta
 
 export const LargeVariantWithMultilineTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.LeadingAction>
         <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
       </PageHeader.LeadingAction>
@@ -46,7 +46,7 @@ export const LargeVariantWithMultilineTitle = () => (
 
 export const ArrayTypeFontSizeOnTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title
           sx={{
@@ -64,7 +64,7 @@ export const ArrayTypeFontSizeOnTitle = () => (
 
 export const ThemeBaseFontSizeOnTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title
           sx={{
@@ -80,7 +80,7 @@ export const ThemeBaseFontSizeOnTitle = () => (
 
 export const StringTypeFontSizeOnTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title
           sx={{
diff --git a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
index e0024100b61..b9cf97b9345 100644
--- a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
@@ -52,7 +52,7 @@ const setViewportParamToNarrow = {
 }
 export const Webhooks = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -78,7 +78,7 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
 
 export const PullRequestPage = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title as="h1">
           PageHeader component initial layout explorations extra long pull request title
@@ -146,7 +146,7 @@ PullRequestPageOnNarrowViewport.parameters = setViewportParamToNarrow
 
 export const FilesPage = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea sx={{alignItems: 'center'}}>
         <Text sx={{color: 'rgb(101, 109, 118)', fontSize: '14px', fontWeight: 'normal'}}>/</Text>
         <PageHeader.Title as="h1" sx={{fontSize: '14px', height: '21px'}}>
diff --git a/packages/react/src/PageHeader/PageHeader.features.stories.tsx b/packages/react/src/PageHeader/PageHeader.features.stories.tsx
index 30966076a04..c53020d7fd4 100644
--- a/packages/react/src/PageHeader/PageHeader.features.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.features.stories.tsx
@@ -31,7 +31,7 @@ const meta: Meta = {
 
 export const HasTitleOnly = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -41,7 +41,7 @@ export const HasTitleOnly = () => (
 
 export const HasLargeTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea variant="large">
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -51,7 +51,7 @@ export const HasLargeTitle = () => (
 
 export const WithLeadingAndTrailingVisuals = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.LeadingVisual>
           <GitPullRequestIcon />
@@ -67,7 +67,7 @@ export const WithLeadingAndTrailingVisuals = () => (
 
 export const WithLeadingVisualHiddenOnRegularViewport = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.LeadingVisual hidden={{regular: true}}>
           <GitPullRequestIcon />
@@ -89,7 +89,7 @@ WithLeadingVisualHiddenOnRegularViewport.parameters = {
 
 export const WithActions = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -107,7 +107,7 @@ export const WithActions = () => (
 
 export const WithDescriptionSlot = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>add-pageheader-docs</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -125,7 +125,7 @@ export const WithDescriptionSlot = () => (
 
 export const WithNavigationSlot = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>Pull request title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -151,7 +151,7 @@ export const WithNavigationSlot = () => (
 
 export const WithCustomNavigation = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>Pull request title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -173,7 +173,7 @@ export const WithCustomNavigation = () => (
 
 export const WithLeadingAndTrailingActions = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -189,7 +189,7 @@ export const WithLeadingAndTrailingActions = () => (
 
 export const WithParentLinkAndActionsOfContextArea = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -215,7 +215,7 @@ WithParentLinkAndActionsOfContextArea.parameters = {
 
 export const WithContextBarAndActionsOfContextArea = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -250,7 +250,7 @@ WithContextBarAndActionsOfContextArea.parameters = {
 }
 export const WithActionsThatHaveResponsiveContent = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
       </PageHeader.TitleArea>
diff --git a/packages/react/src/PageHeader/PageHeader.stories.tsx b/packages/react/src/PageHeader/PageHeader.stories.tsx
index 8239eca6313..1777d8b36a9 100644
--- a/packages/react/src/PageHeader/PageHeader.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.stories.tsx
@@ -189,7 +189,7 @@ export default meta
 
 export const Playground: StoryFn = args => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader aria-label={args.Title} role="banner">
       <PageHeader.TitleArea
         variant={{
           narrow: args['Title.variant'],
@@ -287,7 +287,7 @@ export const Playground: StoryFn = args => (
 
 export const Default = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
diff --git a/packages/react/src/PageHeader/PageHeader.test.tsx b/packages/react/src/PageHeader/PageHeader.test.tsx
index 56511ea7c6e..f6daba48329 100644
--- a/packages/react/src/PageHeader/PageHeader.test.tsx
+++ b/packages/react/src/PageHeader/PageHeader.test.tsx
@@ -29,7 +29,7 @@ describe('PageHeader', () => {
     Component: PageHeader,
     options: {skipAs: true, skipSx: true},
     toRender: () => (
-      <PageHeader>
+      <PageHeader role="banner">
         <PageHeader.TitleArea></PageHeader.TitleArea>
         <PageHeader.ContextArea></PageHeader.ContextArea>
         <PageHeader.Description></PageHeader.Description>
@@ -138,7 +138,7 @@ describe('PageHeader', () => {
   })
   it('respects the title variant prop', () => {
     const {getByText} = render(
-      <PageHeader>
+      <PageHeader role="banner">
         <PageHeader.TitleArea variant="large">
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
@@ -149,7 +149,7 @@ describe('PageHeader', () => {
   })
   it('renders "aria-label" prop when Navigation is rendered as "nav" landmark', () => {
     const {getByLabelText, getByText} = render(
-      <PageHeader>
+      <PageHeader role="banner">
         <PageHeader.TitleArea>
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
@@ -161,9 +161,9 @@ describe('PageHeader', () => {
     expect(getByLabelText('Custom')).toBeInTheDocument()
     expect(getByText('Navigation')).toHaveAttribute('aria-label', 'Custom')
   })
-  it('does not renders "aria-label" prop when Navigation is rendered as "div"', () => {
+  it('does not render "aria-label" prop when Navigation is rendered as "div"', () => {
     const {getByText} = render(
-      <PageHeader>
+      <PageHeader role="banner">
         <PageHeader.TitleArea>
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
@@ -175,7 +175,7 @@ describe('PageHeader', () => {
   it('logs a warning when the Navigation component is rendered as "nav" but no "aria-label" or "aria-labelledby" prop is provided', () => {
     const consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation()
     render(
-      <PageHeader>
+      <PageHeader role="banner">
         <PageHeader.TitleArea>
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
@@ -186,4 +186,44 @@ describe('PageHeader', () => {
 
     consoleSpy.mockRestore()
   })
+  it('does not render "role" attribute when not explicitly specified', () => {
+    const {container} = render(
+      <PageHeader>
+        <PageHeader.TitleArea>
+          <PageHeader.Title>Title</PageHeader.Title>
+        </PageHeader.TitleArea>
+      </PageHeader>,
+    )
+    expect(container.firstChild).not.toHaveAttribute('role')
+  })
+  it('renders "role" attribute when explicitly specified', () => {
+    const {container} = render(
+      <PageHeader role="banner">
+        <PageHeader.TitleArea>
+          <PageHeader.Title>Title</PageHeader.Title>
+        </PageHeader.TitleArea>
+      </PageHeader>,
+    )
+    expect(container.firstChild).toHaveAttribute('role', 'banner')
+  })
+  it('does not render "aria-label" attribute when not explicitly specified', () => {
+    const {container} = render(
+      <PageHeader role="banner">
+        <PageHeader.TitleArea>
+          <PageHeader.Title>Title</PageHeader.Title>
+        </PageHeader.TitleArea>
+      </PageHeader>,
+    )
+    expect(container.firstChild).not.toHaveAttribute('aria-label')
+  })
+  it('renders custom "aria-label" attribute when explicitly specified', () => {
+    const {container} = render(
+      <PageHeader aria-label="Custom aria-label" role="banner">
+        <PageHeader.TitleArea>
+          <PageHeader.Title>Title</PageHeader.Title>
+        </PageHeader.TitleArea>
+      </PageHeader>,
+    )
+    expect(container.firstChild).toHaveAttribute('aria-label', 'Custom aria-label')
+  })
 })
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 2934ed6b99b..d1ec83c2bcd 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -13,6 +13,7 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
 import {warning} from '../utils/warning'
 import {useProvidedRefOrCreate} from '../hooks'
+import type {AriaRole} from '../utils/types'
 
 const GRID_ROW_ORDER = {
   ContextArea: 1,
@@ -63,10 +64,11 @@ export type PageHeaderProps = {
   'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType | 'header' | 'div'
   className?: string
+  role?: AriaRole
 } & SxProp
 
 const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeaderProps>>(
-  ({children, className, sx = {}, as = 'div'}, forwardedRef) => {
+  ({children, className, sx = {}, as = 'div', 'aria-label': ariaLabel, role}, forwardedRef) => {
     const rootStyles = {
       display: 'grid',
       // We have max 5 columns.
@@ -158,7 +160,14 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
       [children, rootRef],
     )
     return (
-      <Box ref={rootRef} as={as} className={className} sx={merge<BetterSystemStyleObject>(rootStyles, sx)}>
+      <Box
+        ref={rootRef}
+        as={as}
+        className={className}
+        sx={merge<BetterSystemStyleObject>(rootStyles, sx)}
+        aria-label={ariaLabel}
+        role={role}
+      >
         {children}
       </Box>
     )
diff --git a/packages/react/src/PageHeader/PageHeader.types.test.tsx b/packages/react/src/PageHeader/PageHeader.types.test.tsx
index 928fb5fb320..40dc050d5a3 100644
--- a/packages/react/src/PageHeader/PageHeader.types.test.tsx
+++ b/packages/react/src/PageHeader/PageHeader.types.test.tsx
@@ -3,21 +3,21 @@ import {PageHeader} from '../PageHeader'
 
 // PageHeader
 export function acceptsAsProp() {
-  return <PageHeader as="header"></PageHeader>
+  return <PageHeader role="banner" as="header"></PageHeader>
 }
 
 export function shouldOnlyAllowValidValuesForAsProp() {
   //    @ts-expect-error as prop should have one of the valid values
-  return <PageHeader as="something"></PageHeader>
+  return <PageHeader role="banner" as="something"></PageHeader>
 }
 
 export function acceptsAriaLabelProp() {
-  return <PageHeader aria-label="Page Header"></PageHeader>
+  return <PageHeader role="banner" aria-label="Page Header"></PageHeader>
 }
 
 export function childrenShouldAcceptHiddenProp() {
   return (
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.ContextArea
         hidden={{
           narrow: true,
@@ -31,7 +31,7 @@ export function childrenShouldAcceptHiddenProp() {
 
 export function hiddenPropAcceptsBooleanValues() {
   return (
-    <PageHeader>
+    <PageHeader role="banner">
       <PageHeader.ContextArea hidden={true}>Context Area</PageHeader.ContextArea>
     </PageHeader>
   )
diff --git a/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx b/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx
index 337e5268761..416bf0f1926 100644
--- a/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx
@@ -28,7 +28,7 @@ export const CustomId = () => (
 )
 
 export const FilesPage = () => (
-  <PageHeader>
+  <PageHeader role="banner">
     <PageHeader.ContextArea>
       <PageHeader.ParentLink>Files</PageHeader.ParentLink>
       <PageHeader.ContextAreaActions>

From 5b1ec7d45e907b5dcf5874c33d4407640e6505ee Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Fri, 13 Sep 2024 16:08:04 -0400
Subject: [PATCH 2/6] docs(PageHeader): add doc for new role prop

---
 packages/react/src/PageHeader/PageHeader.docs.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/PageHeader/PageHeader.docs.json b/packages/react/src/PageHeader/PageHeader.docs.json
index 4ed998ab793..d46ec66f8b4 100644
--- a/packages/react/src/PageHeader/PageHeader.docs.json
+++ b/packages/react/src/PageHeader/PageHeader.docs.json
@@ -10,7 +10,7 @@
       "name": "aria-label",
       "type": "string | undefined",
       "defaultValue": "",
-      "description": "A unique label for the rendered main landmark"
+      "description": "A unique label for the rendered landmark"
     },
     {
       "name": "className",
@@ -24,6 +24,11 @@
       "defaultValue": "false",
       "description": "Whether the content is hidden."
     },
+    {
+      "name": "role",
+      "type": "AriaRole",
+      "description": "The ARIA role to assign to the top-level node of this component."
+    },
     {
       "name": "sx",
       "type": "SystemStyleObject"

From 72d424ea7967b704cdeec41ccec9197482d19af2 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Fri, 13 Sep 2024 17:08:40 -0400
Subject: [PATCH 3/6] docs(PageHeader) add aria-label to sb examples and tests

---
 .../src/Hidden/Hidden.examples.stories.tsx    |  4 ++--
 .../src/PageHeader/PageHeader.dev.stories.tsx | 10 +++++---
 .../PageHeader.examples.stories.tsx           |  9 ++++---
 .../PageHeader.features.stories.tsx           | 24 +++++++++----------
 .../src/PageHeader/PageHeader.stories.tsx     |  2 +-
 .../react/src/PageHeader/PageHeader.test.tsx  |  8 +++----
 .../src/PageHeader/PageHeader.types.test.tsx  |  4 ++--
 .../TooltipV2/Tooltip.examples.stories.tsx    |  2 +-
 8 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/react/src/Hidden/Hidden.examples.stories.tsx b/packages/react/src/Hidden/Hidden.examples.stories.tsx
index 0963b6b5697..238fa0f77cc 100644
--- a/packages/react/src/Hidden/Hidden.examples.stories.tsx
+++ b/packages/react/src/Hidden/Hidden.examples.stories.tsx
@@ -22,7 +22,7 @@ const setViewportParamToNarrow = {
 }
 export const Webhooks = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Webhooks">
       <PageHeader.ContextArea>
         <PageHeader.ParentLink href="http://github.com">Repository settings</PageHeader.ParentLink>
       </PageHeader.ContextArea>
@@ -51,7 +51,7 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
 
 export const PullRequestPage = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Add Hidden utility component">
       <PageHeader.ContextArea>
         <PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
       </PageHeader.ContextArea>
diff --git a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
index 0893ec261dd..864923880bc 100644
--- a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
@@ -18,7 +18,11 @@ export default meta
 
 export const LargeVariantWithMultilineTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader
+      role="banner"
+      aria-label="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.LeadingAction>
         <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
       </PageHeader.LeadingAction>
@@ -46,7 +50,7 @@ export const LargeVariantWithMultilineTitle = () => (
 
 export const ArrayTypeFontSizeOnTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Issue Title">
       <PageHeader.TitleArea>
         <PageHeader.Title
           sx={{
@@ -80,7 +84,7 @@ export const ThemeBaseFontSizeOnTitle = () => (
 
 export const StringTypeFontSizeOnTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Issue Title">
       <PageHeader.TitleArea>
         <PageHeader.Title
           sx={{
diff --git a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
index b9cf97b9345..ff4961563ad 100644
--- a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
@@ -52,7 +52,7 @@ const setViewportParamToNarrow = {
 }
 export const Webhooks = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Webhooks">
       <PageHeader.TitleArea>
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -78,7 +78,10 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
 
 export const PullRequestPage = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader
+      role="banner"
+      aria-label="PageHeader component initial layout explorations extra long pull request title"
+    >
       <PageHeader.TitleArea>
         <PageHeader.Title as="h1">
           PageHeader component initial layout explorations extra long pull request title
@@ -146,7 +149,7 @@ PullRequestPageOnNarrowViewport.parameters = setViewportParamToNarrow
 
 export const FilesPage = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="PageHeader.tsx">
       <PageHeader.TitleArea sx={{alignItems: 'center'}}>
         <Text sx={{color: 'rgb(101, 109, 118)', fontSize: '14px', fontWeight: 'normal'}}>/</Text>
         <PageHeader.Title as="h1" sx={{fontSize: '14px', height: '21px'}}>
diff --git a/packages/react/src/PageHeader/PageHeader.features.stories.tsx b/packages/react/src/PageHeader/PageHeader.features.stories.tsx
index c53020d7fd4..5624ea08c79 100644
--- a/packages/react/src/PageHeader/PageHeader.features.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.features.stories.tsx
@@ -31,7 +31,7 @@ const meta: Meta = {
 
 export const HasTitleOnly = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -41,7 +41,7 @@ export const HasTitleOnly = () => (
 
 export const HasLargeTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea variant="large">
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -51,7 +51,7 @@ export const HasLargeTitle = () => (
 
 export const WithLeadingAndTrailingVisuals = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea>
         <PageHeader.LeadingVisual>
           <GitPullRequestIcon />
@@ -67,7 +67,7 @@ export const WithLeadingAndTrailingVisuals = () => (
 
 export const WithLeadingVisualHiddenOnRegularViewport = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea>
         <PageHeader.LeadingVisual hidden={{regular: true}}>
           <GitPullRequestIcon />
@@ -89,7 +89,7 @@ WithLeadingVisualHiddenOnRegularViewport.parameters = {
 
 export const WithActions = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -107,7 +107,7 @@ export const WithActions = () => (
 
 export const WithDescriptionSlot = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Add-pageheader-docs">
       <PageHeader.TitleArea>
         <PageHeader.Title>add-pageheader-docs</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -125,7 +125,7 @@ export const WithDescriptionSlot = () => (
 
 export const WithNavigationSlot = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Pull request title">
       <PageHeader.TitleArea>
         <PageHeader.Title>Pull request title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -151,7 +151,7 @@ export const WithNavigationSlot = () => (
 
 export const WithCustomNavigation = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Pull request title">
       <PageHeader.TitleArea>
         <PageHeader.Title>Pull request title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -173,7 +173,7 @@ export const WithCustomNavigation = () => (
 
 export const WithLeadingAndTrailingActions = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -189,7 +189,7 @@ export const WithLeadingAndTrailingActions = () => (
 
 export const WithParentLinkAndActionsOfContextArea = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -215,7 +215,7 @@ WithParentLinkAndActionsOfContextArea.parameters = {
 
 export const WithContextBarAndActionsOfContextArea = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
@@ -250,7 +250,7 @@ WithContextBarAndActionsOfContextArea.parameters = {
 }
 export const WithActionsThatHaveResponsiveContent = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Webhooks">
       <PageHeader.TitleArea>
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
       </PageHeader.TitleArea>
diff --git a/packages/react/src/PageHeader/PageHeader.stories.tsx b/packages/react/src/PageHeader/PageHeader.stories.tsx
index 1777d8b36a9..0099a0fb060 100644
--- a/packages/react/src/PageHeader/PageHeader.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.stories.tsx
@@ -287,7 +287,7 @@ export const Playground: StoryFn = args => (
 
 export const Default = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Title">
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
       </PageHeader.TitleArea>
diff --git a/packages/react/src/PageHeader/PageHeader.test.tsx b/packages/react/src/PageHeader/PageHeader.test.tsx
index f6daba48329..e1cb4160afd 100644
--- a/packages/react/src/PageHeader/PageHeader.test.tsx
+++ b/packages/react/src/PageHeader/PageHeader.test.tsx
@@ -138,7 +138,7 @@ describe('PageHeader', () => {
   })
   it('respects the title variant prop', () => {
     const {getByText} = render(
-      <PageHeader role="banner">
+      <PageHeader role="banner" aria-label="Title">
         <PageHeader.TitleArea variant="large">
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
@@ -149,7 +149,7 @@ describe('PageHeader', () => {
   })
   it('renders "aria-label" prop when Navigation is rendered as "nav" landmark', () => {
     const {getByLabelText, getByText} = render(
-      <PageHeader role="banner">
+      <PageHeader role="banner" aria-label="Title">
         <PageHeader.TitleArea>
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
@@ -163,7 +163,7 @@ describe('PageHeader', () => {
   })
   it('does not render "aria-label" prop when Navigation is rendered as "div"', () => {
     const {getByText} = render(
-      <PageHeader role="banner">
+      <PageHeader role="banner" aria-label="Title">
         <PageHeader.TitleArea>
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
@@ -175,7 +175,7 @@ describe('PageHeader', () => {
   it('logs a warning when the Navigation component is rendered as "nav" but no "aria-label" or "aria-labelledby" prop is provided', () => {
     const consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation()
     render(
-      <PageHeader role="banner">
+      <PageHeader role="banner" aria-label="Title">
         <PageHeader.TitleArea>
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
diff --git a/packages/react/src/PageHeader/PageHeader.types.test.tsx b/packages/react/src/PageHeader/PageHeader.types.test.tsx
index 40dc050d5a3..cfbf23cb773 100644
--- a/packages/react/src/PageHeader/PageHeader.types.test.tsx
+++ b/packages/react/src/PageHeader/PageHeader.types.test.tsx
@@ -17,7 +17,7 @@ export function acceptsAriaLabelProp() {
 
 export function childrenShouldAcceptHiddenProp() {
   return (
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Context Area">
       <PageHeader.ContextArea
         hidden={{
           narrow: true,
@@ -31,7 +31,7 @@ export function childrenShouldAcceptHiddenProp() {
 
 export function hiddenPropAcceptsBooleanValues() {
   return (
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Banner">
       <PageHeader.ContextArea hidden={true}>Context Area</PageHeader.ContextArea>
     </PageHeader>
   )
diff --git a/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx b/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx
index 416bf0f1926..00bee4e2db9 100644
--- a/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx
@@ -28,7 +28,7 @@ export const CustomId = () => (
 )
 
 export const FilesPage = () => (
-  <PageHeader role="banner">
+  <PageHeader role="banner" aria-label="Banner">
     <PageHeader.ContextArea>
       <PageHeader.ParentLink>Files</PageHeader.ParentLink>
       <PageHeader.ContextAreaActions>

From 5d7b1a0b5f0337749264e7ccf25de1240946ba6d Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Fri, 13 Sep 2024 17:10:53 -0400
Subject: [PATCH 4/6] Create fifty-rockets-joke.md

---
 .changeset/fifty-rockets-joke.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fifty-rockets-joke.md

diff --git a/.changeset/fifty-rockets-joke.md b/.changeset/fifty-rockets-joke.md
new file mode 100644
index 00000000000..41fe6d3c7d0
--- /dev/null
+++ b/.changeset/fifty-rockets-joke.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(PageHeader): add role prop and aria-label in top-level element

From 2f41ceea2687cfec7fe4b8ad81d1137bc17e9e40 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Fri, 13 Sep 2024 17:16:21 -0400
Subject: [PATCH 5/6] docs(PageHeader) add aria-label to sb example

---
 packages/react/src/PageHeader/PageHeader.dev.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
index 864923880bc..ce7cabd967a 100644
--- a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
@@ -68,7 +68,7 @@ export const ArrayTypeFontSizeOnTitle = () => (
 
 export const ThemeBaseFontSizeOnTitle = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader role="banner">
+    <PageHeader role="banner" aria-label="Issue Title">
       <PageHeader.TitleArea>
         <PageHeader.Title
           sx={{

From 863c1e11bfb3589e9dc9d6c9a9cdf1cb5ea42d34 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Fri, 13 Sep 2024 17:18:28 -0400
Subject: [PATCH 6/6] test(PageHeader) add aria-label to test

---
 packages/react/src/PageHeader/PageHeader.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/PageHeader/PageHeader.test.tsx b/packages/react/src/PageHeader/PageHeader.test.tsx
index e1cb4160afd..48dbf0f08f2 100644
--- a/packages/react/src/PageHeader/PageHeader.test.tsx
+++ b/packages/react/src/PageHeader/PageHeader.test.tsx
@@ -29,7 +29,7 @@ describe('PageHeader', () => {
     Component: PageHeader,
     options: {skipAs: true, skipSx: true},
     toRender: () => (
-      <PageHeader role="banner">
+      <PageHeader role="banner" aria-label="Banner">
         <PageHeader.TitleArea></PageHeader.TitleArea>
         <PageHeader.ContextArea></PageHeader.ContextArea>
         <PageHeader.Description></PageHeader.Description>