fix keyboard navigation double firing function and keyboard upload on…

… FAA verification (#4861) enhance keyboard navigation and improve accessibility for evidence upload
ideacrew · Jan 9, 2025 · 23151e3 · 23151e3
1 parent 78a9638
commit 23151e3
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 34 deletions.
diff --git a/app/assets/javascripts/keyboard_navigation.js b/app/assets/javascripts/keyboard_navigation.js
@@ -18,7 +18,9 @@ function handleRadioKeyDown(event, radioId) {
 function handleCitizenKeyDown(event, radioIdBase) {
   if (event.key === 'Enter') {
     const personElement = document.getElementById(`person_${radioIdBase}`);
-    const dependentElement = document.getElementById(`dependent_${radioIdBase}`);
+    const dependentElement = document.getElementById(
+      `dependent_${radioIdBase}`
+    );
 
     if (personElement) {
       personElement.click();
@@ -32,11 +34,11 @@ function handleContactInfoKeyDown(event, radioId, modifyDiv) {
   if (event.key === 'Enter') {
     document.getElementById(radioId).click();
     hidden_div = document.getElementById(modifyDiv);
-    if (hidden_div.style.display === "block") {
-      hidden_div.style.display = "none";
+    if (hidden_div.style.display === 'block') {
+      hidden_div.style.display = 'none';
     } else {
-      hidden_div.style.opacity = "1";
-      hidden_div.style.display = "block";
+      hidden_div.style.opacity = '1';
+      hidden_div.style.display = 'block';
     }
   }
 }
@@ -52,9 +54,12 @@ document.addEventListener('turbolinks:load', () => {
     }
 
     /*
-    * Trigger the click on the proxy element identified by the attribute.
-    */
-    if (targetElement && event.key === 'Enter') {
+     * Trigger the click on the proxy element identified by the attribute.
+     */
+    if (event.key === 'Enter' && keydownId) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+
       const keydownId = targetElement.dataset.keydownId;
       clickElementById(keydownId);
     }
@@ -97,46 +102,61 @@ function handleCancelButtonKeyDown(event, buttonId, hideForm) {
 }
 
 function handleGlossaryFocus(glossaryId) {
-  $("#" + glossaryId).popover('show');
+  $('#' + glossaryId).popover('show');
 }
 
 function handleGlossaryBlur(glossaryId) {
-  $("#" + glossaryId).popover('hide');
+  $('#' + glossaryId).popover('hide');
 }
 
 function handleGlossaryKeydown(event, glossaryId) {
   if (event.key === 'Tab' || event.key === 'Enter') {
-    $("#" + glossaryId).popover('show');
+    $('#' + glossaryId).popover('show');
   } else {
-    $("#" + glossaryId).popover('hide');
+    $('#' + glossaryId).popover('hide');
   }
 }
 
-window.addEventListener('keydown', function(event) {
-  if (event.keyIdentifier == 'U+000A' || event.keyIdentifier == 'Enter' || event.key === 'Enter') {
-    if (event.target.nodeName == 'INPUT' && event.target.type !== 'text' && event.target.type !== 'textarea') {
-      var form = event.target.closest('form');
-      var reqCheckboxLists = form.querySelectorAll('.req-checkbox-group');
-      var requiredChecklists = [...reqCheckboxLists];
-      var checkListFail = false;
-      requiredChecklists.forEach(function(reqCheckbox) {
-        if (reqCheckbox.querySelectorAll('input[type="checkbox"]:checked').length == 0) {
-          checkListFail = true
-          reqCheckbox.classList.add('invalid');
+window.addEventListener(
+  'keydown',
+  function (event) {
+    if (
+      event.keyIdentifier == 'U+000A' ||
+      event.keyIdentifier == 'Enter' ||
+      event.key === 'Enter'
+    ) {
+      if (
+        event.target.nodeName == 'INPUT' &&
+        event.target.type !== 'text' &&
+        event.target.type !== 'textarea'
+      ) {
+        var form = event.target.closest('form');
+        var reqCheckboxLists = form.querySelectorAll('.req-checkbox-group');
+        var requiredChecklists = [...reqCheckboxLists];
+        var checkListFail = false;
+        requiredChecklists.forEach(function (reqCheckbox) {
+          if (
+            reqCheckbox.querySelectorAll('input[type="checkbox"]:checked')
+              .length == 0
+          ) {
+            checkListFail = true;
+            reqCheckbox.classList.add('invalid');
+          } else {
+            reqCheckbox.classList.remove('invalid');
+          }
+        });
+        if (form.checkValidity() === false || checkListFail) {
+          event.preventDefault();
+          event.stopPropagation();
+          form.classList.add('was-validated');
         } else {
-          reqCheckbox.classList.remove('invalid');
+          form.classList.remove('was-validated');
         }
-      });
-      if (form.checkValidity() === false || checkListFail) {
-        event.preventDefault();
-        event.stopPropagation();
-        form.classList.add('was-validated');
-      } else {
-        form.classList.remove('was-validated');
       }
     }
-  }
-}, true);
+  },
+  true
+);
 
 document.addEventListener('turbolinks:load', () => {
   /**

diff --git a/...nce/app/views/financial_assistance/applications/verifications/_verification_card.html.erb b/...nce/app/views/financial_assistance/applications/verifications/_verification_card.html.erb
@@ -28,7 +28,7 @@
         <% end %>
         <% if display_upload_for_evidence?(evidence) %>
           <%= form_tag financial_assistance.application_applicant_verification_documents_upload_path(application, applicant), multipart: true, method: :post do %>
-            <span tabindex="0" onkeydown="handleButtonKeyDown(event, 'upload_evidence_<%= evidence.id %>')" class="btn btn-default btn-file text-nowrap sm-space">
+            <span tabindex="0" data-keydown-id="upload_evidence_<%= evidence.id %>" class="btn btn-default btn-file text-nowrap sm-space">
               <i class="fa fa-upload" aria-hidden="true"></i>
               <label>
                 <%= l10n('upload_documents') %>