diff options
Diffstat (limited to 'src/components/atoms/loaders/progress-bar.tsx')
| -rw-r--r-- | src/components/atoms/loaders/progress-bar.tsx | 26 |
1 files changed, 15 insertions, 11 deletions
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> ); }; |
