From 36761f91b4a30144f695d5f5fd6c7686f3d8c2ff Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Tue, 12 Sep 2023 13:54:43 -0500
Subject: [PATCH 1/2] fix(PageLayout): restore main landmark

---
 src/PageLayout/PageLayout.test.tsx            | 19 +++++++++++-----
 src/PageLayout/PageLayout.tsx                 |  8 +++++++
 .../__snapshots__/PageLayout.test.tsx.snap    | 22 ++++++++-----------
 .../SplitPageLayout.test.tsx.snap             |  4 ++--
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx
index 4ef0db36871..ab96d4beaed 100644
--- a/src/PageLayout/PageLayout.test.tsx
+++ b/src/PageLayout/PageLayout.test.tsx
@@ -23,9 +23,7 @@ describe('PageLayout', () => {
       <ThemeProvider>
         <PageLayout>
           <PageLayout.Header>Header</PageLayout.Header>
-          <PageLayout.Content>
-            <main aria-label="Content">Content</main>
-          </PageLayout.Content>
+          <PageLayout.Content>Content</PageLayout.Content>
           <PageLayout.Pane>Pane</PageLayout.Pane>
           <PageLayout.Footer>Footer</PageLayout.Footer>
         </PageLayout>
@@ -133,7 +131,7 @@ describe('PageLayout', () => {
     )
 
     expect(screen.getByRole('banner')).toHaveAccessibleName('Header')
-    expect(screen.getByLabelText('Content')).toHaveAccessibleName('Content')
+    expect(screen.getByRole('main')).toHaveAccessibleName('Content')
     expect(screen.getByRole('contentinfo')).toHaveAccessibleName('Footer')
   })
 
@@ -156,7 +154,7 @@ describe('PageLayout', () => {
     )
 
     expect(screen.getByRole('banner')).toHaveAccessibleName('header')
-    expect(screen.getByLabelText('content')).toBeInTheDocument()
+    expect(screen.getByRole('main')).toHaveAccessibleName('content')
     expect(screen.getByRole('contentinfo')).toHaveAccessibleName('footer')
   })
 
@@ -202,4 +200,15 @@ describe('PageLayout', () => {
       expect(finalWidth).not.toEqual(initialWidth)
     })
   })
+
+  describe('PageLayout.Content', () => {
+    it('should support a custom element type with the `as` prop', () => {
+      const {container} = render(
+        <PageLayout.Content as="div">
+          <main>Content</main>
+        </PageLayout.Content>,
+      )
+      expect(container.firstChild?.nodeName).toEqual('DIV')
+    })
+  })
 })
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 54af5598b73..1a556ee09ba 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -385,6 +385,12 @@ Header.displayName = 'PageLayout.Header'
 // PageLayout.Content
 
 export type PageLayoutContentProps = {
+  /**
+   * Provide an optional element type for the outermost element rendered by the component.
+   * @default 'main'
+   */
+  as?: React.ElementType
+
   /**
    * A unique label for the rendered main landmark
    */
@@ -408,6 +414,7 @@ const contentWidths = {
 }
 
 const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
+  as = 'main',
   'aria-label': label,
   'aria-labelledby': labelledBy,
   width = 'full',
@@ -421,6 +428,7 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
 
   return (
     <Box
+      as={as}
       aria-label={label}
       aria-labelledby={labelledBy}
       sx={merge<BetterSystemStyleObject>(
diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index 065aef492b0..97b5bfbea64 100644
--- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -199,7 +199,7 @@ exports[`PageLayout renders condensed layout 1`] = `
       <div
         class="c5"
       >
-        <div
+        <main
           class="c6"
         >
           <div
@@ -213,7 +213,7 @@ exports[`PageLayout renders condensed layout 1`] = `
           <div
             class=""
           />
-        </div>
+        </main>
         <div
           class="c8"
         >
@@ -493,7 +493,7 @@ exports[`PageLayout renders default layout 1`] = `
       <div
         class="c5"
       >
-        <div
+        <main
           class="c6"
         >
           <div
@@ -502,16 +502,12 @@ exports[`PageLayout renders default layout 1`] = `
           <div
             class="c7"
           >
-            <main
-              aria-label="Content"
-            >
-              Content
-            </main>
+            Content
           </div>
           <div
             class=""
           />
-        </div>
+        </main>
         <div
           class="c8"
         >
@@ -791,7 +787,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
       <div
         class="c5"
       >
-        <div
+        <main
           class="c6"
         >
           <div
@@ -805,7 +801,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
           <div
             class=""
           />
-        </div>
+        </main>
         <div
           class="c8"
         >
@@ -1085,7 +1081,7 @@ exports[`PageLayout renders with dividers 1`] = `
       <div
         class="c5"
       >
-        <div
+        <main
           class="c6"
         >
           <div
@@ -1099,7 +1095,7 @@ exports[`PageLayout renders with dividers 1`] = `
           <div
             class=""
           />
-        </div>
+        </main>
         <div
           class="c8"
         >
diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
index 1486e3792bb..c35d5dc97cd 100644
--- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
+++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -234,7 +234,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
       <div
         class="c5"
       >
-        <div
+        <main
           class="c6"
         >
           <div
@@ -248,7 +248,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
           <div
             class=""
           />
-        </div>
+        </main>
         <div
           class="c8"
         >

From 245b067c924cc261822ddc06ca17a96a28c0eea5 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Tue, 12 Sep 2023 13:57:56 -0500
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/friendly-shirts-protect.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/friendly-shirts-protect.md

diff --git a/.changeset/friendly-shirts-protect.md b/.changeset/friendly-shirts-protect.md
new file mode 100644
index 00000000000..7d22c8fb108
--- /dev/null
+++ b/.changeset/friendly-shirts-protect.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Restore default main landmark in PageLayout.Content
+
+<!-- Changed components: PageLayout, SplitPageLayout -->