A11Y: improved titles for chat in the sidebar (#19134)

This commit is contained in:
Kris 2022-11-21 20:24:39 -05:00 committed by GitHub
parent d3366a9092
commit bc61629d0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 10 deletions

View File

@ -88,7 +88,7 @@ export default {
}
get text() {
return htmlSafe(emojiUnescape(this.title));
return htmlSafe(emojiUnescape(this.channel.escapedTitle));
}
get prefixType() {
@ -104,7 +104,9 @@ export default {
}
get title() {
return this.channel.escapedTitle;
return this.channel.escapedDescription
? htmlSafe(this.channel.escapedDescription)
: `${this.channel.escapedTitle} ${I18n.t("chat.title")}`;
}
get prefixBadge() {
@ -276,7 +278,9 @@ export default {
}
get title() {
return this.channel.escapedTitle;
return I18n.t("chat.placeholder_others", {
messageRecipient: this.channel.escapedTitle,
});
}
get oneOnOneMessage() {
@ -284,7 +288,7 @@ export default {
}
get text() {
const username = this.title.replaceAll("@", "");
const username = this.channel.escapedTitle.replaceAll("@", "");
if (this.oneOnOneMessage) {
const status = this.channel.chatable.users[0].get("status");
const statusHtml = status ? this._userStatusHtml(status) : "";

View File

@ -130,7 +130,7 @@ RSpec.describe "Navigation", type: :system, js: true do
visit("/t/-/#{topic.id}")
chat_page.open_from_header
chat_drawer_page.close
find("a[title='#{category_channel.title}']").click
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
expect(page).to have_css(".chat-message-container[data-id='#{message.id}']")
end
@ -142,7 +142,7 @@ RSpec.describe "Navigation", type: :system, js: true do
chat_page.open_from_header
chat_drawer_page.maximize
visit("/")
find("a[title='#{category_channel.title}']").click
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
expect(page).to have_current_path(
chat.channel_path(category_channel.id, category_channel.slug),
@ -261,7 +261,7 @@ RSpec.describe "Navigation", type: :system, js: true do
it "activates the channel in the sidebar" do
visit("/")
chat_page.open_from_header
find("a[title='#{category_channel.title}']").click
find("a[class*='#{category_channel.slug}']").click
expect(page).to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
@ -273,7 +273,7 @@ RSpec.describe "Navigation", type: :system, js: true do
it "deactivates the channel in the sidebar" do
visit("/")
chat_page.open_from_header
find("a[title='#{category_channel.title}']").click
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
chat_drawer_page.close
expect(page).not_to have_css(

View File

@ -112,6 +112,7 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
{
id: 3,
title: "random",
description: "The channel for random <script>evil</script> things",
chatable_type: "Category",
chatable: { slug: "random" },
last_message_sent_at: "2021-11-08T21:26:05.710Z",
@ -421,6 +422,19 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
assert.strictEqual(currentURL(), "/");
});
test("Escaped channel description used as title when present", async function (assert) {
await visit("/");
const randomChannel = queryAll(
".sidebar-section-chat-channels .sidebar-section-link-wrapper .sidebar-section-link"
)[3];
assert.strictEqual(
randomChannel.title,
"The channel for random &lt;script&gt;evil&lt;/script&gt; things"
);
});
test("Escapes public channel titles", async function (assert) {
await visit("/");
@ -428,7 +442,10 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
".sidebar-section-chat-channels .sidebar-section-link-wrapper .sidebar-section-link"
);
assert.strictEqual(evilChannel.title, "&lt;script&gt;evil&lt;/script&gt;");
assert.strictEqual(
evilChannel.title,
"&lt;script&gt;evil&lt;/script&gt; chat"
);
assert.ok(
evilChannel.className.includes(
@ -451,7 +468,10 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
".sidebar-section-chat-dms .sidebar-section-link-wrapper .sidebar-section-link"
)[3];
assert.strictEqual(evilChannel.title, "@&lt;script&gt;sam&lt;/script&gt;");
assert.strictEqual(
evilChannel.title,
"Chat with @&lt;script&gt;sam&lt;/script&gt;"
);
assert.ok(
evilChannel.className.includes(