chore: improve accessibility (#20)

Improve images, code blocks, cards and progress bar accessibility.

6 files changed, 88 insertions, 48 deletions

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
@@ -22,6 +22,10 @@ export type CardProps = {
    */
   coverFit?: ResponsiveImageProps['objectFit'];
   /**
+   * The card id.
+   */
+  id: string;
+  /**
    * The card meta.
    */
   meta?: MetaData;
@@ -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/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
@@ -7,6 +7,10 @@ import styles from './code.module.scss';
 
 export type CodeProps = {
   /**
+   * An accessible name.
+   */
+  'aria-label'?: string;
+  /**
    * The code to highlight.
    */
   children: string;
@@ -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>