From 63af9d0f643a37129d08870d00f1a8b575c11d14 Mon Sep 17 00:00:00 2001
From: Singhankit001 <singhankit91624@gmail.com>
Date: Tue, 31 Mar 2026 00:38:47 +0530
Subject: [PATCH] feat: improve accessibility for course progress bars

---
 src/components/CourseProgress/index.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/CourseProgress/index.js b/src/components/CourseProgress/index.js
index d80c2960..f2109558 100644
--- a/src/components/CourseProgress/index.js
+++ b/src/components/CourseProgress/index.js
@@ -207,6 +207,11 @@ export default function CourseProgress() {
                 <div className={styles.courseTitle}>{course.title}</div>
                 <div className={styles.progressBarContainer}>
                   <div 
+                    role="progressbar"
+                    aria-valuenow={Math.round(courseProgress)}
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                    aria-label={`Progress: ${Math.round(courseProgress)}%`}
                     className={styles.progressBar}
                     style={{ width: `${courseProgress}%` }}
                   />
@@ -245,6 +250,11 @@ export default function CourseProgress() {
           </div>
           <div className={styles.progressBarContainer}>
             <div 
+              role="progressbar"
+              aria-valuenow={Math.round(progress)}
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-label={`Total Progress: ${Math.round(progress)}%`}
               className={clsx(styles.progressBar, styles.mainProgressBar)}
               style={{ width: `${progress}%` }}
             />
@@ -273,6 +283,11 @@ export default function CourseProgress() {
           </div>
           <div className={styles.progressBarFull}>
             <div 
+              role="progressbar"
+              aria-valuenow={Math.round(progress)}
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-label={`Overall Course Progress: ${Math.round(progress)}%`}
               className={styles.progressBarFill}
               style={{ width: `${progress}%` }}
             />