From c681c3358784f5a9644404c8da0e15b1117cd3fb Mon Sep 17 00:00:00 2001
From: sidemt <siideemt@gmail.com>
Date: Wed, 23 Feb 2022 17:22:44 +0900
Subject: [PATCH] fix(a11y): use appropriate aria-label for fCC logo depending
 on its use (#45201)

---
 client/src/assets/icons/FreeCodeCamp-logo.tsx        | 9 ++++-----
 client/src/client-only-routes/show-certification.tsx | 2 +-
 client/src/components/Header/components/nav-logo.tsx | 4 +++-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/client/src/assets/icons/FreeCodeCamp-logo.tsx b/client/src/assets/icons/FreeCodeCamp-logo.tsx
index ff223b69ef..1e1a28f832 100644
--- a/client/src/assets/icons/FreeCodeCamp-logo.tsx
+++ b/client/src/assets/icons/FreeCodeCamp-logo.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-function FreeCodeCampLogo(): JSX.Element {
-  const { t } = useTranslation();
 
+function FreeCodeCampLogo(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   return (
     <svg
-      aria-label={t('aria.fcc-curriculum')}
       height={24}
       version='1.1'
       viewBox='0 0 210 24'
       width={210}
       xmlns='http://www.w3.org/2000/svg'
       xmlnsXlink='http://www.w3.org/1999/xlink'
+      {...props}
     >
       <defs>
         <path
diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
index 08657ec8ec..11c0709876 100644
--- a/client/src/client-only-routes/show-certification.tsx
+++ b/client/src/client-only-routes/show-certification.tsx
@@ -322,7 +322,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
         <header>
           <Col md={5} sm={12}>
             <div className='logo'>
-              <FreeCodeCampLogo />
+              <FreeCodeCampLogo aria-hidden='true' />
             </div>
           </Col>
           <Col md={7} sm={12}>
diff --git a/client/src/components/Header/components/nav-logo.tsx b/client/src/components/Header/components/nav-logo.tsx
index ace653c28c..94111b149c 100644
--- a/client/src/components/Header/components/nav-logo.tsx
+++ b/client/src/components/Header/components/nav-logo.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import FreeCodeCampLogo from '../../../assets/icons/FreeCodeCamp-logo';
 
 const NavLogo = (): JSX.Element => {
-  return <FreeCodeCampLogo />;
+  const { t } = useTranslation();
+  return <FreeCodeCampLogo aria-label={t('aria.fcc-curriculum')} />;
 };
 
 NavLogo.displayName = 'NavLogo';