From b1103a9554c5593c065466d1e289db2680cf2993 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Jun 2022 17:36:46 +0200
Subject: chore: add a label to progress bar

The progress element is a form element, so a label is required to be
accessible. Since I'm not using it without label, I transform the
optional info parameter to a mandatory label parameter.
---
 src/components/atoms/forms/label.module.scss       |  1 +
 .../atoms/loaders/progress-bar.fixture.tsx         |  5 ++
 .../atoms/loaders/progress-bar.stories.tsx         | 54 ++++++++--------------
 src/components/atoms/loaders/progress-bar.test.tsx | 15 +++++-
 src/components/atoms/loaders/progress-bar.tsx      | 26 ++++++-----
 src/components/organisms/layout/posts-list.tsx     |  6 ++-
 src/styles/base/_base.scss                         |  1 -
 7 files changed, 58 insertions(+), 50 deletions(-)
 create mode 100644 src/components/atoms/loaders/progress-bar.fixture.tsx

(limited to 'src')

diff --git a/src/components/atoms/forms/label.module.scss b/src/components/atoms/forms/label.module.scss
index f900925..aed1546 100644
--- a/src/components/atoms/forms/label.module.scss
+++ b/src/components/atoms/forms/label.module.scss
@@ -1,6 +1,7 @@
 .label {
   color: var(--color-primary-darker);
   font-weight: 600;
+  cursor: pointer;
 
   &--small {
     font-size: var(--font-size-sm);
diff --git a/src/components/atoms/loaders/progress-bar.fixture.tsx b/src/components/atoms/loaders/progress-bar.fixture.tsx
new file mode 100644
index 0000000..d9b02c3
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar.fixture.tsx
@@ -0,0 +1,5 @@
+export const id = 'amet-eum-ut';
+export const min = 0;
+export const max = 50;
+export const current = 20;
+export const label = '20 loaded out of a total of 50';
diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx
index fcd631c..1eead64 100644
--- a/src/components/atoms/loaders/progress-bar.stories.tsx
+++ b/src/components/atoms/loaders/progress-bar.stories.tsx
@@ -1,26 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import ProgressBarComponent from './progress-bar';
+import { current, id, label, max, min } from './progress-bar.fixture';
 
 /**
  * ProgressBar - Storybook Meta
  */
 export default {
-  title: 'Atoms/Loaders/ProgressBar',
+  title: 'Atoms/Loaders',
   component: ProgressBarComponent,
   argTypes: {
-    'aria-label': {
-      control: {
-        type: 'string',
-      },
-      description: 'An accessible name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
     current: {
       control: {
         type: 'number',
@@ -31,17 +19,24 @@ export default {
         required: true,
       },
     },
-    info: {
+    id: {
       control: {
         type: 'text',
       },
-      description: 'An additional information to display.',
-      table: {
-        category: 'Options',
+      description: 'The progress bar id.',
+      type: {
+        name: 'string',
+        required: true,
       },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'The progress bar label.',
       type: {
         name: 'string',
-        required: false,
+        required: true,
       },
     },
     max: {
@@ -72,22 +67,13 @@ const Template: ComponentStory<typeof ProgressBarComponent> = (args) => (
 );
 
 /**
- * Loaders Stories - Default Progress bar
+ * Loaders Stories - Progress bar
  */
 export const ProgressBar = Template.bind({});
 ProgressBar.args = {
-  current: 10,
-  min: 0,
-  max: 50,
-};
-
-/**
- * Loaders Stories - Progress bar With Info
- */
-export const ProgressBarWithInfo = Template.bind({});
-ProgressBarWithInfo.args = {
-  current: 10,
-  info: 'Loaded: 10 / 50',
-  min: 0,
-  max: 50,
+  current,
+  id,
+  label,
+  min,
+  max,
 };
diff --git a/src/components/atoms/loaders/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar.test.tsx
index 3d32feb..bb28f41 100644
--- a/src/components/atoms/loaders/progress-bar.test.tsx
+++ b/src/components/atoms/loaders/progress-bar.test.tsx
@@ -1,9 +1,20 @@
 import { render, screen } from '@tests/utils';
 import ProgressBar from './progress-bar';
+import { current, id, label, max, min } from './progress-bar.fixture';
 
 describe('ProgressBar', () => {
   it('renders a progress bar', () => {
-    render(<ProgressBar min={0} max={50} current={10} />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    render(
+      <ProgressBar
+        id={id}
+        label={label}
+        min={min}
+        max={max}
+        current={current}
+      />
+    );
+    expect(
+      screen.getByRole('progressbar', { name: label })
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
index 9bac847..60c585a 100644
--- a/src/components/atoms/loaders/progress-bar.tsx
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -2,18 +2,18 @@ import { FC } from 'react';
 import styles from './progress-bar.module.scss';
 
 export type ProgressBarProps = {
-  /**
-   * Accessible progress bar name.
-   */
-  'aria-label'?: string;
   /**
    * Current value.
    */
   current: number;
   /**
-   * Additional information to display before progress bar.
+   * The progress bar id.
+   */
+  id: string;
+  /**
+   * The progress bar label.
    */
-  info?: string;
+  label: string;
   /**
    * Minimal value.
    */
@@ -31,23 +31,27 @@ export type ProgressBarProps = {
  */
 const ProgressBar: FC<ProgressBarProps> = ({
   current,
-  info,
+  id,
+  label,
   min,
   max,
-  ...props
 }) => {
   return (
     <div className={styles.progress}>
-      {info && <div className={styles.progress__info}>{info}</div>}
+      <label htmlFor={id} className={styles.progress__info}>
+        {label}
+      </label>
       <progress
         className={styles.progress__bar}
+        id={id}
         max={max}
         value={current}
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={current}
-        {...props}
-      ></progress>
+      >
+        {current}/{max}
+      </progress>
     </div>
   );
 };
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 24869fd..e3788c7 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -190,10 +190,12 @@ const PostsList: FC<PostsListProps> = ({
     return (
       <>
         <ProgressBar
+          aria-label={progressInfo}
+          current={posts.length}
+          id="loaded-posts"
+          label={progressInfo}
           min={1}
           max={total}
-          current={posts.length}
-          info={progressInfo}
         />
         {showLoadMoreBtn && (
           <Button
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 1ec5494..b6a6082 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -24,7 +24,6 @@ video {
 }
 
 button,
-label,
 summary {
   cursor: pointer;
 }
-- 
cgit v1.2.3