chore: Make cards clickable using links and CSS INTER-263 (#119)

* chore: make cards clickable using links and CSS

* chore: clean-u

* test: add test

e2e/home.spec.ts

@@ -7,4 +7,17 @@ test.describe('Home page', () => {
     const cards = await page.getByTestId(TEST_IDS.homepageCard.useCaseTitle);
     expect(await cards.count()).toBeGreaterThan(5);
   });
+
+  test('Entire cards should be clickable, clicking on the description or image should take you to the use case', async ({
+    page,
+  }) => {
+    await page.goto('/');
+
+    await page.getByTestId(TEST_IDS.homepageCard.useCaseDescription).first().click({ force: true });
+    await expect(page).toHaveURL('/playground');
+    await page.goBack();
+
+    await page.getByTestId(TEST_IDS.homepageCard.useCaseIcon).first().click({ force: true });
+    await expect(page).toHaveURL('/playground');
+  });
 });

src/client/testIDs.ts

@@ -18,6 +18,8 @@ export const TEST_IDS = {
   },
   homepageCard: {
     useCaseTitle: 'useCaseTitle',
+    useCaseDescription: 'useCaseDescription',
+    useCaseIcon: 'useCaseIcon',
   },
   loanRisk: {
     monthlyInstallmentValue: 'monthlyInstallmentValue',

src/pages/index.module.scss

@@ -67,6 +67,8 @@
   overflow: hidden;
   color: unset;
   cursor: pointer;
+  // We need this for the useCaseTitle pseudo element below
+  position: relative;
 
   @include shadowMedium();
   @include transition((box-shadow, border));
@@ -93,6 +95,22 @@
     line-height: 130%;
     margin-bottom: rem(8px);
     display: block;
+
+    /**
+     * We need to make the whole card clickable.
+     * But wrapping the whole card in a <a> element is bad for screen readers/accessibility.
+     * And using an `onClick` event on the card confuses Google Tag Manager triggers, it registers `click` instead of `linkClick`.
+     * So this is the best solution: https://kittygiraudel.com/2022/04/02/accessible-cards/
+     */
+    &::before {
+      // Use a pseudo-element to expand the hitbox of the link over the whole card.
+      content: ''; /* 1 */
+      // Expand the hitbox over the whole card.
+      position: absolute; /* 2 */
+      inset: 0; /* 2 */
+      // Place the pseudo-element on top of the whole card.
+      z-index: 1; /* 3 */
+    }
   }
 
   .useCaseDescription {

src/pages/index.tsx

@@ -8,10 +8,8 @@ import Image from 'next/image';
 import { TEST_IDS } from '../client/testIDs';
 import { Fragment } from 'react';
 import { SEO } from '../client/components/common/seo';
-import { useRouter } from 'next/router';
 
 export default function Index() {
-  const router = useRouter();
   return (
     <>
       <SEO
@@ -35,13 +33,18 @@ export default function Index() {
       </Container>
       <div className={styles.useCaseGrid}>
         {HOMEPAGE_CARDS.map((card) => (
-          <div className={styles.useCaseCard} key={card.url} onClick={() => router.push(card.url)}>
+          <div className={styles.useCaseCard} key={card.url}>
             <div>
-              <Image src={card.iconSvg} alt="" className={styles.useCaseIcon} />
+              <Image
+                src={card.iconSvg}
+                alt=""
+                className={styles.useCaseIcon}
+                data-testid={TEST_IDS.homepageCard.useCaseIcon}
+              />
               <Link className={styles.useCaseTitle} data-testid={TEST_IDS.homepageCard.useCaseTitle} href={card.url}>
                 {card.title}
               </Link>
-              <div className={styles.useCaseDescription}>
+              <div className={styles.useCaseDescription} data-testid={TEST_IDS.homepageCard.useCaseDescription}>
                 {card.descriptionHomepage?.map((line, i) => <Fragment key={i}>{line}</Fragment>)}
               </div>
             </div>