Skip to content

Commit

Permalink
keydown tooltips (#4268)
Browse files Browse the repository at this point in the history 
tooltips via keyboard
  • Loading branch information
@kristinmerbach @charlienparker
kristinmerbach authored and charlienparker committed Sep 16, 2024
1 parent 0e98483 commit e924c9e
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 10 deletions.
4 changes: 1 addition & 3 deletions app/assets/javascripts/keyboard_navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,7 @@ function handleGlossaryBlur(glossaryId) {
}

function handleGlossaryKeydown(event, glossaryId) {
if (event.key === 'Tab' || event.key === 'Enter') {
if (event.key === 'Tab') {
$("#" + glossaryId).popover('show');
} else {
$("#" + glossaryId).popover('hide');
}
}
14 changes: 7 additions & 7 deletions app/views/insured/families/_enrollment_actions.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<div class="dropdown-menu dropdown-glossary run-glossary" role="menu">
<%# coverage details %>
<a role="menuitem" 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" %>">
<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>

Expand All @@ -20,14 +20,14 @@
<hr>
<%= pundit_span Family, :updateable? %>
<!-- Use turbolinks: false, to avoid calling controller action twice-->
<a role="menuitem" 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' >
<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>
<!-- This potentially allows certain shop users to view Make Changes -->
<% elsif can_make_changes_for_enrollment %>
<hr>
<%= pundit_span Family, :updateable? %>
<a role="menuitem" 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">
<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>
<% end %>
Expand All @@ -38,21 +38,21 @@
<% if show_pay_now?("Enrollment Tile", hbx_enrollment)%>

<% if before_effective_date?(hbx_enrollment) %>
<a role="menuitem" 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="#">
<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>
<% else %> <%# after or on effective date %>
<a role="menuitem" 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="#">
<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>
<% end %>

<% elsif show_generic_redirect?(hbx_enrollment) %>
<a role="menuitem" 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="#">
<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>
<% else %>
<a role="menuitem" 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="#">
<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>
<% end %>
Expand Down

0 comments on commit e924c9e

Please sign in to comment.