Fixes the keyboard trap issue with instructor modals (#2019)

mitodl · Dec 6, 2023 · 1df7354 · 1df7354
1 parent 7389e94
commit 1df7354
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 7 deletions.
diff --git a/cms/templates/product_page.html b/cms/templates/product_page.html
@@ -115,11 +115,11 @@ <h2>{{ page.faculty_section_title }}</h2>
                   <ul class="faculty-members card-listing">
                     {% if instructors %}
                     {% for member in instructors %}
-                      <li>
-                        <div class="member-card highlight-card" onClick="$('#instructor-modal-{{ member.id }}').modal('show');">
-                          <img src="{% feature_img_src member.feature_image %}" alt="">
+                      <li class="member-card-container">
+                        <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 }}" class="name" role="button" tabindex="0" onClick="$('#instructor-modal-{{ member.id }}').modal('show');" onKeyUp="if (event.code === 'Enter') { $('#instructor-modal-{{ member.id }}').modal('show'); }">
+                            <h3 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 %}
@@ -182,9 +182,7 @@ <h2>Who can take this course?</h2>
               <div class="modal-content">
                 <div class="modal-header">
                   <h5 class="modal-title">{{ member.instructor_name }}</h5>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"
-                          onClick="$('#instructor-modal-{{ member.id }}').modal('hide');
-                                   $('#instructor-name-{{ member.id }}').focus();">
+                  <button type="button" class="close" data-close-instructor-id="{{ member.id }}" aria-label="Close">
                     <span aria-hidden="true">
                         <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4.1239L8.94245 0.181446C9.18438 -0.0604821 9.57662 -0.0604821 9.81855 0.181446C10.0605 0.423375 10.0605 0.815619 9.81855 1.05755L5.8761 5L9.81855 8.94245C10.0605 9.18438 10.0605 9.57662 9.81855 9.81855C9.57662 10.0605 9.18438 10.0605 8.94245 9.81855L5 5.8761L1.05755 9.81855C0.815619 10.0605 0.423375 10.0605 0.181446 9.81855C-0.0604821 9.57662 -0.0604821 9.18438 0.181446 8.94245L4.1239 5L0.181446 1.05755C-0.0604821 0.815619 -0.0604821 0.423375 0.181446 0.181446C0.423375 -0.0604821 0.815619 -0.0604821 1.05755 0.181446L5 4.1239Z" fill="#03152D"/>

diff --git a/frontend/public/src/containers/ProductDetailEnrollApp.js b/frontend/public/src/containers/ProductDetailEnrollApp.js
@@ -1,4 +1,5 @@
 // @flow
+/* global $:false */
 import React from "react"
 import { checkFeatureFlag } from "../lib/util"
 
@@ -30,6 +31,71 @@ const expandExpandBlock = (event: MouseEvent) => {
   }
 }
 
+const closeInstructorModal = (event: MouseEvent | KeyboardEvent) => {
+  event.preventDefault()
+  event.stopImmediatePropagation()
+
+  const target = event.target
+
+  if (target instanceof HTMLElement) {
+    const instructorId: string =
+      target.getAttribute("data-close-instructor-id") || ""
+
+    if (
+      instructorId &&
+      ((event.keyCode && event.keyCode === 13) || event.type === "click")
+    ) {
+      const modal = document.getElementById(`instructor-modal-${instructorId}`)
+      if (modal) {
+        // $FlowFixMe
+        $(modal)
+          .off("hidden.bs.modal")
+          .on("hidden.bs.modal", () => {
+            const instructorImg = document.querySelector(
+              `li.member-card-container img[data-instructor-id='${instructorId}']`
+            )
+
+            if (instructorImg) instructorImg.focus()
+          })
+
+        // $FlowFixMe
+        $(modal).modal("hide")
+      }
+    }
+  }
+}
+
+const openInstructorModal = (event: MouseEvent | KeyboardEvent) => {
+  event.preventDefault()
+  event.stopImmediatePropagation()
+
+  const target = event.target
+
+  if (target instanceof HTMLElement) {
+    const instructorId: string = target.getAttribute("data-instructor-id") || ""
+
+    if (
+      instructorId &&
+      ((event.keyCode && event.keyCode === 13) || event.type === "click")
+    ) {
+      const modal = document.getElementById(`instructor-modal-${instructorId}`)
+      if (modal) {
+        // $FlowFixMe
+        $(modal).modal("show")
+
+        document
+          .querySelectorAll(`div#instructor-modal-${instructorId} button.close`)
+          .forEach(button => {
+            button.removeEventListener("keyup", closeInstructorModal)
+            button.addEventListener("keyup", closeInstructorModal)
+            button.removeEventListener("click", closeInstructorModal)
+            button.addEventListener("click", closeInstructorModal)
+          })
+      }
+    }
+  }
+}
+
 type Props = {
   courseId: ?string,
   programId: ?string,
@@ -50,6 +116,13 @@ export class ProductDetailEnrollApp extends React.Component<Props> {
         link.removeEventListener("click", expandExpandBlock)
         link.addEventListener("click", expandExpandBlock)
       })
+
+      document.querySelectorAll("h3.instructor-name").forEach(link => {
+        link.removeEventListener("click", openInstructorModal)
+        link.addEventListener("click", openInstructorModal)
+        link.removeEventListener("keyup", openInstructorModal)
+        link.addEventListener("keyup", openInstructorModal)
+      })
     }
 
     return programId && showNewDesign ? (