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/loaders/progress-bar.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

(limited to 'src/components/atoms/loaders/progress-bar.tsx')

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>
   );
 };
-- 
cgit v1.2.3