A11Y: ensures featured topic btn is focused when modal closes (#17898)

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() {

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({

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 {
-import { visit } from "@ember/test-helpers";
+  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" });