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

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) : "";

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(

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