feat(skip-links): add skip link and main id to missing pages (#360)

Currently we don't have skip links that aid in making our content
accessible to those using tab navigation.

Closes: #359 

## Changes

- adds skip link to App.tsx
- adds missing `id="main"` to pages that still need it

## How to test this PR

1. Can you press `tab` then `enter` to skip to the main content of a
page in the tab order? (Try pressing `tab` again to confirm.

## Screenshots
<img width="533" alt="Screenshot 2024-04-02 at 3 35 55 AM"
src="https://github.com/cfpb/sbl-frontend/assets/19983248/fb528a31-ad7e-4dc7-b941-dd9f8f786781">


## Notes

- the skip link could be a little fancier with its CSS transition like
on cf.gov, but we're prioritizing [just the accessibility
first](cfpb/design-system-react#330)
- works in conjunction with
cfpb/design-system-react#330 for the focus ring

src/App.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { Link } from 'components/Link';
 import { LoadingApp, LoadingContent } from 'components/Loading';
 import ScrollToTop from 'components/ScrollToTop';
-import { FooterCfGov, PageHeader } from 'design-system-react';
+import { FooterCfGov, PageHeader, SkipNav } from 'design-system-react';
 import 'design-system-react/style.css';
 import Error500 from 'pages/Error/Error500';
 import { NotFound404 } from 'pages/Error/NotFound404';
@@ -101,6 +101,7 @@ function BasicLayout(): ReactElement {
 
   return (
     <div className='h-dvh'>
+      <SkipNav />
       <PageHeader links={headerLinks} />
       <Outlet />
       <FooterCfGov />

src/pages/Filing/FilingApp/FilingOverviewPage.tsx

@@ -47,7 +47,7 @@ export default function FilingOverview(): ReactElement {
                 Shared Landing
               </Link>
             </CrumbTrail>
-            <main id='main-content' className='my-10'>
+            <main id='main' className='my-10'>
               <Heading type='1'>File your Small Business Lending data</Heading>
               <Heading type='3'>
                 You may file official small business lending data for your

src/pages/Filing/PaperworkNotice.tsx

@@ -6,7 +6,7 @@ import './Notices.less';
 
 function PaperworkNotice(): ReactElement {
   return (
-    <Layout.Main layout='2-1' bleedbar classes='notices'>
+    <Layout.Main id='main' layout='2-1' bleedbar classes='notices'>
       <Layout.Wrapper>
         <Layout.Content flushBottom>
           <CrumbTrail>

src/pages/Filing/PrivacyNotice.tsx

@@ -12,7 +12,7 @@ import './Notices.less';
 
 function PrivacyNotice(): ReactElement {
   return (
-    <Layout.Main layout='2-1' bleedbar classes='notices'>
+    <Layout.Main id='main' layout='2-1' bleedbar classes='notices'>
       <Layout.Wrapper>
         <Layout.Content flushBottom>
           <CrumbTrail>

src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx

@@ -85,7 +85,7 @@ export default function UFPForm({
   const onClearform = (): void => reset();
 
   return (
-    <main id='update-financial-profile'>
+    <main id='main'>
       <CrumbTrail>
         <Link isRouterLink href='/landing' key='home'>
           Platform home

src/pages/Filing/ViewInstitutionProfile/index.tsx

@@ -30,7 +30,7 @@ function InstitutionDetails(): JSX.Element | null {
     });
 
   return (
-    <main id='view-institution-profile'>
+    <main id='main'>
       <CrumbTrail>
         <Link href='/landing' key='home'>
           Platform home

src/pages/Filing/ViewUserProfile/index.tsx

@@ -52,7 +52,7 @@ export default function ViewUserProfile(): JSX.Element | null {
     <Grid.Wrapper center>
       <Grid.Row>
         <Grid.Column width={8}>
-          <main id='main-content' className='mb-[2.813rem] mt-[1.875rem]'>
+          <main id='main' className='mb-[2.813rem] mt-[1.875rem]'>
             <CrumbTrail>
               <Link href='/landing' key='home'>
                 Platform home

src/pages/ProfileForm/index.tsx

@@ -93,7 +93,7 @@ function CompleteUserProfileForm(): JSX.Element | null {
     : Step1Form;
 
   return (
-    <main>
+    <main id='main'>
       <UserProfileForm />
     </main>
   );

src/pages/Summary/Summary.tsx

@@ -37,7 +37,7 @@ function Summary(): JSX.Element | null {
     state.scenario === scenarios.SuccessInstitutionProfileUpdate;
 
   return (
-    <main id='Summary'>
+    <main id='main'>
       {isSuccessInstitutionProfileUpdate ? (
         <CrumbTrail>
           <Link isRouterLink href='/landing' key='home'>