From d54fc38899b3ffc87104ed03f5e48be3f02e337c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Jun 2022 15:59:48 +0200
Subject: chore: use image title as figure label if no caption is provided

---
 src/components/molecules/images/responsive-image.tsx |  8 ++++++--
 src/pages/cv.tsx                                     | 10 +---------
 src/ts/types/mdx.ts                                  |  7 ++++++-
 src/utils/helpers/projects.ts                        |  1 +
 4 files changed, 14 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 4541df8..5373561 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -49,6 +49,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
   layout,
   objectFit,
   target,
+  title,
   withBorders,
   ...props
 }) => {
@@ -59,15 +60,17 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
 
   return (
     <figure
+      aria-label={caption ? undefined : title}
       className={`${styles.wrapper} ${styles[bordersModifier]} ${styles[linkModifier]} ${className}`}
     >
       {target ? (
         <Link href={target} className={styles.link}>
           <Image
             alt={alt}
+            className={styles.img}
             layout={layout || 'intrinsic'}
             objectFit={objectFit || 'contain'}
-            className={styles.img}
+            title={title}
             {...props}
           />
           {caption && (
@@ -78,9 +81,10 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
         <>
           <Image
             alt={alt}
+            className={styles.img}
             layout={layout || 'intrinsic'}
             objectFit={objectFit || 'contain'}
-            className={styles.img}
+            title={title}
             {...props}
           />
           {caption && (
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 4686505..8b17da0 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -61,14 +61,6 @@ const CVPage: NextPageWithLayout = () => {
   };
 
   const { website } = useSettings();
-  const cvAlt = intl.formatMessage(
-    {
-      defaultMessage: '{name} CV',
-      description: 'CVPage: CV image alternative text',
-      id: 'KUowUk',
-    },
-    { name: website.name }
-  );
   const cvCaption = intl.formatMessage(
     {
       defaultMessage: '<link>Download the CV in PDF</link>',
@@ -90,7 +82,7 @@ const CVPage: NextPageWithLayout = () => {
       expanded={true}
       title={imageWidgetTitle}
       level={2}
-      image={{ alt: cvAlt, ...image }}
+      image={image}
       description={cvCaption}
       imageClassName={styles.image}
     />,
diff --git a/src/ts/types/mdx.ts b/src/ts/types/mdx.ts
index 16538c1..7645ce6 100644
--- a/src/ts/types/mdx.ts
+++ b/src/ts/types/mdx.ts
@@ -3,7 +3,12 @@ import { Meta } from './app';
 
 export type MDXData = {
   file: string;
-  image: StaticImageData;
+  image: MDXImage;
+};
+
+export type MDXImage = StaticImageData & {
+  alt: string;
+  title?: string;
 };
 
 export type MDXPageMeta = Pick<Meta<'page'>, 'cover' | 'dates' | 'seo'> & {
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/projects.ts
index a0f0c04..88f4516 100644
--- a/src/utils/helpers/projects.ts
+++ b/src/utils/helpers/projects.ts
@@ -46,6 +46,7 @@ export const getProjectData = async (
           ...cover.default,
           alt: `${title} image`,
           src: `/projects/${filename}.jpg`,
+          title,
         },
       },
       slug: filename,
-- 
cgit v1.2.3