From 03d9239eb5591602313eb3f4500abb86ba35cfaa Mon Sep 17 00:00:00 2001
From: Bruce B <bbsmooth@gmail.com>
Date: Tue, 8 Feb 2022 07:51:19 -0800
Subject: [PATCH] fix(a11y): add h1 heading to classic challenges (#45031)

---
 .../components/__snapshots__/challenge-title.test.tsx.snap | 4 ++--
 .../templates/Challenges/components/challenge-title.css    | 7 +++++++
 .../templates/Challenges/components/challenge-title.tsx    | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap b/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
index 1d274fc5d2..29d7e370f0 100644
--- a/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
+++ b/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
@@ -39,9 +39,9 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
     <div
       className="title-text"
     >
-      <b>
+      <h1>
         title text
-      </b>
+      </h1>
       <svg
         aria-label="icons.passed"
         height="50"
diff --git a/client/src/templates/Challenges/components/challenge-title.css b/client/src/templates/Challenges/components/challenge-title.css
index 0fe1f4e5ca..dbb7f71f19 100644
--- a/client/src/templates/Challenges/components/challenge-title.css
+++ b/client/src/templates/Challenges/components/challenge-title.css
@@ -91,6 +91,13 @@
   padding: 0px 3px;
 }
 
+.title-text h1 {
+  font-size: inherit;
+  line-height: 1.42857143;
+  margin: 0;
+  display: inline;
+}
+
 .title-translation-cta {
   display: flex;
   flex-direction: row;
diff --git a/client/src/templates/Challenges/components/challenge-title.tsx b/client/src/templates/Challenges/components/challenge-title.tsx
index 86c1ee5bd3..f1ecf699a6 100644
--- a/client/src/templates/Challenges/components/challenge-title.tsx
+++ b/client/src/templates/Challenges/components/challenge-title.tsx
@@ -39,7 +39,7 @@ function ChallengeTitle({
       {showBreadCrumbs && <BreadCrumb block={block} superBlock={superBlock} />}
       <div className='challenge-title'>
         <div className='title-text'>
-          <b>{children}</b>
+          <h1>{children}</h1>
           {isCompleted ? (
             <GreenPass
               style={{ height: '15px', width: '15px', marginLeft: '7px' }}