From e5bf2ae97ee2042ba4548b8d5485516fb6ee886c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Mon, 20 Feb 2023 17:52:39 +0200
Subject: [PATCH] feat(client): make skip to content button translatable
 (#49439)

---
 client/i18n/locales/english/translations.json | 1 +
 client/src/components/Header/index.tsx        | 5 +++--
 client/src/components/layouts/default.tsx     | 6 +++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 9ce112fd71e..b69f100ec9f 100644
--- a/client/i18n/locales/english/translations.json
+++ b/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>.",
diff --git a/client/src/components/Header/index.tsx b/client/src/components/Header/index.tsx
index bce18724981..7fb298b49fa 100644
--- a/client/src/components/Header/index.tsx
+++ b/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}
diff --git a/client/src/components/layouts/default.tsx b/client/src/components/layouts/default.tsx
index 3434a007d05..ca3c5c37094 100644
--- a/client/src/components/layouts/default.tsx
+++ b/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}