A11Y: attempt to refocus modal trigger on modal close (#27972)

This commit is contained in:
Kris 2024-07-18 11:55:28 -04:00 committed by GitHub
parent 445951e854
commit 1bba54c3da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 0 deletions

View File

@ -26,6 +26,8 @@ export default class ModalService extends Service {
@tracked containerElement;
triggerElement = null;
@action
setContainerElement(element) {
this.containerElement = element;
@ -69,6 +71,7 @@ export default class ModalService extends Service {
this.opts = opts ??= {};
this.activeModal = { component: modal, opts, resolveShowPromise };
this.triggerElement = document.activeElement;
const unsupportedOpts = Object.keys(opts).filter((key) =>
LEGACY_OPTS.has(key)
@ -89,5 +92,9 @@ export default class ModalService extends Service {
this.activeModal?.resolveShowPromise?.(data);
this.activeModal = null;
this.opts = {};
if (this.triggerElement) {
this.triggerElement.focus();
this.triggerElement = null;
}
}
}

View File

@ -174,6 +174,19 @@ describe "Custom sidebar sections", type: :system do
expect(is_focused).to be true
end
it "accessibility - when customization modal is closed, trigger is refocused" do
sign_in user
visit("/latest")
sidebar.click_add_section_button
find(".modal-close").click
is_focused = page.evaluate_script("document.activeElement.classList.contains('add-section')")
expect(is_focused).to be true
end
it "allows the user to edit custom section" do
sidebar_section = Fabricate(:sidebar_section, title: "My section", user: user)
sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags")