Improve accessibility for learner home (#115)

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>

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>

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>

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>

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>

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=""

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}>