From 73f94705dc583e968114e5a09e85979448f3412b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Jun 2022 16:02:21 +0200
Subject: chore(cards): use post title as link label

---
 src/components/molecules/layout/card.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'src/components/molecules/layout/card.tsx')

diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 7bbd040..c48bc18 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -21,6 +21,10 @@ export type CardProps = {
    * The cover fit. Default: cover.
    */
   coverFit?: ResponsiveImageProps['objectFit'];
+  /**
+   * The card id.
+   */
+  id: string;
   /**
    * The card meta.
    */
@@ -52,6 +56,7 @@ const Card: FC<CardProps> = ({
   className = '',
   cover,
   coverFit = 'cover',
+  id,
   meta,
   tagline,
   title,
@@ -59,7 +64,11 @@ const Card: FC<CardProps> = ({
   url,
 }) => {
   return (
-    <ButtonLink target={url} className={`${styles.wrapper} ${className}`}>
+    <ButtonLink
+      aria-labelledby={`${id}-heading`}
+      target={url}
+      className={`${styles.wrapper} ${className}`}
+    >
       <article className={styles.article}>
         <header className={styles.header}>
           {cover && (
@@ -71,8 +80,9 @@ const Card: FC<CardProps> = ({
           )}
           <Heading
             alignment="center"
-            level={titleLevel}
             className={styles.title}
+            id={`${id}-heading`}
+            level={titleLevel}
           >
             {title}
           </Heading>
-- 
cgit v1.2.3