Accessibility: updating intructors info (#2101)

mitodl · Feb 14, 2024 · 65c4b97 · 65c4b97
1 parent 9107217
commit 65c4b97
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/cms/templates/product_page.html b/cms/templates/product_page.html
@@ -133,10 +133,12 @@ <h2>{{ page.faculty_section_title }}</h2>
                       <div class="member-card highlight-card">
                         <img tabindex="0" src="{% feature_img_src member.feature_image %}" alt="Featured image for {{ member.instructor_name }}" data-instructor-id="{{ member.id }}">
                         <div class="member-info">
-                          <h3 id="instructor-name-{{ member.id }}" data-instructor-id="{{ member.id }}" class="name instructor-name" role="button" tabindex="0">
+                          <div role="heading" aria-level="3">
+                            <button id="instructor-name-{{ member.id }}" data-instructor-id="{{ member.id }}" class="name instructor-name" role="button" tabindex="0">
                               {{ member.instructor_name }}
-                          </h3>
-                          {% if member.instructor_title %}<h4 class="title">{{ member.instructor_title }}</h4>{% endif %}
+                            </button>
+                            {% if member.instructor_title %}<div class="title">{{ member.instructor_title }}</div>{% endif %}
+                          </div>
                           <div class="description">{{ member.instructor_bio_short|safe }}</div>
                         </div>
                       </div>

diff --git a/frontend/public/scss/product-faculty-members.scss b/frontend/public/scss/product-faculty-members.scss
@@ -30,13 +30,21 @@ body.new-design {
         overflow: hidden;
         margin: 0;
 
-        h3 {
+        button {
           font-size: 16px;
           font-weight: 700;
           line-height: normal;
+          border: 0;
+          background-color: white;
+          padding: 0 0 8px 0;
+          text-align: left;
+
+          &:hover {
+           color: $brand-button-bg;
+          }
         }
 
-        h4 {
+        .title {
           font-size: 13px;
           font-weight: 400;
           line-height: normal;

diff --git a/frontend/public/src/containers/ProductDetailEnrollApp.js b/frontend/public/src/containers/ProductDetailEnrollApp.js
@@ -110,7 +110,7 @@ export class ProductDetailEnrollApp extends React.Component<Props> {
       link.addEventListener("click", expandExpandBlock)
     })
 
-    document.querySelectorAll("h3.instructor-name").forEach(link => {
+    document.querySelectorAll(".instructor-name").forEach(link => {
       link.removeEventListener("click", openInstructorModal)
       link.addEventListener("click", openInstructorModal)
       link.removeEventListener("keyup", openInstructorModal)