feat(client): make skip to content skip to the actual content (#50956)

Co-authored-by: Bruce B <bbsmooth@gmail.com>

client/src/client-only-routes/show-settings.tsx

@@ -161,7 +161,11 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
       <Grid>
         <main>
           <Spacer size='large' />
-          <h1 className='text-center' style={{ overflowWrap: 'break-word' }}>
+          <h1
+            id='content-start'
+            className='text-center'
+            style={{ overflowWrap: 'break-word' }}
+          >
             {t('settings.for', { username: username })}
           </h1>
           <About

client/src/components/FourOhFour/index.tsx

@@ -18,7 +18,7 @@ const FourOhFour = (_props: RouteComponentProps): JSX.Element => {
       <Helmet title={t('404.page-not-found') + '| freeCodeCamp'} />
       <img alt={t('404.not-found')} src={notFoundLogo} />
       <Spacer size='medium' />
-      <h1>{t('404.page-not-found')}.</h1>
+      <h1 id='content-start'>{t('404.page-not-found')}.</h1>
       <Spacer size='medium' />
       <div>
         <p>{t('404.heres-a-quote')}</p>

client/src/components/Intro/index.tsx

@@ -44,7 +44,7 @@ const Intro = ({
     return (
       <>
         <Spacer size='medium' />
-        <h1 className='text-center'>
+        <h1 id='content-start' className='text-center'>
           {name
             ? `${t('learn.welcome-1', { name: name })}`
             : `${t('learn.welcome-2')}`}
@@ -82,7 +82,9 @@ const Intro = ({
     return (
       <>
         <Spacer size='medium' />
-        <h1 className='text-center'>{t('learn.heading')}</h1>
+        <h1 id='content-start' className='text-center'>
+          {t('learn.heading')}
+        </h1>
         <Spacer size='medium' />
         <IntroDescription />
         <Spacer size='medium' />

client/src/components/landing/components/landing-top.tsx

@@ -25,7 +25,11 @@ function LandingTop(): JSX.Element {
       <Row>
         <Spacer size='medium' />
         <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
-          <h1 className='big-heading' data-test-label='landing-header'>
+          <h1
+            id='content-start'
+            className='big-heading'
+            data-test-label='landing-header'
+          >
             {t('landing.big-heading-1')}
           </h1>
           <p className='big-heading'>{t('landing.big-heading-2')}</p>

client/src/components/layouts/default.tsx

@@ -253,9 +253,7 @@ function DefaultLayout({
               />
             </div>
           )}
-          <div id='content-start' tabIndex={-1}>
-            {fetchState.complete && children}
-          </div>
+          {fetchState.complete && children}
         </div>
         {showFooter && <Footer />}
       </div>

client/src/components/layouts/global.css

@@ -1,7 +1,12 @@
+:root {
+  --header-height: 38px;
+}
+
 html {
   height: 100%;
   font-size: 18px;
   -webkit-font-smoothing: antialiased;
+  scroll-padding-top: calc(var(--header-height) + 10px);
 }
 
 body {
@@ -9,7 +14,6 @@ body {
   font-family: var(--font-family-sans-serif);
   color: var(--secondary-color);
   background: var(--secondary-background);
-  --header-height: 38px;
 }
 
 #___gatsby {
@@ -65,15 +69,6 @@ body {
   min-height: 0;
 }
 
-#content-start {
-  min-height: 0;
-  height: 100%;
-}
-
-#content-start > div {
-  height: 100%;
-}
-
 h1 {
   color: var(--secondary-color);
   font-weight: 700;

client/src/components/layouts/learn.css

@@ -1,3 +1,8 @@
+#content-start {
+  min-height: 0;
+  height: 100%;
+}
+
 #learn-app-wrapper,
 #learn-app-wrapper .desktop-layout,
 #learn-app-wrapper .reflex-container.vertical {

client/src/pages/blocked.tsx

@@ -12,7 +12,7 @@ function BlockedPage(): JSX.Element {
         <Spacer size='large' />
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
-            <h1>We can&apos;t log you in.</h1>
+            <h1 id='content-start'>We can&apos;t log you in.</h1>
             <Spacer size='large' />
             <Col lg={10} lgOffset={1} sm={10} smOffset={1} xs={12}>
               <div className='text-left blocked-body'>

client/src/templates/Challenges/components/hotkeys.tsx

@@ -174,6 +174,7 @@ function Hotkeys({
   return (
     <>
       <HotKeys
+        id='content-start'
         allowChanges={true}
         handlers={handlers}
         innerRef={innerRef}

client/src/templates/Introduction/components/super-block-intro.tsx

@@ -25,7 +25,9 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
 
   return (
     <>
-      <h1 className='text-center big-heading'>{i18nSuperBlock}</h1>
+      <h1 id='content-start' className='text-center big-heading'>
+        {i18nSuperBlock}
+      </h1>
       <Spacer size='medium' />
       {generateIconComponent(superBlock, 'cert-header-icon')}
       <Spacer size='medium' />