From 665bceada5bab2791d3ab1b54d240f247f21d2fb Mon Sep 17 00:00:00 2001
From: Jeremy Neal <hello@radglob.com>
Date: Mon, 28 Aug 2023 11:21:48 -0400
Subject: [PATCH] Don't render main landmark in PageLayout.Content, leave it up
 to developers to specify.

---
 .changeset/angry-beds-itch.md                 |  7 ++++++
 src/PageLayout/PageLayout.test.tsx            |  8 ++++---
 src/PageLayout/PageLayout.tsx                 |  1 -
 .../__snapshots__/PageLayout.test.tsx.snap    | 22 +++++++++++--------
 .../SplitPageLayout.test.tsx.snap             |  4 ++--
 5 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/angry-beds-itch.md

diff --git a/.changeset/angry-beds-itch.md b/.changeset/angry-beds-itch.md
new file mode 100644
index 00000000000..851b988409d
--- /dev/null
+++ b/.changeset/angry-beds-itch.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+PageLayout.Content no longer renders as `main` by default. Instead, developers may add a `main` landmark within `Pagelayout.Content` themselves.
+
+<!-- Changed components: PageLayout -->
diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx
index 03abd241912..4ef0db36871 100644
--- a/src/PageLayout/PageLayout.test.tsx
+++ b/src/PageLayout/PageLayout.test.tsx
@@ -23,7 +23,9 @@ describe('PageLayout', () => {
       <ThemeProvider>
         <PageLayout>
           <PageLayout.Header>Header</PageLayout.Header>
-          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Content>
+            <main aria-label="Content">Content</main>
+          </PageLayout.Content>
           <PageLayout.Pane>Pane</PageLayout.Pane>
           <PageLayout.Footer>Footer</PageLayout.Footer>
         </PageLayout>
@@ -131,7 +133,7 @@ describe('PageLayout', () => {
     )
 
     expect(screen.getByRole('banner')).toHaveAccessibleName('Header')
-    expect(screen.getByRole('main')).toHaveAccessibleName('Content')
+    expect(screen.getByLabelText('Content')).toHaveAccessibleName('Content')
     expect(screen.getByRole('contentinfo')).toHaveAccessibleName('Footer')
   })
 
@@ -154,7 +156,7 @@ describe('PageLayout', () => {
     )
 
     expect(screen.getByRole('banner')).toHaveAccessibleName('header')
-    expect(screen.getByRole('main')).toHaveAccessibleName('content')
+    expect(screen.getByLabelText('content')).toBeInTheDocument()
     expect(screen.getByRole('contentinfo')).toHaveAccessibleName('footer')
   })
 
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 71371fc4233..54af5598b73 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -421,7 +421,6 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
 
   return (
     <Box
-      as="main"
       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 97b5bfbea64..065aef492b0 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"
       >
-        <main
+        <div
           class="c6"
         >
           <div
@@ -213,7 +213,7 @@ exports[`PageLayout renders condensed layout 1`] = `
           <div
             class=""
           />
-        </main>
+        </div>
         <div
           class="c8"
         >
@@ -493,7 +493,7 @@ exports[`PageLayout renders default layout 1`] = `
       <div
         class="c5"
       >
-        <main
+        <div
           class="c6"
         >
           <div
@@ -502,12 +502,16 @@ exports[`PageLayout renders default layout 1`] = `
           <div
             class="c7"
           >
-            Content
+            <main
+              aria-label="Content"
+            >
+              Content
+            </main>
           </div>
           <div
             class=""
           />
-        </main>
+        </div>
         <div
           class="c8"
         >
@@ -787,7 +791,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
       <div
         class="c5"
       >
-        <main
+        <div
           class="c6"
         >
           <div
@@ -801,7 +805,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
           <div
             class=""
           />
-        </main>
+        </div>
         <div
           class="c8"
         >
@@ -1081,7 +1085,7 @@ exports[`PageLayout renders with dividers 1`] = `
       <div
         class="c5"
       >
-        <main
+        <div
           class="c6"
         >
           <div
@@ -1095,7 +1099,7 @@ exports[`PageLayout renders with dividers 1`] = `
           <div
             class=""
           />
-        </main>
+        </div>
         <div
           class="c8"
         >
diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
index c35d5dc97cd..1486e3792bb 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"
       >
-        <main
+        <div
           class="c6"
         >
           <div
@@ -248,7 +248,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
           <div
             class=""
           />
-        </main>
+        </div>
         <div
           class="c8"
         >