fix course card not keyboard accessible issue (#2105)

* fix course card not keyboard accessible issue * address comment
mitodl · Feb 16, 2024 · c356edc · c356edc
1 parent 3086a99
commit c356edc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/cms/templates/course_list_card.html b/cms/templates/course_list_card.html
@@ -1,6 +1,7 @@
 <ul>
     {% for card in cards %}
-    <li onClick="javascript:window.open('{{card.course.page.url}}');"> 
+    <li>
+      <a href="{{card.course.page.url}}" class="program-course-card-link">
         <div class="program-course-card">
             <div class="image">
                 <img src="{{card.featured_image}}" alt="">
@@ -13,6 +14,7 @@
                 <h3 class="title">{{card.course.title}}</h3>
             </div>
         </div>
+      </a>
     </li>
     {% endfor %}
 </ul>
diff --git a/frontend/public/scss/product-page/program-courses.scss b/frontend/public/scss/product-page/program-courses.scss
@@ -140,6 +140,12 @@ body.new-design {
                     }
                 }
             }
+
+            .program-course-card-link {
+                text-decoration: none;
+                display: block;
+                width: fit-content;
+            }
         }
     }
 }