PageLayout.Content should not use main landmark by default.

.changeset/eleven-humans-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+PageLayout.Content no longer renders as `main` by default. Instead, developers may add a `main` landmark within `Pagelayout.Content` themselves.

src/PageLayout/PageLayout.test.tsx

@@ -123,7 +123,9 @@ describe('PageLayout', () => {
       <ThemeProvider>
         <PageLayout>
           <PageLayout.Header aria-label="header">Header</PageLayout.Header>
-          <PageLayout.Content aria-label="content">Content</PageLayout.Content>
+          <PageLayout.Content>
+            <main aria-label="content">Content</main>
+          </PageLayout.Content>
           <PageLayout.Pane>Pane</PageLayout.Pane>
           <PageLayout.Footer aria-label="footer">Footer</PageLayout.Footer>
         </PageLayout>
@@ -142,7 +144,7 @@ describe('PageLayout', () => {
           <PageLayout.Header aria-labelledby="header-label">
             <span id="header-label">header</span>
           </PageLayout.Header>
-          <PageLayout.Content aria-labelledby="content-label">
+          <PageLayout.Content aria-labelledby="content-label" role="main">
             <span id="content-label">content</span>
           </PageLayout.Content>
           <PageLayout.Pane>Pane</PageLayout.Pane>

src/PageLayout/PageLayout.tsx

@@ -397,6 +397,7 @@ export type PageLayoutContentProps = {
   width?: keyof typeof contentWidths
   padding?: keyof typeof SPACING_MAP
   hidden?: boolean | ResponsiveValue<boolean>
+  role?: string
 } & SxProp
 
 // TODO: Account for pane width when centering content
@@ -413,6 +414,7 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
   width = 'full',
   padding = 'none',
   hidden = false,
+  role,
   children,
   sx = {},
 }) => {
@@ -421,9 +423,9 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
 
   return (
     <Box
-      as="main"
       aria-label={label}
       aria-labelledby={labelledBy}
+      role={role}
       sx={merge<BetterSystemStyleObject>(
         {
           display: isHidden ? 'none' : 'flex',

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
@@ -507,7 +507,7 @@ exports[`PageLayout renders default layout 1`] = `
           <div
             class=""
           />
-        </main>
+        </div>
         <div
           class="c8"
         >
@@ -787,7 +787,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
       <div
         class="c5"
       >
-        <main
+        <div
           class="c6"
         >
           <div
@@ -801,7 +801,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
           <div
             class=""
           />
-        </main>
+        </div>
         <div
           class="c8"
         >
@@ -1081,7 +1081,7 @@ exports[`PageLayout renders with dividers 1`] = `
       <div
         class="c5"
       >
-        <main
+        <div
           class="c6"
         >
           <div
@@ -1095,7 +1095,7 @@ exports[`PageLayout renders with dividers 1`] = `
           <div
             class=""
           />
-        </main>
+        </div>
         <div
           class="c8"
         >

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"
         >