fix glossary keyboard nav for multiple plan tiles (#4275)

* add index to distinguish glossaries between tiles * use id rather than random string
ideacrew · Aug 13, 2024 · 2faec5a · 2faec5a
1 parent e9848fc
commit 2faec5a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/app/assets/javascripts/keyboard_navigation.js b/app/assets/javascripts/keyboard_navigation.js
@@ -57,7 +57,9 @@ function handleGlossaryBlur(glossaryId) {
 }
 
 function handleGlossaryKeydown(event, glossaryId) {
-  if (event.key === 'Tab') {
+  if (event.key === 'Tab' || event.key === 'Enter') {
     $("#" + glossaryId).popover('show');
+  } else {
+    $("#" + glossaryId).popover('hide');
   }
 }
diff --git a/app/views/insured/families/_enrollment_actions.html.erb b/app/views/insured/families/_enrollment_actions.html.erb
@@ -2,6 +2,7 @@
 
 <% if @bs4 %>
 <div class="enrollment-actions-ddl">
+  <% key_index = hbx_enrollment.id %>
   <% unless read_only || !can_make_changes_for_enrollment %>
     <div class="dropdown">
       <button class="btn btn-default dropdown-toggle interaction-click-control-actions button outline " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -11,24 +12,24 @@
 
       <div class="dropdown-menu dropdown-glossary run-glossary" role="menu">
         <%# coverage details %>
-        <a role="menuitem" onkeydown="handleGlossaryKeydown(this, 'view_coverage_details')" onfocus="handleGlossaryFocus('view_coverage_details')" onblur="handleGlossaryBlur('view_coverage_details')" href="<%= summary_products_plans_path({standard_component_id: hbx_enrollment.product.hios_id, hbx_enrollment_id: hbx_enrollment.id, active_year: hbx_enrollment.product.active_year, source: 'account', bs4: @bs4}) %>" class='btn-link btn-block dropdown-item px-2 py-1' id='view-details-btn' data-remote="<%= action_name != "home" %>">
-          <%= render partial:"shared/glossary_hover", locals: {key: "view_coverage_details", title: "View my coverage details", term: sanitize(l10n("view_details")) } %>
+        <a role="menuitem" onkeydown="handleGlossaryKeydown(event, 'view_coverage_details<%= key_index %>')" onfocus="handleGlossaryFocus('view_coverage_details<%= key_index %>')" onblur="handleGlossaryBlur('view_coverage_details<%= key_index %>')" href="<%= summary_products_plans_path({standard_component_id: hbx_enrollment.product.hios_id, hbx_enrollment_id: hbx_enrollment.id, active_year: hbx_enrollment.product.active_year, source: 'account', bs4: @bs4}) %>" class='btn-link btn-block dropdown-item px-2 py-1' id='view-details-btn' data-remote="<%= action_name != "home" %>">
+          <%= render partial:"shared/glossary_hover", locals: {key: "view_coverage_details", title: "View my coverage details", term: sanitize(l10n("view_details")), key_index: key_index } %>
         </a>
 
         <%# changes to plan %>
         <% if can_make_changes_for_enrollment && !(hbx_enrollment.coverage_terminated? || hbx_enrollment.coverage_canceled?) && hbx_enrollment.is_shop?%>
           <hr>
           <%= pundit_span Family, :updateable? %>
           <!-- Use turbolinks: false, to avoid calling controller action twice-->
-          <a role="menuitem" onkeydown="handleGlossaryKeydown(this, 'make_changes_to_coverage')" onfocus="handleGlossaryFocus('make_changes_to_coverage')" onblur="handleGlossaryBlur('make_changes_to_coverage')" href="<%= new_insured_group_selection_path(person_id: @person.id, employee_role_id: @employee_role.try(:id), change_plan: 'change_plan', hbx_enrollment_id: hbx_enrollment.id, coverage_kind: hbx_enrollment.coverage_kind) %>" class='btn-link btn-block dropdown-item ee-make-changes  px-2 py-1' id='make-changes-btn' disabled=<%= !can_make_changes_for_enrollment %> data-turbolinks='false' >
-            <%= render partial:"shared/glossary_hover", locals: {key: "make_changes_to_coverage", title: "Make changes to my plan", term: sanitize(l10n('make_changes')) } %>
+          <a role="menuitem" onkeydown="handleGlossaryKeydown(event, 'make_changes_to_coverage<%= key_index %>')" onfocus="handleGlossaryFocus('make_changes_to_coverage<%= key_index %>')" onblur="handleGlossaryBlur('make_changes_to_coverage<%= key_index %>')" href="<%= new_insured_group_selection_path(person_id: @person.id, employee_role_id: @employee_role.try(:id), change_plan: 'change_plan', hbx_enrollment_id: hbx_enrollment.id, coverage_kind: hbx_enrollment.coverage_kind) %>" class='btn-link btn-block dropdown-item ee-make-changes  px-2 py-1' id='make-changes-btn' disabled=<%= !can_make_changes_for_enrollment %> data-turbolinks='false' >
+            <%= render partial:"shared/glossary_hover", locals: {key: "make_changes_to_coverage", title: "Make changes to my plan", term: sanitize(l10n('make_changes')), key_index: key_index } %>
           </a>
         <!-- This potentially allows certain shop users to view Make Changes -->
         <% elsif can_make_changes_for_enrollment %>
           <hr>
           <%= pundit_span Family, :updateable? %>
-          <a role="menuitem" onkeydown="handleGlossaryKeydown(this, 'make_changes_to_coverage')" onfocus="handleGlossaryFocus('make_changes_to_coverage')" onblur="handleGlossaryBlur('make_changes_to_coverage')" href="<%= edit_plan_insured_group_selections_path(hbx_enrollment_id: hbx_enrollment&.id, family_id: @family&.id) %>" class='btn-link btn-block dropdown-item ivl-make-changes  px-2 py-1' id='make-changes-btn' data-turbolinks="false">
-            <%= render partial:"shared/glossary_hover", locals: {key: "make_changes_to_coverage", title: "Make changes to my plan", term: sanitize(l10n('make_changes')) } %>
+          <a role="menuitem" onkeydown="handleGlossaryKeydown(event, 'make_changes_to_coverage<%= key_index %>')" onfocus="handleGlossaryFocus('make_changes_to_coverage<%= key_index %>')" onblur="handleGlossaryBlur('make_changes_to_coverage<%= key_index %>')" href="<%= edit_plan_insured_group_selections_path(hbx_enrollment_id: hbx_enrollment&.id, family_id: @family&.id) %>" class='btn-link btn-block dropdown-item ivl-make-changes  px-2 py-1' id='make-changes-btn' data-turbolinks="false">
+            <%= render partial:"shared/glossary_hover", locals: {key: "make_changes_to_coverage", title: "Make changes to my plan", term: sanitize(l10n('make_changes')), key_index: key_index } %>
           </a>
         <% end %>
 
@@ -38,22 +39,22 @@
           <% if show_pay_now?("Enrollment Tile", hbx_enrollment)%>
 
             <% if before_effective_date?(hbx_enrollment) %>
-              <a role="menuitem" onkeydown="handleGlossaryKeydown(this, 'make_payment_before_effective_hover')" onfocus="handleGlossaryFocus('make_payment_before_effective_hover')" onblur="handleGlossaryBlur('make_payment_before_effective_hover')" class="btn-link btn-block dropdown-item px-2 py-1" data-toggle="modal" data-target="#payNowModal<%= hbx_enrollment.hbx_id %>" data-enrollment="<%= hbx_enrollment.hbx_id %>" href="#">
-              <%= render partial:"shared/glossary_hover", locals: {key: "make_payment_before_effective_hover", title: "Make a first payment for my new plan", term: sanitize(l10n("plans.issuer.pay_now.make_first_payment")) } %>
+              <a role="menuitem" onkeydown="handleGlossaryKeydown(event, 'make_payment_before_effective_hover<%= key_index %>')" onfocus="handleGlossaryFocus('make_payment_before_effective_hover<%= key_index %>')" onblur="handleGlossaryBlur('make_payment_before_effective_hover<%= key_index %>')" class="btn-link btn-block dropdown-item px-2 py-1" data-toggle="modal" data-target="#payNowModal<%= hbx_enrollment.hbx_id %>" data-enrollment="<%= hbx_enrollment.hbx_id %>" href="#">
+              <%= render partial:"shared/glossary_hover", locals: {key: "make_payment_before_effective_hover", title: "Make a first payment for my new plan", term: sanitize(l10n("plans.issuer.pay_now.make_first_payment")), key_index: key_index } %>
               </a>
             <% else %> <%# after or on effective date %>
-              <a role="menuitem" onkeydown="handleGlossaryKeydown(this, 'make_payments_hover')" onfocus="handleGlossaryFocus('make_payments_hover')" onblur="handleGlossaryBlur('make_payments_hover')" class="btn-link btn-block dropdown-item px-2 py-1" data-toggle="modal" data-target="#payNowModal<%= hbx_enrollment.hbx_id %>" data-enrollment="<%= hbx_enrollment.hbx_id %>" href="#">
-              <%= render partial:"shared/glossary_hover", locals: {key: "make_payments_hover", title: "Make payments for my plan", term: sanitize(l10n("plans.issuer.pay_now.make_payments")) } %>
+              <a role="menuitem" onkeydown="handleGlossaryKeydown(event, 'make_payments_hover<%= key_index %>')" onfocus="handleGlossaryFocus('make_payments_hover<%= key_index %>')" onblur="handleGlossaryBlur('make_payments_hover<%= key_index %>')" class="btn-link btn-block dropdown-item px-2 py-1" data-toggle="modal" data-target="#payNowModal<%= hbx_enrollment.hbx_id %>" data-enrollment="<%= hbx_enrollment.hbx_id %>" href="#">
+              <%= render partial:"shared/glossary_hover", locals: {key: "make_payments_hover", title: "Make payments for my plan", term: sanitize(l10n("plans.issuer.pay_now.make_payments")), key_index: key_index } %>
               </a>
             <% end %>
 
           <% elsif show_generic_redirect?(hbx_enrollment) %>
-            <a role="menuitem" onkeydown="handleGlossaryKeydown(this, 'generic_make_payments_hover')" onfocus="handleGlossaryFocus('generic_make_payments_hover')" onblur="handleGlossaryBlur('generic_make_payments_hover')" class="btn-link btn-block dropdown-item px-2 py-1" data-toggle="modal" data-target="#payNowModal<%= hbx_enrollment.hbx_id %>" data-enrollment="<%= hbx_enrollment.hbx_id %>" href="#">
-              <%= render partial:"shared/glossary_hover", locals: {key: "generic_make_payments_hover", title: "Make payments for my plan", term: sanitize(l10n("plans.issuer.pay_now.make_payments")) } %>
+            <a role="menuitem" onkeydown="handleGlossaryKeydown(event, 'generic_make_payments_hover<%= key_index %>')" onfocus="handleGlossaryFocus('generic_make_payments_hover<%= key_index %>')" onblur="handleGlossaryBlur('generic_make_payments_hover<%= key_index %>')" class="btn-link btn-block dropdown-item px-2 py-1" data-toggle="modal" data-target="#payNowModal<%= hbx_enrollment.hbx_id %>" data-enrollment="<%= hbx_enrollment.hbx_id %>" href="#">
+              <%= render partial:"shared/glossary_hover", locals: {key: "generic_make_payments_hover", title: "Make payments for my plan", term: sanitize(l10n("plans.issuer.pay_now.make_payments")), key_index: key_index } %>
             </a>
           <% else %>
-            <a role="menuitem" onkeydown="handleGlossaryKeydown(this, 'generic_make_payments_hover')" onfocus="handleGlossaryFocus('generic_make_payments_hover')" onblur="handleGlossaryBlur('generic_make_payments_hover')" class="btn-link btn-block dropdown-item px-2 py-1" data-toggle="modal" data-target="#payNowModal<%= hbx_enrollment.hbx_id %>" data-enrollment="<%= hbx_enrollment.hbx_id %>" href="#">
-              <%= render partial:"shared/glossary_hover", locals: {key: "generic_make_payments_hover", title: "Make payments for my plan", term: sanitize(l10n("plans.issuer.pay_now.make_payments")) } %>
+            <a role="menuitem" onkeydown="handleGlossaryKeydown(event, 'generic_make_payments_hover<%= key_index %>')" onfocus="handleGlossaryFocus('generic_make_payments_hover<%= key_index %>')" onblur="handleGlossaryBlur('generic_make_payments_hover<%= key_index %>')" class="btn-link btn-block dropdown-item px-2 py-1" data-toggle="modal" data-target="#payNowModal<%= hbx_enrollment.hbx_id %>" data-enrollment="<%= hbx_enrollment.hbx_id %>" href="#">
+              <%= render partial:"shared/glossary_hover", locals: {key: "generic_make_payments_hover", title: "Make payments for my plan", term: sanitize(l10n("plans.issuer.pay_now.make_payments")), key_index: key_index } %>
             </a>
           <% end %>
         <% end %>

diff --git a/app/views/shared/_glossary_hover.html.erb b/app/views/shared/_glossary_hover.html.erb
@@ -1,4 +1,7 @@
-<span id= "<%= key %>" class="glossary"
+<!-- added random string to make duplicate instances on a page work -->
+<% key_index = local_assigns[:key_index] ? key_index : "" %>
+
+<span id="<%= key %><%= key_index %>" class="glossary"
       data-toggle="popover"
       data-animation="false"
       data-placement="auto top"