From ac79a48c07c538316949d6284bc5d9c0eb2e3f91 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Jun 2022 12:11:28 +0200
Subject: chore: add aria hidden attribute to SVG icons

---
 src/components/molecules/buttons/back-to-top.tsx  | 2 +-
 src/components/molecules/forms/flipping-label.tsx | 2 +-
 src/components/molecules/nav/pagination.tsx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/molecules')

diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index bd1925a..ad5c674 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -34,7 +34,7 @@ const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => {
         aria-label={linkName}
         className={styles.link}
       >
-        <Arrow direction="top" />
+        <Arrow aria-hidden={true} direction="top" />
       </ButtonLink>
     </div>
   );
diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label.tsx
index c874369..12f8d8d 100644
--- a/src/components/molecules/forms/flipping-label.tsx
+++ b/src/components/molecules/forms/flipping-label.tsx
@@ -30,7 +30,7 @@ const FlippingLabel: FC<FlippingLabelProps> = ({
       <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}>
         <span className={styles.front}>{children}</span>
         <span className={styles.back}>
-          <Close />
+          <Close aria-hidden={true} />
         </span>
       </span>
     </Label>
diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx
index 934b50a..604720e 100644
--- a/src/components/molecules/nav/pagination.tsx
+++ b/src/components/molecules/nav/pagination.tsx
@@ -177,7 +177,7 @@ const Pagination: FC<PaginationProps> = ({
       });
       const body =
         typeof page === 'string'
-          ? '\u2026'
+          ? page // dots
           : intl.formatMessage(
               {
                 defaultMessage: '<a11y>Page </a11y>{number}',
-- 
cgit v1.2.3


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/components/molecules')

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


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

---
 .../atoms/buttons/button-link.stories.tsx          | 13 ++++++
 src/components/atoms/buttons/button-link.tsx       |  4 ++
 src/components/atoms/buttons/buttons.module.scss   |  2 +
 src/components/molecules/layout/card.fixture.tsx   | 19 ++++++++
 src/components/molecules/layout/card.stories.tsx   | 51 ++++++++++++----------
 src/components/molecules/layout/card.test.tsx      | 33 +++++---------
 src/components/molecules/layout/card.tsx           | 14 +++++-
 src/components/organisms/layout/cards-list.tsx     |  3 +-
 8 files changed, 90 insertions(+), 49 deletions(-)
 create mode 100644 src/components/molecules/layout/card.fixture.tsx

(limited to 'src/components/molecules')

diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index d06aff3..22d13f6 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -24,6 +24,19 @@ export default {
         required: false,
       },
     },
+    'aria-labelledby': {
+      control: {
+        type: null,
+      },
+      description: 'One or more ids that refer to an accessible label.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 64e0afd..989f737 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -7,6 +7,10 @@ export type ButtonLinkProps = {
    * ButtonLink accessible label.
    */
   'aria-label'?: string;
+  /**
+   * One or more ids that refer to the accessible label.
+   */
+  'aria-labelledby'?: string;
   /**
    * The button link body.
    */
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 2444bb1..b702544 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -21,6 +21,8 @@
 
   &--square,
   &--circle {
+    min-width: fit-content;
+    min-height: fit-content;
     padding: var(--spacing-xs);
     aspect-ratio: 1 / 1;
   }
diff --git a/src/components/molecules/layout/card.fixture.tsx b/src/components/molecules/layout/card.fixture.tsx
new file mode 100644
index 0000000..f96cc43
--- /dev/null
+++ b/src/components/molecules/layout/card.fixture.tsx
@@ -0,0 +1,19 @@
+export const cover = {
+  alt: 'A picture',
+  height: 480,
+  src: 'http://placeimg.com/640/480',
+  width: 640,
+};
+
+export const id = 'nam';
+
+export const meta = {
+  author: 'Possimus',
+  thematics: ['Autem', 'Eos'],
+};
+
+export const tagline = 'Ut rerum incidunt';
+
+export const title = 'Alias qui porro';
+
+export const url = '/an-existing-url';
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index 0ad42c0..87051a9 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Card from './card';
+import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 /**
  * Card - Storybook Meta
@@ -47,6 +48,16 @@ export default {
         required: false,
       },
     },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'The card id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     meta: {
       description: 'The card metadata (a publication date for example).',
       table: {
@@ -108,25 +119,15 @@ export default {
 
 const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
 
-const cover = {
-  alt: 'A picture',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-const meta = {
-  thematics: ['Autem', 'Eos'],
-};
-
 /**
  * Card Stories - Default
  */
 export const Default = Template.bind({});
 Default.args = {
-  title: 'Veritatis dicta quod',
+  id,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -135,9 +136,10 @@ Default.args = {
 export const WithCover = Template.bind({});
 WithCover.args = {
   cover,
-  title: 'Veritatis dicta quod',
+  id,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -145,10 +147,11 @@ WithCover.args = {
  */
 export const WithMeta = Template.bind({});
 WithMeta.args = {
+  id,
   meta,
-  title: 'Veritatis dicta quod',
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -156,10 +159,11 @@ WithMeta.args = {
  */
 export const WithTagline = Template.bind({});
 WithTagline.args = {
-  tagline: 'Ullam accusantium ipsa',
-  title: 'Veritatis dicta quod',
+  id,
+  tagline,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -168,9 +172,10 @@ WithTagline.args = {
 export const WithAll = Template.bind({});
 WithAll.args = {
   cover,
+  id,
   meta,
-  tagline: 'Ullam accusantium ipsa',
-  title: 'Veritatis dicta quod',
+  tagline,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index d481f6c..1023aeb 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,49 +1,36 @@
 import { render, screen } from '@tests/utils';
 import Card from './card';
-
-const cover = {
-  alt: 'A picture',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-const meta = {
-  author: 'Possimus',
-  thematics: ['Autem', 'Eos'],
-};
-
-const tagline = 'Ut rerum incidunt';
-
-const title = 'Alias qui porro';
-
-const url = '/an-existing-url';
+import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 describe('Card', () => {
   it('renders a title wrapped in h2 element', () => {
-    render(<Card title={title} titleLevel={2} url={url} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} />);
     expect(
       screen.getByRole('heading', { level: 2, name: title })
     ).toBeInTheDocument();
   });
 
   it('renders a link to another page', () => {
-    render(<Card title={title} titleLevel={2} url={url} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} />);
     expect(screen.getByRole('link')).toHaveAttribute('href', url);
   });
 
   it('renders a cover', () => {
-    render(<Card title={title} titleLevel={2} url={url} cover={cover} />);
+    render(
+      <Card id={id} title={title} titleLevel={2} url={url} cover={cover} />
+    );
     expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
   });
 
   it('renders a tagline', () => {
-    render(<Card title={title} titleLevel={2} url={url} tagline={tagline} />);
+    render(
+      <Card id={id} title={title} titleLevel={2} url={url} tagline={tagline} />
+    );
     expect(screen.getByText(tagline)).toBeInTheDocument();
   });
 
   it('renders some meta', () => {
-    render(<Card title={title} titleLevel={2} url={url} meta={meta} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} meta={meta} />);
     expect(screen.getByText(meta.author)).toBeInTheDocument();
   });
 });
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>
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 1feddd0..dd05e59 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -55,9 +55,10 @@ const CardsList: FC<CardsListProps> = ({
         value: (
           <Card
             key={id}
+            className={styles.card}
             coverFit={coverFit}
+            id={id}
             titleLevel={titleLevel}
-            className={styles.card}
             {...card}
           />
         ),
-- 
cgit v1.2.3


From 234b67fe98c6167e4f83f43e11942a9e937c2a60 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Jun 2022 17:10:43 +0200
Subject: chore: add an aria label to code blocks

Prism is adding a tabindex to code blocks, so I think an aria label
can help screen reader users to identify the tabbed content.
---
 src/components/molecules/layout/code.stories.tsx | 13 +++++++++++++
 src/components/molecules/layout/code.tsx         |  6 ++++++
 src/content                                      |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)

(limited to 'src/components/molecules')

diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx
index ac0e98f..c3fbf22 100644
--- a/src/components/molecules/layout/code.stories.tsx
+++ b/src/components/molecules/layout/code.stories.tsx
@@ -12,6 +12,19 @@ export default {
     outputPattern: '#output#',
   },
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the code sample.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index 30351b9..7e249d1 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -6,6 +6,10 @@ import { FC, useRef } from 'react';
 import styles from './code.module.scss';
 
 export type CodeProps = {
+  /**
+   * An accessible name.
+   */
+  'aria-label'?: string;
   /**
    * The code to highlight.
    */
@@ -39,6 +43,7 @@ const Code: FC<CodeProps> = ({
   language,
   plugins = [],
   outputPattern = '#output#',
+  ...props
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { attributes, className } = usePrism({ language, plugins });
@@ -54,6 +59,7 @@ const Code: FC<CodeProps> = ({
         tabIndex={0}
         {...attributes}
         {...outputAttribute}
+        {...props}
       >
         <code className={`language-${language}`}>{children}</code>
       </pre>
diff --git a/src/content b/src/content
index 742cb70..9779d13 160000
--- a/src/content
+++ b/src/content
@@ -1 +1 @@
-Subproject commit 742cb70a219b324d8e4d9b7f0f48627984b59955
+Subproject commit 9779d137a71eb20e82581f2a5f83300891e923c8
-- 
cgit v1.2.3