From bc61629d0f142a0e308a185430bcde0f5cadd016 Mon Sep 17 00:00:00 2001 From: Kris Date: Mon, 21 Nov 2022 20:24:39 -0500 Subject: [PATCH] A11Y: improved titles for chat in the sidebar (#19134) --- .../discourse/initializers/chat-sidebar.js | 12 ++++++---- plugins/chat/spec/system/navigation_spec.rb | 8 +++---- .../acceptance/core-sidebar-test.js | 24 +++++++++++++++++-- 3 files changed, 34 insertions(+), 10 deletions(-) diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js index 470e9212ea..1081ee1355 100644 --- a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js +++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js @@ -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) : ""; diff --git a/plugins/chat/spec/system/navigation_spec.rb b/plugins/chat/spec/system/navigation_spec.rb index 82a0f6ee45..e487ecb1f8 100644 --- a/plugins/chat/spec/system/navigation_spec.rb +++ b/plugins/chat/spec/system/navigation_spec.rb @@ -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( diff --git a/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js b/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js index 4cf7fa9726..87ffc59ffd 100644 --- a/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js +++ b/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js @@ -112,6 +112,7 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) { { id: 3, title: "random", + description: "The channel for random 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 <script>evil</script> 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, "<script>evil</script>"); + assert.strictEqual( + evilChannel.title, + "<script>evil</script> 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, "@<script>sam</script>"); + assert.strictEqual( + evilChannel.title, + "Chat with @<script>sam</script>" + ); assert.ok( evilChannel.className.includes(