Skip to content

add refocus after modal close and prevent focus traps #6116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TristanB17 wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open

add refocus after modal close and prevent focus traps #6116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d15b39d
add refocus after modal close and prevent focus traps
TristanB17 Mar 24, 2026
436f961
Merge branch 'trunk' into CU_868hyuwqr_refocus_after_modal_close
TristanB17 Mar 24, 2026
cd71de1
add missing declaration
TristanB17 Mar 24, 2026
b85a747
remove unnecessary code comments
TristanB17 Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions app/assets/javascripts/inline_replacements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,29 @@ function enableButton(button) {
.removeClass('disabled');
};

function restoreModalFocus(triggerElement, options) {
options = Object.assign({
fallbackElement: document.body,
delay: 100
}, options);

setTimeout(function() {
if (triggerElement && triggerElement.offsetParent !== null) {
triggerElement.focus();
return;
}

if (options.fallbackElement.matches &&
options.fallbackElement.matches('button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href]:not([disabled])')) {
options.fallbackElement.focus();
} else {
options.fallbackElement.querySelector(
'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href]:not([disabled])'
).focus();
}
}, options.delay);
};

$(document).on('click', '.remove-child-row-btn', function () {
$('tr.child-row:visible').remove();
});
Expand Down
51 changes: 43 additions & 8 deletions components/financial_assistance/app/assets/javascripts/financial_assistance/benefit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,22 @@ function stopEditing() {

function deleteAllBenefits(e, kind) {
benefitList = $('.benefits-list.is_' + kind + ' .benefit');
var self = e.target;
if (benefitList.length) {
e.preventDefault();
// prompt to delete all these benefits
$("#destroyAllBenefits").modal();

focusTarget = self.parentElement;
$("#destroyAllBenefits").off('hidden.bs.modal').on('hidden.bs.modal', function() {
$('#has_' + kind + '_health_coverage_true').prop('checked', true).trigger('change');
restoreModalFocus(focusTarget.previousElementSibling);
});

$("#destroyAllBenefits .modal-cancel-button").click(function(e) {
$("#destroyAllBenefits").modal('hide');
$('#has_' + kind + '_health_coverage_true').prop('checked', true).trigger('change');
restoreModalFocus(focusTarget.previousElementSibling);
});

$("#destroyAllBenefits .modal-continue-button").click(function(e) {
Expand All @@ -73,6 +81,7 @@ function deleteAllBenefits(e, kind) {
});

$('select#insurance_kind_is_' + kind).prop('selectedIndex', 0);
restoreModalFocus(focusTarget);
});
}
}
Expand Down Expand Up @@ -294,7 +303,12 @@ document.addEventListener("turbolinks:load", function() {
var self = this;
$("#destroyBenefit").modal();

// Clean up previous event handlers
$("#destroyBenefit .modal-cancel-button").off('click');
$("#destroyBenefit").off('hidden.bs.modal').on('hidden.bs.modal', function() {
restoreModalFocus(self);
});

$("#destroyBenefit .modal-cancel-button").on('click', function() {
$("#destroyBenefit").modal('hide');
});
Expand All @@ -310,18 +324,22 @@ document.addEventListener("turbolinks:load", function() {
url: url,
success: function() {
var benefitList = benefit.parents('.benefits-list')[0];
var kind = $(self).data('kind')
var kind = $(self).data('kind');
var fallbackElement = null;

$(benefit).remove();

if (benefitList.querySelectorAll('.benefit').length == 0) {
document.getElementById('new-benefit-form-' + kind).classList.remove('hidden');
fallbackElement = document.getElementById('new-benefit-form-' + kind);
$('select#insurance_kind_' + kind).prop('selectedIndex', 0);
document.getElementById('add_new_benefit_kind_' + kind).classList.add('hidden');
} else {
document.getElementById('add_new_benefit_kind_' + kind).classList.remove('hidden');
fallbackElement = document.getElementById('add_new_benefit_kind_' + kind);
}
stopEditing()

fallbackElement.classList.remove('hidden');
stopEditing();
restoreModalFocus(self, { fallbackElement: fallbackElement });
}
});
});
Expand Down Expand Up @@ -349,14 +367,28 @@ document.addEventListener("turbolinks:load", function() {
return 'You have an unsaved benefit, are you sure you want to proceed?';
});

