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.

4 files changed, 53 insertions, 47 deletions

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
@@ -3,17 +3,17 @@ 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>
   );
 };