fix: a11y issues (#47)

src/containers/RelatedProgramsModal/__snapshots__/index.test.jsx.snap

@@ -12,6 +12,7 @@ exports[`RelatedProgramsModal snapshot: closed 1`] = `
   title="Related Programs"
 >
   <ModalDialog.Header
+    aria-level={2}
     as="h3"
     className="programs-title m-0 p-0"
   >
@@ -95,6 +96,7 @@ exports[`RelatedProgramsModal snapshot: open 1`] = `
   title="Related Programs"
 >
   <ModalDialog.Header
+    aria-level={2}
     as="h3"
     className="programs-title m-0 p-0"
   >

src/containers/RelatedProgramsModal/components/ProgramCard.jsx

@@ -27,13 +27,14 @@ export const ProgramCard = ({ data }) => {
       style={{ width: '18rem', color: 'white' }}
       as="a"
       href={data.programUrl}
+      isClickable
     >
       <Card.ImageCap
         className="program-card-banner"
         src={data.bannerImgSrc}
         srcAlt={formatMessage(messages.bannerAlt)}
         logoSrc={data.logoImgSrc}
-        logoAlt={formatMessage(messages.logoAlt)}
+        logoAlt={formatMessage(messages.logoAlt, { provider: data.provider })}
       />
       <Card.Header
         title={whiteFontWrapper(data.title)}

src/containers/RelatedProgramsModal/components/__snapshots__/ProgramCard.test.jsx.snap

@@ -5,6 +5,7 @@ exports[`RelatedProgramsModal ProgramCard snapshot 1`] = `
   as="a"
   className="program-card mx-auto bg-primary-500 text-white mb-3.5 pb-3.5"
   href="props.data.programUrl"
+  isClickable={true}
   style={
     Object {
       "color": "white",
@@ -14,10 +15,10 @@ exports[`RelatedProgramsModal ProgramCard snapshot 1`] = `
 >
   <Card.ImageCap
     className="program-card-banner"
-    logoAlt="Provider logo"
+    logoAlt="props.data.provider logo"
     logoSrc="props.data.logoImgSrc"
     src="props.data.bannerImgSrc"
-    srcAlt="Program banner"
+    srcAlt=""
   />
   <Card.Header
     subtitle={

src/containers/RelatedProgramsModal/components/messages.js

@@ -11,12 +11,12 @@ export const messages = {
   },
   logoAlt: {
     id: 'learnerDashboard.programCard.logoAlt',
-    defaultMessage: 'Provider logo',
+    defaultMessage: '{provider} logo',
     description: 'Program provider logo alt-text',
   },
   bannerAlt: {
     id: 'learnerDashboard.programCard.bannerAlt',
-    defaultMessage: 'Program banner',
+    defaultMessage: '',
     description: 'Program banner logo alt-text',
   },
 };

src/containers/RelatedProgramsModal/index.jsx

@@ -31,7 +31,7 @@ export const RelatedProgramsModal = ({
       className="related-programs-modal p-4"
       data-testid="RelatedProgramsModal"
     >
-      <ModalDialog.Header className="programs-title m-0 p-0" as="h3">
+      <ModalDialog.Header className="programs-title m-0 p-0" as="h3" aria-level={2}>
         {formatMessage(messages.header)}
       </ModalDialog.Header>
       <ModalDialog.Header as="h4" className="programs-header p-0">