$(document).on('click', 'a[href]:not(.disabled):not(.benefit-support-modal):not([target="_blank"])', function(e) {
// Use direct binding like income.js instead of event delegation
$('a[href]:not(.disabled):not(.benefit-support-modal):not([target="_blank"])').off('click.unsavedBenefits');
$('a[href]:not(.disabled):not(.benefit-support-modal):not([target="_blank"])').on('click.unsavedBenefits', function(e) {
if (currentlyEditing()) {
e.preventDefault();
var self = this;

$('#unsavedBenefitChangesWarning').modal('show');
$('.btn.btn-danger, #leave').click(function() {
window.location.href = $(self).attr('href');

$('#unsavedBenefitChangesWarning').off('hidden.bs.modal').on('hidden.bs.modal', function() {
restoreModalFocus(self);
});

$('.btn.btn-danger, #leave').on('click.unsavedBenefits', function() {
// these two lines are necessary to prevent the modal from showing again
$('.interaction-click-control-continue').removeClass('disabled');
$('#nav-buttons a').removeClass('disabled');

$('#unsavedBenefitChangesWarning').off('hidden.bs.modal.unsavedBenefits');

// re-triggering the click as navigating based on the href got flagged in security check
self.click();
});

return false;
Expand All @@ -381,7 +413,6 @@ document.addEventListener("turbolinks:load", function() {
} else {
// prompt to delete all these benefits
e.preventDefault();
// prompt to delete all these dedcutions
$("#destroyAllBenefits").modal();

$("#destroyAllBenefits .modal-cancel-button").click(function(e) {
Expand Down Expand Up @@ -438,6 +469,10 @@ document.addEventListener("turbolinks:load", function() {
e.preventDefault();
$("#destroyBenefit").modal();

$("#destroyBenefit").off('hidden.bs.modal').on('hidden.bs.modal', function() {
restoreModalFocus(self);
});

$("#destroyBenefit .modal-cancel-button").click(function(e) {
$("#destroyBenefit").modal('hide');
});
Expand Down
34 changes: 32 additions & 2 deletions components/financial_assistance/app/assets/javascripts/financial_assistance/deduction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,17 +106,29 @@ $(document).on('turbolinks:load', function () {
})
});

$(document).on('click', 'a[href]:not(.disabled)', function(e) {
$('a[href]:not(.disabled)').off('click');
$('a[href]:not(.disabled)').on('click', function (e) {
if (currentlyEditing()) {
e.preventDefault();
var self = this;

$('#unsavedDeductionChangesWarning').modal('show');

$('button#leave').off('click.unsavedDeduction');
$('#unsavedDeductionChangesWarning').off('hidden.bs.modal.unsavedDeduction');

// restore focus to original link
$('#unsavedDeductionChangesWarning').on('hidden.bs.modal.unsavedDeduction', function() {
restoreModalFocus(self);
});

$('button#leave').on('click', function() {
// these two lines are necessary to prevent the modal from showing again
$('.interaction-click-control-continue').removeClass('disabled');
$('#nav-buttons a').removeClass('disabled');

$('#unsavedDeductionChangesWarning').off('hidden.bs.modal.unsavedDeduction');

// retriggering the click as navigating based on the href got flagged in security check
self.click();
});
Expand Down Expand Up @@ -161,15 +173,23 @@ $(document).on('turbolinks:load', function () {
var deduction_kind_name = $(this).val().replace(/_/g, ' ');
deduction_kind_name = deduction_kind_name.charAt(0).toUpperCase() + deduction_kind_name.slice(1);
$('#deduction_kind_modal').text(deduction_kind_name);

$("#destroyAllDeductions").off('hidden.bs.modal').on('hidden.bs.modal', function() {
restoreModalFocus(self);
});

$("#destroyAllDeductions .modal-cancel-button").off('click');
$("#destroyAllDeductions .modal-cancel-button").click(function(e) {
$("#destroyAllDeductions").modal('hide');
restoreModalFocus(self);
});

$("#destroyAllDeductions .modal-continue-button").click(function(e) {
$("#destroyAllDeductions").modal('hide');
stopEditingDeduction();

deleteDeductions($(self).parents('.deduction-kind'));
restoreModalFocus(self);
});
}
});
Expand Down Expand Up @@ -205,24 +225,31 @@ $(document).on('turbolinks:load', function () {
e.preventDefault();
$("#destroyDeduction").modal();

$("#destroyDeduction").off('hidden.bs.modal').on('hidden.bs.modal', function() {
restoreModalFocus(self);
});

$("#destroyDeduction .modal-cancel-button").off('click');
$("#destroyDeduction .modal-cancel-button").on('click', function(e) {
$("#destroyDeduction").modal('hide');
restoreModalFocus(self);
});

$("#destroyDeduction .modal-continue-button").off('click');
$("#destroyDeduction .modal-continue-button").on('click', function(e) {
$("#destroyDeduction").modal('hide');

var focusTarget = self.closest('.deduction-kind').querySelector('button.add_new_deduction_kind');
var url = $(self).parents('.deduction').attr('id').replace('deduction_', 'deductions/');
$.ajax({
type: 'DELETE',
url: url,
success: function() {
if ($(self).parents('.deductions-list').find('.deduction').length == 1) { // reset kind if this is the last deduction for the kind
resetDeductionKind(self);
focusTarget = self.closest('.deduction-kind').querySelector('input[type="checkbox"]');
}
$(self).parents('.deduction').remove();
restoreModalFocus(focusTarget);
}
})
});
Expand All @@ -231,6 +258,7 @@ $(document).on('turbolinks:load', function () {
/* DELETING all Deductions on selcting 'no' on Driver Question */
$('#has_deductions_false').on('change', function(e) {
self = this;
focusTarget = this.parentElement;
//$('#DestroyExistingJobIncomesWarning').modal('show');
if ($('.deductions-list .deduction').length) {
e.preventDefault();
Expand All @@ -240,6 +268,7 @@ $(document).on('turbolinks:load', function () {
$("#destroyAllDeductions .modal-cancel-button").click(function(e) {
$("#destroyAllDeductions").modal('hide');
$('#has_deductions_true').prop('checked', true).trigger('change');
restoreModalFocus(focusTarget);
});

$("#destroyAllDeductions .modal-continue-button").click(function(e) {
Expand All @@ -248,6 +277,7 @@ $(document).on('turbolinks:load', function () {
$(".deduction-kinds > .deduction-kind").each(function(_, kind) {
deleteDeductions(kind);
});
restoreModalFocus(focusTarget);
});
}
});
Expand Down
Loading
Loading