fix: a11y: move skip link anchor entry point to unique page content i…

…n default layout (#1212)

* adjusts default layout file to put the is of main content onto the page content instead of the main element

* update unit test

---------

Co-authored-by: Abigail Young <abbyoung@gmail.com>

src/layout/DefaultLayout/DefaultLayout.test.tsx

@@ -38,14 +38,15 @@ describe('DefaultLayout component options', () => {
 })
 
 describe('DefaultLayout component', () => {
+  let container: HTMLElement
   beforeEach(async () => {
-    renderWithAuthAndApollo(
+    ;({ container } = renderWithAuthAndApollo(
       <DefaultLayout>
         <h1>Test Page</h1>
       </DefaultLayout>,
       {},
       getUserMock
-    )
+    ))
     // need to wait for the query to finish so waiting for banner to display
     await waitFor(() =>
       expect(screen.getByTestId('govBanner')).toBeInTheDocument()
@@ -65,7 +66,7 @@ describe('DefaultLayout component', () => {
       screen.getByRole('link', { name: 'Skip to main content' })
     ).toHaveAttribute('href', '#main-content')
 
-    expect(screen.getByRole('main')).toHaveAttribute('id', 'main-content')
+    expect(container.querySelector('div#main-content')).toBeInTheDocument()
   })
 
   it('renders a feedback link', () => {

src/layout/DefaultLayout/DefaultLayout.tsx

@@ -51,7 +51,7 @@ const DefaultLayout = ({
           <GovBanner tld=".mil" />
           <Header />
         </div>
-        <main id="main-content">
+        <main>
           <PageHeader>
             <PersonalData userDisplayName={displayName} />
           </PageHeader>
@@ -62,7 +62,7 @@ const DefaultLayout = ({
               <Grid desktop={{ col: 2 }} style={{ minWidth: '221px' }}>
                 <PageNav />
               </Grid>
-              <Grid desktop={{ col: true }}>
+              <Grid id="main-content" desktop={{ col: true }}>
                 {/* PAGE CONTENT */}
                 {children}
               </Grid>