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

This commit is contained in:
Joffrey JAFFEUX 2022-08-13 14:21:58 +02:00 committed by GitHub
parent 5e521b6c0d
commit 3dac4fe075
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 62 deletions

View File

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

View File

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

View File

@ -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" });