Adds accessibility attributes to make the program drawer work better …

…with screen readers
mitodl · Sep 6, 2022 · b06bb38 · b06bb38
1 parent 5de6dff
commit b06bb38
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 33 deletions.
diff --git a/frontend/public/src/components/ProgramEnrollmentCard.js b/frontend/public/src/components/ProgramEnrollmentCard.js
@@ -90,8 +90,10 @@ export class ProgramEnrollmentCard extends React.Component<
 
     const title = (
       <a
-        href="#"
         rel="noopener noreferrer"
+        href="#program_enrollment_drawer"
+        aria-flowto="program_enrollment_drawer"
+        aria-haspopup="dialog"
         onClick={() => this.hndOpenDrawer()}
       >
         {enrollment.program.title}
@@ -153,7 +155,7 @@ export class ProgramEnrollmentCard extends React.Component<
                 </span>
               )}
               <div className="enrollment-extra-links d-flex">
-                <a href="#" onClick={() => this.hndOpenDrawer()}>{enrollment.enrollments.length} course
+                <a href="#program_enrollment_drawer" aria-flowto="program_enrollment_drawer" aria-haspopup="dialog" onClick={() => this.hndOpenDrawer()}>{enrollment.enrollments.length} course
                   {enrollment.enrollments.length === 1 ? null : 's'}</a>
                 {certLocation ? (
                   <a href={certLocation}>View certificate</a>

diff --git a/frontend/public/src/components/ProgramEnrollmentDrawer.js b/frontend/public/src/components/ProgramEnrollmentDrawer.js
@@ -39,37 +39,38 @@ export class ProgramEnrollmentDrawer extends React.Component<ProgramEnrollmentDr
 
     return (
       <>
-        <div className={backgroundClass}></div>
-        <div className={drawerClass} id="program_enrollment_drawer">
-          <div className="row chrome">
-            <button type="button" className="close" aria-label="Close" onClick={closeDrawer}>
-              <span aria-hidden="true">
-                &times;
-              </span>
-            </button>
-          </div>
-          <div className="row chrome">
-            <h3>Program courses</h3>
-          </div>
-          <div className="row enrolled-items">
-            {enrollments && enrollments.length > 0 ? (enrollments.map(enrollment => (
-              <EnrolledItemCard
-                key={enrollment.id}
-                enrollment={enrollment}
-                currentUser={currentUser}
-                deactivateEnrollment={deactivateEnrollment}
-                courseEmailsSubscription={courseEmailsSubscription}
-                addUserNotification={addUserNotification}>
-              </EnrolledItemCard>
-            ))) : (
-              <div className="card no-enrollments p-3 p-md-5 rounded-0 flex-grow-1">
-                <h2>Enroll Now</h2>
-                <p>
-                  You are not enrolled in any courses yet. Please{" "}
-                  <a href={routes.root}>browse our courses</a>.
-                </p>
-              </div>
-            )}
+        <div className={backgroundClass}>
+          <div className={drawerClass} id="program_enrollment_drawer" tabIndex="-1" role="dialog" aria-modal="true" aria-label="program courses" aria-describedby="program_enrolled_items">
+            <div className="row chrome">
+              <button type="button" className="close" aria-label="Close" onClick={closeDrawer}>
+                <span aria-hidden="true">
+                  &times;
+                </span>
+              </button>
+            </div>
+            <div className="row chrome" id="program_enrollment_title">
+              <h3>Program courses</h3>
+            </div>
+            <div className="row enrolled-items" id="program_enrolled_items">
+              {enrollments && enrollments.length > 0 ? (enrollments.map(enrollment => (
+                <EnrolledItemCard
+                  key={enrollment.id}
+                  enrollment={enrollment}
+                  currentUser={currentUser}
+                  deactivateEnrollment={deactivateEnrollment}
+                  courseEmailsSubscription={courseEmailsSubscription}
+                  addUserNotification={addUserNotification}>
+                </EnrolledItemCard>
+              ))) : (
+                <div className="card no-enrollments p-3 p-md-5 rounded-0 flex-grow-1">
+                  <h2>Enroll Now</h2>
+                  <p>
+                    You are not enrolled in any courses yet. Please{" "}
+                    <a href={routes.root}>browse our courses</a>.
+                  </p>
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </>