#1597 improving aria-label function by removing tab index on progress…

… bar (#1619)
tl-its-umich-edu · Sep 10, 2024 · f5c09c9 · f5c09c9
1 parent 3fb314e
commit f5c09c9
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 49 deletions.
diff --git a/assets/src/components/ProgressBarV2.js b/assets/src/components/ProgressBarV2.js
@@ -50,7 +50,6 @@ function ProgressBarV2 (props) {
     <Root>
       {
         <div
-          tabIndex='0'
           aria-label={description !== undefined ? description : undefined}
           className={submitted && !score ? classes.ungradedBar : classes.outOfBar} // submitted assignment, and ungraded yet : otherwise
           style={{

diff --git a/assets/src/containers/AssignmentPlanningV2.js b/assets/src/containers/AssignmentPlanningV2.js
@@ -207,55 +207,57 @@ function AssignmentPlanningV2 (props) {
                   ? <Spinner />
                   : (
                     <div>
-                      <Grid container alignContent='center' className={classes.section}>
-                        <Grid item lg={4} md={5} xs={12}>
-                          <Typography variant='h6' gutterBottom>My Minimum Goal (%)</Typography>
-                          <AssignmentGoalInput
-                            currentGrade={currentGrade}
-                            goalGrade={goalGrade}
-                            maxPossibleGrade={maxPossibleGrade}
-                            eventLog={eventLog}
-                            setEventLog={eventLog => {
-                              setEventLog(eventLog)
-                            }}
-                            setGoalGrade={grade => {
-                              setSettingChanged(true)
-                              setGoalGrade(grade)
-                            }}
-                            handleClearGoalGrades={handleClearGoalGrades}
-                            mathWarning={showMathWarning}
-                          />
+                      <div role='region' aria-label='goal and progress'>
+                        <Grid container alignContent='center' className={classes.section}>
+                          <Grid item lg={4} md={5} xs={12}>
+                            <Typography variant='h6' gutterBottom>My Minimum Goal (%)</Typography>
+                            <AssignmentGoalInput
+                              currentGrade={currentGrade}
+                              goalGrade={goalGrade}
+                              maxPossibleGrade={maxPossibleGrade}
+                              eventLog={eventLog}
+                              setEventLog={eventLog => {
+                                setEventLog(eventLog)
+                              }}
+                              setGoalGrade={grade => {
+                                setSettingChanged(true)
+                                setGoalGrade(grade)
+                              }}
+                              handleClearGoalGrades={handleClearGoalGrades}
+                              mathWarning={showMathWarning}
+                            />
+                          </Grid>
+                          <Grid item lg={8} md={7} xs={12} className={classes.mainProgressBar}>
+                            <Typography variant='h6' gutterBottom>Grade Progress</Typography>
+                            <ProgressBarV2
+                              score={currentGrade}
+                              lines={[
+                                {
+                                  label: 'Current',
+                                  value: currentGrade,
+                                  color: 'steelblue',
+                                  placement: 'down1'
+                                },
+                                {
+                                  label: 'Goal',
+                                  value: goalGrade,
+                                  color: 'green',
+                                  placement: 'up1'
+                                },
+                                {
+                                  label: 'Max Possible',
+                                  value: maxPossibleGrade,
+                                  color: 'grey',
+                                  placement: 'down2'
+                                }
+                              ]}
+                              outOf={100}
+                              percentWidth={100}
+                              height={50}
+                            />
+                          </Grid>
                         </Grid>
-                        <Grid item lg={8} md={7} xs={12} className={classes.mainProgressBar}>
-                          <Typography variant='h6' gutterBottom>Grade Progress</Typography>
-                          <ProgressBarV2
-                            score={currentGrade}
-                            lines={[
-                              {
-                                label: 'Current',
-                                value: currentGrade,
-                                color: 'steelblue',
-                                placement: 'down1'
-                              },
-                              {
-                                label: 'Goal',
-                                value: goalGrade,
-                                color: 'green',
-                                placement: 'up1'
-                              },
-                              {
-                                label: 'Max Possible',
-                                value: maxPossibleGrade,
-                                color: 'grey',
-                                placement: 'down2'
-                              }
-                            ]}
-                            outOf={100}
-                            percentWidth={100}
-                            height={50}
-                          />
-                        </Grid>
-                      </Grid>
+                      </div>
                       <Grid container>
                         <Grid item xs={6} md={8}>
                           <Typography variant='h6' gutterBottom>Assignments by Due Date</Typography>