From f25a15d917a0627d5dde4cc6a4230b43823ffa5c Mon Sep 17 00:00:00 2001
From: leangseu-edx <83240113+leangseu-edx@users.noreply.github.com>
Date: Tue, 28 Feb 2023 09:14:53 -0500
Subject: [PATCH] Improve accessibility for learner home (#115)

---
 .../components/CourseCardBanners/CertificateBanner.jsx    | 4 ++--
 .../components/CourseCardBanners/CourseBanner.jsx         | 4 ++--
 .../__snapshots__/CertificateBanner.test.jsx.snap         | 5 ++++-
 .../__snapshots__/CourseBanner.test.jsx.snap              | 2 ++
 src/containers/CourseCard/components/CourseCardImage.jsx  | 1 +
 .../MasqueradeBar/__snapshots__/index.test.jsx.snap       | 8 ++++++++
 src/containers/MasqueradeBar/index.jsx                    | 3 ++-
 7 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx
index 7c4bd0b..c5a3773 100644
--- a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx
@@ -53,7 +53,7 @@ export const CertificateBanner = ({ cardId }) => {
         <Banner variant="warning">
           {formatMessage(messages.notEligibleForCert)}
           {'  '}
-          <Hyperlink destination={progressUrl}>{formatMessage(messages.viewGrades)}</Hyperlink>
+          <Hyperlink isInline destination={progressUrl}>{formatMessage(messages.viewGrades)}</Hyperlink>
         </Banner>
       );
     }
