fix: add ARIA progressbar attrs and remove width transition
Addresses review feedback: - Add role="progressbar", aria-valuemin, aria-valuemax, and aria-valuenow (determinate only) to restore accessibility semantics lost when replacing MUI's LinearProgress with a plain div. - Remove transition-[width] duration-200 from the determinate bar to avoid jitter/interpolation artifacts caused by the requestAnimationFrame update loop in WorkspaceBuildProgress.
This commit is contained in:
@@ -13,8 +13,14 @@ const LinearProgress: FC<LinearProgressProps> = ({
|
||||
variant,
|
||||
...props
|
||||
}) => {
|
||||
const isDeterminate = variant === "determinate";
|
||||
|
||||
return (
|
||||
<div
|
||||
role="progressbar"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
{...(isDeterminate ? { "aria-valuenow": Math.round(value) } : {})}
|
||||
className={cn(
|
||||
"w-full h-1 bg-surface-sky rounded-full relative",
|
||||
"overflow-hidden block",
|
||||
@@ -22,7 +28,7 @@ const LinearProgress: FC<LinearProgressProps> = ({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{variant === "indeterminate" ? (
|
||||
{!isDeterminate ? (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
@@ -39,7 +45,7 @@ const LinearProgress: FC<LinearProgressProps> = ({
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
className="h-full rounded-full bg-highlight-sky transition-[width] duration-200 ease-linear"
|
||||
className="h-full rounded-full bg-highlight-sky"
|
||||
style={{ width: `${value}%` }}
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user