diff --git a/app/assets/javascripts/discourse/app/services/modal.js b/app/assets/javascripts/discourse/app/services/modal.js index c4619b42621..a90a015afd6 100644 --- a/app/assets/javascripts/discourse/app/services/modal.js +++ b/app/assets/javascripts/discourse/app/services/modal.js @@ -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; + } } } diff --git a/spec/system/custom_sidebar_sections_spec.rb b/spec/system/custom_sidebar_sections_spec.rb index e7a519e0cb4..b6eb5416451 100644 --- a/spec/system/custom_sidebar_sections_spec.rb +++ b/spec/system/custom_sidebar_sections_spec.rb @@ -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")