fix(PageLayout): restore main landmark

primer · Sep 12, 2023 · 36761f9 · 36761f9
1 parent 8928acc
commit 36761f9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"
         >
-Original file line number
+Diff line change
@@ Expand Up / @@ -234,7 +234,7 @@ exports[`SplitPageLayout renders default layout 1`] = ` @@
           <div
             class="c5"
           >
-            <div
+            <main
               class="c6"
             >
               <div
@@ Expand All / @@ -248,7 +248,7 @@ exports[`SplitPageLayout renders default layout 1`] = ` @@
               <div
                 class=""
               />
-            </div>
+            </main>
             <div
               class="c8"
             >
@@ Expand Down @@