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>