A11Y: attempt to refocus modal trigger on modal close (#27972)
This commit is contained in:
parent
445951e854
commit
1bba54c3da
|
@ -26,6 +26,8 @@ export default class ModalService extends Service {
|
||||||
|
|
||||||
@tracked containerElement;
|
@tracked containerElement;
|
||||||
|
|
||||||
|
triggerElement = null;
|
||||||
|
|
||||||
@action
|
@action
|
||||||
setContainerElement(element) {
|
setContainerElement(element) {
|
||||||
this.containerElement = element;
|
this.containerElement = element;
|
||||||
|
@ -69,6 +71,7 @@ export default class ModalService extends Service {
|
||||||
|
|
||||||
this.opts = opts ??= {};
|
this.opts = opts ??= {};
|
||||||
this.activeModal = { component: modal, opts, resolveShowPromise };
|
this.activeModal = { component: modal, opts, resolveShowPromise };
|
||||||
|
this.triggerElement = document.activeElement;
|
||||||
|
|
||||||
const unsupportedOpts = Object.keys(opts).filter((key) =>
|
const unsupportedOpts = Object.keys(opts).filter((key) =>
|
||||||
LEGACY_OPTS.has(key)
|
LEGACY_OPTS.has(key)
|
||||||
|
@ -89,5 +92,9 @@ export default class ModalService extends Service {
|
||||||
this.activeModal?.resolveShowPromise?.(data);
|
this.activeModal?.resolveShowPromise?.(data);
|
||||||
this.activeModal = null;
|
this.activeModal = null;
|
||||||
this.opts = {};
|
this.opts = {};
|
||||||
|
if (this.triggerElement) {
|
||||||
|
this.triggerElement.focus();
|
||||||
|
this.triggerElement = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -174,6 +174,19 @@ describe "Custom sidebar sections", type: :system do
|
||||||
expect(is_focused).to be true
|
expect(is_focused).to be true
|
||||||
end
|
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
|
it "allows the user to edit custom section" do
|
||||||
sidebar_section = Fabricate(:sidebar_section, title: "My section", user: user)
|
sidebar_section = Fabricate(:sidebar_section, title: "My section", user: user)
|
||||||
sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags")
|
sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags")
|
||||||
|
|
Loading…
Reference in New Issue