From 3dac4fe075d3301c142fd4e5022f2a8cb4e56b50 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Sat, 13 Aug 2022 14:21:58 +0200 Subject: [PATCH] A11Y: ensures featured topic btn is focused when modal closes (#17898) --- .../app/controllers/preferences/profile.js | 5 +- .../tests/acceptance/preferences-test.js | 57 ---------------- .../user-preferences-profile-test.js | 68 +++++++++++++++++-- 3 files changed, 68 insertions(+), 62 deletions(-) diff --git a/app/assets/javascripts/discourse/app/controllers/preferences/profile.js b/app/assets/javascripts/discourse/app/controllers/preferences/profile.js index 2470c060f6c..a3ea290db20 100644 --- a/app/assets/javascripts/discourse/app/controllers/preferences/profile.js +++ b/app/assets/javascripts/discourse/app/controllers/preferences/profile.js @@ -69,10 +69,13 @@ export default Controller.extend({ actions: { showFeaturedTopicModal() { - showModal("feature-topic-on-profile", { + const modal = showModal("feature-topic-on-profile", { model: this.model, title: "user.feature_topic_on_profile.title", }); + modal.set("onClose", () => { + document.querySelector(".feature-topic-on-profile-btn")?.focus(); + }); }, clearFeaturedTopicFromProfile() { diff --git a/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js b/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js index e8bc847fec9..1c0a2fbfeed 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js @@ -474,63 +474,6 @@ acceptance("User Preferences when badges are disabled", function (needs) { }); }); -acceptance( - "User can select a topic to feature on profile if site setting in enabled", - function (needs) { - needs.user(); - needs.settings({ allow_featured_topic_on_user_profiles: true }); - needs.pretender((server, helper) => { - server.put("/u/eviltrout/feature-topic", () => { - return helper.response({ - success: true, - }); - }); - }); - - test("setting featured topic on profile", async function (assert) { - await visit("/u/eviltrout/preferences/profile"); - - assert.ok( - !exists(".featured-topic-link"), - "no featured topic link to present" - ); - assert.ok( - !exists(".clear-feature-topic-on-profile-btn"), - "clear button not present" - ); - - const selectTopicBtn = query( - ".feature-topic-on-profile-btn:nth-of-type(1)" - ); - assert.ok(exists(selectTopicBtn), "feature topic button is present"); - - await click(selectTopicBtn); - - assert.ok( - exists(".feature-topic-on-profile"), - "topic picker modal is open" - ); - - const topicRadioBtn = query( - 'input[name="choose_topic_id"]:nth-of-type(1)' - ); - assert.ok(exists(topicRadioBtn), "Topic options are prefilled"); - await click(topicRadioBtn); - - await click(".save-featured-topic-on-profile"); - - assert.ok( - exists(".featured-topic-link"), - "link to featured topic is present" - ); - assert.ok( - exists(".clear-feature-topic-on-profile-btn"), - "clear button is present" - ); - }); - } -); - acceptance("Custom User Fields", function (needs) { needs.user(); needs.site({ diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-preferences-profile-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-preferences-profile-test.js index 3abd43494c5..1bf8cfa1f4e 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-preferences-profile-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-preferences-profile-test.js @@ -1,9 +1,69 @@ -import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers"; -import { visit } from "@ember/test-helpers"; +import { + acceptance, + exists, + query, +} from "discourse/tests/helpers/qunit-helpers"; +import { click, visit } from "@ember/test-helpers"; import { test } from "qunit"; +acceptance("User - Preferences - Profile - Featured topic", function (needs) { + needs.user(); + + needs.settings({ allow_featured_topic_on_user_profiles: true }); + + needs.pretender((server, helper) => { + server.put("/u/eviltrout/feature-topic", () => + helper.response({ success: true }) + ); + }); + + test("setting featured topic on profile", async function (assert) { + await visit("/u/eviltrout/preferences/profile"); + + assert.ok( + !exists(".featured-topic-link"), + "no featured topic link to present" + ); + assert.ok( + !exists(".clear-feature-topic-on-profile-btn"), + "clear button not present" + ); + + await click(".feature-topic-on-profile-btn"); + + assert.ok( + exists(".feature-topic-on-profile"), + "topic picker modal is open" + ); + + await click(query('input[name="choose_topic_id"]')); + await click(".save-featured-topic-on-profile"); + + assert.ok( + exists(".featured-topic-link"), + "link to featured topic is present" + ); + assert.ok( + exists(".clear-feature-topic-on-profile-btn"), + "clear button is present" + ); + }); + + test("focused item after closing feature topic modal", async function (assert) { + await visit("/u/eviltrout/preferences/profile"); + await click(".feature-topic-on-profile-btn"); + await click(".modal-close"); + + assert.equal( + document.activeElement, + query(".feature-topic-on-profile-btn"), + "it keeps focus on the feature topic button" + ); + }); +}); + acceptance( - "User profile preferences without default calendar set", + "User - Preferences - Profile - No default calendar set", function (needs) { needs.user({ default_calendar: "none_selected" }); @@ -19,7 +79,7 @@ acceptance( ); acceptance( - "User profile preferences with default calendar set", + "User - Preferences - Profile - Default calendar set", function (needs) { needs.user({ default_calendar: "google" });