From cef8e8f73912544906a637578ac02319b955f7ba Mon Sep 17 00:00:00 2001
From: Bruce B <bbsmooth@gmail.com>
Date: Thu, 3 Mar 2022 05:56:10 -0800
Subject: [PATCH] fix(a11y): remove unnecessary link on course heading (#44794)

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 .../Introduction/components/block.tsx         | 14 ++-------
 client/src/templates/Introduction/intro.css   | 29 ++++---------------
 2 files changed, 7 insertions(+), 36 deletions(-)

diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
index 9bb0abac7a..745e95bca5 100644
--- a/client/src/templates/Introduction/components/block.tsx
+++ b/client/src/templates/Introduction/components/block.tsx
@@ -169,12 +169,7 @@ export class Block extends Component<BlockProps> {
         <ScrollableAnchor id={blockDashedName}>
           <div className={`block ${isExpanded ? 'open' : ''}`}>
             <div className='block-header'>
-              <a className='block-link' href={`#${blockDashedName}`}>
-                <h3 className='big-block-title'>
-                  {blockTitle}
-                  <span className='block-link-icon'>#</span>
-                </h3>
-              </a>
+              <h3 className='big-block-title'>{blockTitle}</h3>
               {!isAuditedCert(curriculumLocale, superBlock) && (
                 <div className='block-cta-wrapper'>
                   <Link
@@ -220,12 +215,7 @@ export class Block extends Component<BlockProps> {
         <ScrollableAnchor id={blockDashedName}>
           <div className='block'>
             <div className='block-header'>
-              <a className='block-link' href={`#${blockDashedName}`}>
-                <h3 className='big-block-title'>
-                  {blockTitle}
-                  <span className='block-link-icon'>#</span>
-                </h3>
-              </a>
+              <h3 className='big-block-title'>{blockTitle}</h3>
               {!isAuditedCert(curriculumLocale, superBlock) && (
                 <div className='block-cta-wrapper'>
                   <Link
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 6cfdefa825..75119a1cb6 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -19,15 +19,15 @@
   flex-direction: row;
 }
 
-.block-header .block-link {
+.block-header .big-block-title {
   flex-grow: 3;
   flex-basis: 0;
   padding: 25px 15px 10px;
 }
 
-.block-link:hover,
-.block-link:focus,
-.block-link:active {
+.big-block-title:hover,
+.big-block-title:focus,
+.big-block-title:active {
   background-color: var(--primary-background);
 }
 
@@ -38,19 +38,6 @@ a.cert-tag:active {
   background-color: var(--highlight-color);
 }
 
-.block-link {
-  cursor: pointer;
-}
-
-.block-link:hover .block-link-icon {
-  display: inline-block;
-}
-
-.block-link-icon {
-  display: none;
-  margin-left: 15px;
-}
-
 .big-block-title {
   font-size: 1.5rem;
   overflow-wrap: break-word;
@@ -225,6 +212,7 @@ button.map-title {
 
 .block-grid .map-title > svg:last-child {
   transform: rotate(180deg);
+  margin-left: auto;
 }
 
 .block-grid.open .map-title > svg:last-child {
@@ -363,9 +351,6 @@ button.map-title {
 
 .block-grid .block-header {
   flex-direction: column;
-}
-
-.block-grid .block-header {
   display: flex;
   background: transparent;
   border: none;
@@ -390,10 +375,6 @@ button.map-title {
   padding: 0 10px 10px;
 }
 
-.block-grid .map-title > svg:last-child {
-  margin-left: auto;
-}
-
 .block-grid .map-title > svg {
   margin: 10px;
 }