From f8fb418ac7606a438bd515b92ad8b29628a5592a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 5 Apr 2026 23:29:06 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20progress?=
 =?UTF-8?q?bar=20roles=20to=20Progress=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added `role="progressbar"` along with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes to the Progress UI component to make it accessible to screen readers, reflecting the loading state visually provided by the component. Also added tests to verify the attributes are correctly applied.

Co-authored-by: anchapin <6326294+anchapin@users.noreply.github.com>
---
 frontend/src/components/ui/progress.test.tsx | 21 ++++++++++++++++++++
 frontend/src/components/ui/progress.tsx      |  4 ++++
 2 files changed, 25 insertions(+)
 create mode 100644 frontend/src/components/ui/progress.test.tsx

diff --git a/frontend/src/components/ui/progress.test.tsx b/frontend/src/components/ui/progress.test.tsx
new file mode 100644
index 00000000..d88fb647
--- /dev/null
+++ b/frontend/src/components/ui/progress.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Progress } from './progress';
+
+describe('Progress Component', () => {
+  it('renders correctly with default values', () => {
+    render(<Progress />);
+    const progressbar = screen.getByRole('progressbar');
+    expect(progressbar).toBeInTheDocument();
+    expect(progressbar).toHaveAttribute('aria-valuemin', '0');
+    expect(progressbar).toHaveAttribute('aria-valuemax', '100');
+    expect(progressbar).toHaveAttribute('aria-valuenow', '0');
+  });
+
+  it('renders correctly with custom value and max', () => {
+    render(<Progress value={50} max={200} />);
+    const progressbar = screen.getByRole('progressbar');
+    expect(progressbar).toHaveAttribute('aria-valuenow', '50');
+    expect(progressbar).toHaveAttribute('aria-valuemax', '200');
+  });
+});
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
index e2a0153e..0e4b547f 100644
--- a/frontend/src/components/ui/progress.tsx
+++ b/frontend/src/components/ui/progress.tsx
@@ -15,6 +15,10 @@ export const Progress: React.FC<ProgressProps> = ({
 
   return (
     <div
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
       className={`relative w-full overflow-hidden rounded-full bg-gray-200 ${className}`}
       {...props}
     >