feat(client): make skip to content button translatable (#49439)

client/i18n/locales/english/translations.json

@@ -251,6 +251,7 @@
   },
   "learn": {
     "heading": "Welcome to freeCodeCamp's curriculum.",
+    "skip-to-content": "Skip to content",
     "welcome-1": "Welcome back, {{name}}.",
     "welcome-2": "Welcome to freeCodeCamp.org",
     "start-at-beginning": "If you are new to coding, we recommend you <0>start at the beginning</0>.",

client/src/components/Header/index.tsx

@@ -13,6 +13,7 @@ import './header.css';
 interface HeaderProps {
   fetchState: { pending: boolean };
   user: User;
+  skipButtonText: string;
 }
 export class Header extends React.Component<
   HeaderProps,
@@ -83,7 +84,7 @@ export class Header extends React.Component<
 
   render(): JSX.Element {
     const { displayMenu, isLanguageMenuDisplayed } = this.state;
-    const { fetchState, user } = this.props;
+    const { fetchState, user, skipButtonText } = this.props;
     return (
       <>
         <Helmet>
@@ -95,7 +96,7 @@ export class Header extends React.Component<
         </Helmet>
         <header>
           <a href='#content-start' className='skip-to-content-button'>
-            Skip To Content
+            {skipButtonText}
           </a>
           <UniversalNav
             displayMenu={displayMenu}

client/src/components/layouts/default.tsx

@@ -223,7 +223,11 @@ function DefaultLayout({
           />
         </Helmet>
         <div className={`default-layout`}>
-          <Header fetchState={fetchState} user={user} />
+          <Header
+            fetchState={fetchState}
+            user={user}
+            skipButtonText={t('learn.skip-to-content')}
+          />
           <OfflineWarning
             isOnline={isOnline}
             isServerOnline={isServerOnline}