@@ -68,7 +68,7 @@ export const CertificateBanner = ({ cardId }) => {
       <Banner variant="success" icon={CheckCircle}>
         {formatMessage(messages.certReady)}
         {'  '}
-        <Hyperlink destination={certificate.certPreviewUrl}>
+        <Hyperlink isInline destination={certificate.certPreviewUrl}>
           {formatMessage(messages.viewCertificate)}
         </Hyperlink>
       </Banner>
diff --git a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
index f8c111e..b970c08 100644
--- a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
@@ -37,7 +37,7 @@ export const CourseBanner = ({ cardId }) => {
             {formatMessage(messages.auditAccessExpired)}
             {'  '}
             {
-              <Hyperlink destination="">
+              <Hyperlink isInline destination="">
                 {formatMessage(messages.findAnotherCourse)}
               </Hyperlink>
             }
@@ -48,7 +48,7 @@ export const CourseBanner = ({ cardId }) => {
         <Banner>
           {formatMessage(messages.upgradeDeadlinePassed)}
           {'  '}
-          <Hyperlink destination={courseRun.marketingUrl || ''}>
+          <Hyperlink isInline destination={courseRun.marketingUrl || ''}>
             {formatMessage(messages.exploreCourseDetails)}
           </Hyperlink>
         </Banner>
diff --git a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap
index 7cce84d..0b7479e 100644
--- a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap
@@ -7,7 +7,9 @@ exports[`CertificateBanner snapshot is passing and is downloadable 1`] = `
 >
   Congratulations.  Your certificate is ready.
     
-  <Hyperlink>
+  <Hyperlink
+    isInline={true}
+  >
     View Certificate.
   </Hyperlink>
 </Banner>
@@ -104,6 +106,7 @@ exports[`CertificateBanner snapshot not passing and has finished 1`] = `
     
   <Hyperlink
     destination="progressUrl"
+    isInline={true}
   >
     View grades.
   </Hyperlink>
diff --git a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CourseBanner.test.jsx.snap b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CourseBanner.test.jsx.snap
index 990d78a..4b8d43c 100644
--- a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CourseBanner.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CourseBanner.test.jsx.snap
@@ -17,6 +17,7 @@ exports[`CourseBanner audit access expired, cannot upgrade snapshot: (auditAcces
       
     <Hyperlink
       destination=""
+      isInline={true}
     >
       Find another course
     </Hyperlink>
@@ -31,6 +32,7 @@ exports[`CourseBanner course run active and cannot upgrade snapshot: (upgradseDe
       
     <Hyperlink
       destination="marketing-url"
+      isInline={true}
     >
       Explore course details.
     </Hyperlink>
diff --git a/src/containers/CourseCard/components/CourseCardImage.jsx b/src/containers/CourseCard/components/CourseCardImage.jsx
index 46cf056..f3697ed 100644
--- a/src/containers/CourseCard/components/CourseCardImage.jsx
+++ b/src/containers/CourseCard/components/CourseCardImage.jsx
@@ -50,6 +50,7 @@ export const CourseCardImage = ({ cardId, orientation }) => {
         className={wrapperClassName}
         href={homeUrl}
         onClick={handleImageClicked}
+        tabIndex="-1"
       >
         {image}
       </a>
diff --git a/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap b/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap
index 30876ac..32bfb34 100644
--- a/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap
+++ b/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap
@@ -9,6 +9,7 @@ exports[`MasqueradeBar snapshot can masquerade 1`] = `
   >
     <FormLabel
       className="masquerade-form-label"
+      id="masquerade-form-label"
       inline={true}
     >
       <Icon
@@ -21,6 +22,7 @@ exports[`MasqueradeBar snapshot can masquerade 1`] = `
       isInvalid={false}
     >
       <FormControl
+        aria-labelledby="masquerade-form-label"
         floatingLabel="Username or email"
         onChange={[MockFunction handleMasqueradeInputChange]}
         value=""
@@ -51,6 +53,7 @@ exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
   >
     <FormLabel
       className="masquerade-form-label"
+      id="masquerade-form-label"
       inline={true}
     >
       <Icon
@@ -63,6 +66,7 @@ exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
       isInvalid={false}
     >
       <FormControl
+        aria-labelledby="masquerade-form-label"
         floatingLabel="Username or email"
         onChange={[MockFunction handleMasqueradeInputChange]}
         value="test"
@@ -95,6 +99,7 @@ exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
   >
     <FormLabel
       className="masquerade-form-label"
+      id="masquerade-form-label"
       inline={true}
     >
       <Icon
@@ -107,6 +112,7 @@ exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
       isInvalid={true}
     >
       <FormControl
+        aria-labelledby="masquerade-form-label"
         floatingLabel="Username or email"
         onChange={[MockFunction handleMasqueradeInputChange]}
         value=""
@@ -141,6 +147,7 @@ exports[`MasqueradeBar snapshot is masquerading pending 1`] = `
   >
     <FormLabel
       className="masquerade-form-label"
+      id="masquerade-form-label"
       inline={true}
     >
       <Icon
@@ -153,6 +160,7 @@ exports[`MasqueradeBar snapshot is masquerading pending 1`] = `
       isInvalid={false}
     >
       <FormControl
+        aria-labelledby="masquerade-form-label"
         floatingLabel="Username or email"
         onChange={[MockFunction handleMasqueradeInputChange]}
         value=""
diff --git a/src/containers/MasqueradeBar/index.jsx b/src/containers/MasqueradeBar/index.jsx
index 418fc87..ac56d69 100644
--- a/src/containers/MasqueradeBar/index.jsx
+++ b/src/containers/MasqueradeBar/index.jsx
@@ -54,7 +54,7 @@ export const MasqueradeBar = () => {
           </>
         ) : (
           <>
-            <FormLabel inline className="masquerade-form-label">
+            <FormLabel inline id="masquerade-form-label" className="masquerade-form-label">
               <Icon src={PersonSearch} />
               {formatMessage(messages.ViewAs)}
             </FormLabel>
@@ -63,6 +63,7 @@ export const MasqueradeBar = () => {
                 value={masqueradeInput}
                 onChange={handleMasqueradeInputChange}
                 floatingLabel={formatMessage(messages.StudentNameInput)}
+                aria-labelledby="masquerade-form-label"
               />
               {isMasqueradingFailed && (
                 <FormControlFeedback type="invalid" hasIcon={false}>