fix: a11y issues (#47)

src/containers/CourseCard/components/CourseCardContent.jsx

@@ -30,9 +30,11 @@ export const CourseCardContent = ({ cardId, orientation }) => {
       <Card.Body>
         <Card.Header
           title={(
-            <a href={homeUrl} data-testid="CourseCardTitle">
-              {courseName}
-            </a>
+            <h3>
+              <a href={homeUrl} data-testid="CourseCardTitle">
+                {courseName}
+              </a>
+            </h3>
           )}
           actions={<CourseCardMenu cardId={cardId} />}
         />

src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap

@@ -7,7 +7,7 @@ exports[`CourseCardMenu snapshot 1`] = `
       alt="Actions dropdown"
       as="IconButton"
       iconAs="Icon"
-      id="dropdown-toggle-with-iconbutton"
+      id="course-actions-dropdown-test-card-id"
       src={[MockFunction icons.MoreVert]}
       variant="primary"
     />

src/containers/CourseCard/components/CourseCardMenu/index.jsx

@@ -19,7 +19,7 @@ export const CourseCardMenu = ({ cardId }) => {
     <>
       <Dropdown>
         <Dropdown.Toggle
-          id="dropdown-toggle-with-iconbutton"
+          id={`course-actions-dropdown-${cardId}`}
           as={IconButton}
           src={MoreVert}
           iconAs={Icon}

src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap

@@ -20,12 +20,14 @@ exports[`CourseCardContent snapshot orientation horizontal 1`] = `
         />
       }
       title={
-        <a
-          data-testid="CourseCardTitle"
-          href="test-home-url"
-        >
-          test-course-name
-        </a>
+        <h3>
+          <a
+            data-testid="CourseCardTitle"
+            href="test-home-url"
+          >
+            test-course-name
+          </a>
+        </h3>
       }
     />
     <Card.Section
@@ -71,12 +73,14 @@ exports[`CourseCardContent snapshot orientation vertical 1`] = `
         />
       }
       title={
-        <a
-          data-testid="CourseCardTitle"
-          href="test-home-url"
-        >
-          test-course-name
-        </a>
+        <h3>
+          <a
+            data-testid="CourseCardTitle"
+            href="test-home-url"
+          >
+            test-course-name
+          </a>
+        </h3>
       }
     />
     <Card.Section