fix(a11y): certification project cards (freeCodeCamp#50019

make certification project card links more accessible
Riya54671 · Apr 10, 2023 · 6fc7045 · 6fc7045
1 parent c743f6c
commit 6fc7045
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 26 deletions.
diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
@@ -306,32 +306,40 @@ class Block extends Component<BlockProps> {
     const GridProjectBlock = (
       <ScrollableAnchor id={blockDashedName}>
         <div className='block block-grid grid-project-block'>
-          <Link
-            className='block-header'
-            onClick={() => {
-              this.handleBlockClick();
-            }}
-            to={challengesWithCompleted[0].fields.slug}
-          >
-            <div className='tags-wrapper'>
-              <span className='cert-tag'>
-                {t('misc.certification-project')}
-              </span>
-              {!isAuditedCert(curriculumLocale, superBlock) && (
-                <Link
-                  className='cert-tag'
-                  to={t('links:help-translate-link-url')}
-                >
-                  {t('misc.translation-pending')}
-                </Link>
-              )}
-            </div>
-            <div className='title-wrapper map-title'>
-              {this.renderCheckMark(isBlockCompleted)}
-              <h3 className='block-grid-title'>{blockTitle}</h3>
-            </div>
-            <BlockIntros intros={blockIntroArr} />
-          </Link>
+          <div className='tags-wrapper'>
+            <span className='cert-tag' aria-hidden='true'>
+              {t('misc.certification-project')}
+            </span>
+            {!isAuditedCert(curriculumLocale, superBlock) && (
+              <Link
+                className='cert-tag'
+                to={t('links:help-translate-link-url')}
+              >
+                {t('misc.translation-pending')}{' '}
+                <span className='sr-only'>
+                  {blockTitle} {t('misc.certification-project')}
+                </span>
+              </Link>
+            )}
+          </div>
+          <div className='title-wrapper map-title'>
+            <h3 className='block-grid-title'>
+              <Link
+                className='block-header'
+                onClick={() => {
+                  this.handleBlockClick();
+                }}
+                to={challengesWithCompleted[0].fields.slug}
+              >
+                {this.renderCheckMark(isBlockCompleted)}
+                {blockTitle}{' '}
+                <span className='sr-only'>
+                  {t('misc.certification-project')}
+                </span>
+              </Link>
+            </h3>
+          </div>
+          <BlockIntros intros={blockIntroArr} />
         </div>
       </ScrollableAnchor>
     );

diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
@@ -468,4 +468,40 @@ ToDo: find out why, and remove the need for it */
 
 .grid-project-block {
   margin-bottom: 50px;
+  padding: 18px 15px;
+  position: relative;
+}
+
+.grid-project-block:hover {
+  cursor: pointer;
+  background: var(--tertiary-background);
+}
+
+.grid-project-block a.block-header {
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: baseline;
+  gap: 10px;
+}
+
+/* make entire certification card clickable */
+.grid-project-block a.block-header::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.grid-project-block .tags-wrapper a {
+  position: relative;
+  z-index: 100;
+}
+
+.grid-project-block:hover:has(.tags-wrapper a:hover) {
+  background: var(--primary-background);
 }