From 2d46824a87f2104b307abd76dbb2ec2b0f2df4a0 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 23 Mar 2023 13:09:45 +0800
Subject: [PATCH] DEV: Switch to data attributes to represent sidebar section
 name (#20771)

Data attributes are less restrictive than the class attribute.
---
 .../app/components/sidebar/section.hbs        |   6 +-
 ...debar-anonymous-categories-section-test.js |   8 +-
 ...idebar-anonymous-community-section-test.js |  12 +-
 .../sidebar-anonymous-tags-section-test.js    |  14 +-
 .../acceptance/sidebar-plugin-api-test.js     |  38 +--
 .../sidebar-user-categories-section-test.js   |  70 +++--
 .../sidebar-user-community-section-test.js    | 274 ++++++++++++------
 .../sidebar-user-messages-section-test.js     | 112 ++++---
 .../sidebar-user-tags-section-test.js         |  63 ++--
 .../tests/acceptance/sidebar-user-test.js     |   4 +-
 .../user-preferences-sidebar-test.js          |  44 +--
 .../spec/system/list_channels/sidebar_spec.rb |  20 +-
 .../system/page_objects/sidebar/sidebar.rb    |  14 +-
 spec/system/custom_sidebar_sections_spec.rb   |  13 +-
 .../system/page_objects/components/sidebar.rb |   7 +-
 15 files changed, 455 insertions(+), 244 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
index a521e36004a..88e5a6df42b 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
@@ -1,9 +1,7 @@
 {{#if this.displaySection}}
   <div
-    class={{concat-class
-      (concat "sidebar-section-wrapper sidebar-section-" @sectionName)
-      @class
-    }}
+    class={{concat "sidebar-section-wrapper sidebar-section" @class}}
+    data-section-name={{@sectionName}}
   >
     <div class="sidebar-section-header-wrapper sidebar-row">
       <Sidebar::SectionHeader
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-categories-section-test.js
index 252a8e756b8..b5ddc8a6ec3 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-categories-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-categories-section-test.js
@@ -18,7 +18,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
     await visit("/");
 
     const categorySectionLinks = queryAll(
-      ".sidebar-section-categories .sidebar-section-link-wrapper"
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-link-wrapper"
     );
 
     const sidebarCategories = Site.current()
@@ -64,7 +64,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
     await visit("/");
 
     const categories = queryAll(
-      ".sidebar-section-categories .sidebar-section-link-wrapper"
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-link-wrapper"
     );
 
     const siteCategories = Site.current().categories;
@@ -109,7 +109,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
     await visit("/");
 
     const categories = queryAll(
-      ".sidebar-section-categories .sidebar-section-link-wrapper"
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-link-wrapper"
     );
 
     assert.strictEqual(categories.length, 4);
@@ -138,7 +138,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
 
     assert.notOk(
       exists(
-        `.sidebar-section-categories .sidebar-section-link-${firstCategory.slug}`
+        `.sidebar-section[data-section-name='categories'] .sidebar-section-link-${firstCategory.slug}`
       ),
       "category section link is not shown in sidebar after being marked as uncategorized"
     );
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-community-section-test.js
index 4532b21c39f..7127c88b27c 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-community-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-community-section-test.js
@@ -24,14 +24,14 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
 
     assert.strictEqual(
       query(
-        ".sidebar-section-community .sidebar-section-message"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-message"
       ).textContent.trim(),
       this.siteSettings.short_site_description,
       "displays the short site description under the community section"
     );
 
     const sectionLinks = queryAll(
-      ".sidebar-section-community .sidebar-section-link"
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link"
     );
 
     assert.strictEqual(
@@ -45,7 +45,7 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
     await visit("/");
 
     const sectionLinks = queryAll(
-      ".sidebar-section-community .sidebar-section-link"
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link"
     );
 
     assert.strictEqual(
@@ -79,7 +79,9 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
     await visit("/");
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-users"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
+      ),
       "users section link is not shown in sidebar"
     );
   });
@@ -88,7 +90,7 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     const sectionLinks = queryAll(
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-tags-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-tags-section-test.js
index 715f08aa5f5..68d42024dc0 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-tags-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-tags-section-test.js
@@ -22,7 +22,7 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
     await visit("/");
 
     const categories = queryAll(
-      ".sidebar-section-tags .sidebar-section-link-wrapper"
+      ".sidebar-section[data-section-name='tags'] .sidebar-section-link-wrapper"
     );
 
     assert.strictEqual(categories.length, 4);
@@ -43,7 +43,7 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
     await visit("/");
 
     const categories = queryAll(
-      ".sidebar-section-tags .sidebar-section-link-wrapper"
+      ".sidebar-section[data-section-name='tags'] .sidebar-section-link-wrapper"
     );
     assert.strictEqual(categories.length, 3);
     assert.strictEqual(categories[0].textContent.trim(), "random");
@@ -60,7 +60,10 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
 
     await visit("/");
 
-    assert.ok(!exists(".sidebar-section-tags"), "section is not visible");
+    assert.ok(
+      !exists(".sidebar-section[data-section-name='tags']"),
+      "section is not visible"
+    );
   });
 
   test("tag section is hidden when anonymous has no visible top tags and site has not default sidebar tags configured", async function (assert) {
@@ -73,6 +76,9 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
 
     await visit("/");
 
-    assert.ok(!exists(".sidebar-section-tags"), "section is not visible");
+    assert.ok(
+      !exists(".sidebar-section[data-section-name='tags']"),
+      "section is not visible"
+    );
   });
 });
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
index 0a2a2dead38..592b690db58 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
@@ -218,26 +218,26 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     assert.strictEqual(
       query(
-        ".sidebar-section-test-chat-channels .sidebar-section-header-text"
+        ".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-text"
       ).textContent.trim(),
       "chat channels text",
       "displays header with correct text"
     );
 
     await click(
-      ".sidebar-section-test-chat-channels .sidebar-section-header-dropdown summary"
+      ".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-dropdown summary"
     );
 
     assert.strictEqual(
       queryAll(
-        ".sidebar-section-test-chat-channels .sidebar-section-header-dropdown .select-kit-collection li"
+        ".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-dropdown .select-kit-collection li"
       ).length,
       2,
       "displays two actions"
     );
 
     const actions = queryAll(
-      ".sidebar-section-test-chat-channels .sidebar-section-header-dropdown .select-kit-collection li"
+      ".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-dropdown .select-kit-collection li"
     );
 
     assert.strictEqual(
@@ -253,7 +253,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
     );
 
     const links = queryAll(
-      ".sidebar-section-test-chat-channels .sidebar-section-link"
+      ".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-link"
     );
 
     assert.strictEqual(
@@ -402,7 +402,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     assert.strictEqual(
       query(
-        ".sidebar-section-test-chat-channels .sidebar-section-header-text"
+        ".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-text"
       ).textContent.trim(),
       "chat channels text",
       "displays header with correct text"
@@ -414,7 +414,9 @@ acceptance("Sidebar - Plugin API", function (needs) {
     );
 
     assert.ok(
-      !exists(".sidebar-section-test-chat-channels .sidebar-section-content a"),
+      !exists(
+        ".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-content a"
+      ),
       "displays no links"
     );
   });
@@ -433,11 +435,11 @@ acceptance("Sidebar - Plugin API", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     const myCustomTopSectionLink = query(
-      ".sidebar-section-community .sidebar-more-section-links-details-content-secondary .sidebar-section-link-my-custom-top"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content-secondary .sidebar-section-link-my-custom-top"
     );
 
     assert.ok(
@@ -499,7 +501,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
     await visit("/");
 
     const customLatestSectionLink = query(
-      ".sidebar-section-community .sidebar-section-link-latest"
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-latest"
     );
 
     assert.ok(
@@ -519,11 +521,11 @@ acceptance("Sidebar - Plugin API", function (needs) {
     );
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     const customUnreadSectionLink = query(
-      ".sidebar-section-community .sidebar-section-link-my-unreads"
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-unreads"
     );
 
     assert.ok(
@@ -543,7 +545,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
     );
 
     const customTopSectionLInk = query(
-      ".sidebar-section-community .sidebar-section-link-my-custom-top"
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-custom-top"
     );
 
     assert.ok(
@@ -552,7 +554,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
     );
 
     const openBugsSectionLink = query(
-      ".sidebar-section-community .sidebar-section-link-open-bugs"
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-open-bugs"
     );
 
     assert.ok(
@@ -567,14 +569,14 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     // close more links
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     await visit("/t/internationalization-localization/280");
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-my-favourite-topic.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-favourite-topic.active"
       ),
       "displays my favourite topic custom section link when current route matches the link's route"
     );
@@ -583,7 +585,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     assert.notOk(
       exists(
-        ".sidebar-section-community .sidebar-section-link-my-favourite-topic.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-favourite-topic.active"
       ),
       "does not display my favourite topic custom section link when current route does not match the link's route"
     );
@@ -629,7 +631,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
     await visit("/");
 
     assert.notOk(
-      exists(".sidebar-section-test-chat-channels"),
+      exists(".sidebar-section[data-section-name='test-chat-channels']"),
       "does not display the section"
     );
   });
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
index 53a55af11f8..5e33a388f17 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
@@ -43,7 +43,7 @@ acceptance(
 
       assert.strictEqual(
         count(
-          ".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
+          ".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
         ),
         1,
         "there should only be one section link under the section"
@@ -113,10 +113,14 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     setupUserSidebarCategories();
 
     await visit("/t/280");
-    await click(".sidebar-section-categories .sidebar-section-header");
+    await click(
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-header"
+    );
 
     assert.notOk(
-      exists(".sidebar-section-categories .sidebar-section-content"),
+      exists(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-content"
+      ),
       "hides the content of the section"
     );
   });
@@ -125,7 +129,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     setupUserSidebarCategories();
 
     await visit("/");
-    await click(".sidebar-section-categories .sidebar-section-header-button");
+    await click(
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-header-button"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -140,7 +146,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit("/");
 
     assert.notOk(
-      exists(".sidebar-section-categories"),
+      exists(".sidebar-section[data-section-name='categories']"),
       "categories section is not shown"
     );
   });
@@ -153,19 +159,19 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit("/");
 
     assert.ok(
-      exists(".sidebar-section-categories"),
+      exists(".sidebar-section[data-section-name='categories']"),
       "categories section is shown"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-categories .sidebar-section-link-configure-categories"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link-configure-categories"
       ),
       "section link to add categories to sidebar is displayed"
     );
 
     await click(
-      ".sidebar-section-categories .sidebar-section-link-configure-categories"
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-link-configure-categories"
     );
 
     assert.strictEqual(
@@ -237,7 +243,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit("/");
 
     const categorySectionLinks = queryAll(
-      ".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
     );
 
     const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@@ -300,7 +306,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit("/");
 
     const categorySectionLinks = queryAll(
-      ".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
     );
 
     const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@@ -363,7 +369,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit("/");
 
     const categorySectionLinks = queryAll(
-      ".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
     );
 
     const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@@ -391,7 +397,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
 
     assert.strictEqual(
       count(
-        ".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
       ),
       4,
       "there should only be 4 section link under the section"
@@ -421,7 +427,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -442,7 +450,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -486,7 +496,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -526,7 +538,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -574,7 +588,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -626,7 +642,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit(`/c/${category1.slug}/${category1.id}/l/new`);
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -645,7 +663,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit(`/c/${category1.slug}/${category1.id}/l/unread`);
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -664,7 +684,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit(`/c/${category1.slug}/${category1.id}/l/top`);
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -683,7 +705,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit(`/c/${category1.slug}/${category1.id}/none`);
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -702,7 +726,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     await visit(`/c/${category1.slug}/${category1.id}/all`);
 
     assert.strictEqual(
-      count(".sidebar-section-categories .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js
index 88deb17c4a4..53f929d9b7a 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js
@@ -47,14 +47,18 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
 
   test("clicking on section header button", async function (assert) {
     await visit("/");
-    await click(".sidebar-section-community .sidebar-section-header-button");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-header-button"
+    );
 
     assert.ok(exists("#reply-control"), "it opens the composer");
   });
 
   test("clicking on section header button while viewing a category", async function (assert) {
     await visit("/c/bug");
-    await click(".sidebar-section-community .sidebar-section-header-button");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-header-button"
+    );
 
     assert.ok(exists("#reply-control"), "it opens the composer");
 
@@ -69,27 +73,39 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/t/280");
 
     assert.ok(
-      exists(".sidebar-section-community .sidebar-section-content"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-content"
+      ),
       "shows content section"
     );
 
     assert.strictEqual(
-      query(".sidebar-section-community .sidebar-section-header").title,
+      query(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-header"
+      ).title,
       I18n.t("sidebar.toggle_section"),
       "caret has the right title"
     );
 
-    await click(".sidebar-section-community .sidebar-section-header");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-header"
+    );
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-content"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-content"
+      ),
       "hides the content of the section"
     );
 
-    await click(".sidebar-section-community .sidebar-section-header");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-header"
+    );
 
     assert.ok(
-      exists(".sidebar-section-community .sidebar-section-content"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-content"
+      ),
       "shows content section"
     );
   });
@@ -99,36 +115,36 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-more-section-links-details-content"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content"
       ),
       "additional section links are displayed"
     );
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.notOk(
       exists(
-        ".sidebar-section-community .sidebar-more-section-links-details-content"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content"
       ),
       "additional section links are hidden"
     );
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     await click("#main-outlet");
 
     assert.notOk(
       exists(
-        ".sidebar-section-community .sidebar-more-section-links-details-content"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content"
       ),
       "additional section links are hidden when clicking outside"
     );
@@ -136,7 +152,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
 
   test("clicking on everything link", async function (assert) {
     await visit("/t/280");
-    await click(".sidebar-section-community .sidebar-section-link-everything");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -145,14 +163,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-everything.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
       ),
       "the everything link is marked as active"
     );
@@ -164,7 +184,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     });
 
     await visit("/t/280");
-    await click(".sidebar-section-community .sidebar-section-link-everything");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
+    );
     assert.strictEqual(
       currentURL(),
       "/latest",
@@ -172,14 +194,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-everything.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
       ),
       "the everything link is marked as active"
     );
@@ -200,7 +224,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
       sidebar_list_destination: "unread_new",
     });
     await visit("/t/280");
-    await click(".sidebar-section-community .sidebar-section-link-everything");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -209,14 +235,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-everything.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
       ),
       "the everything link is marked as active"
     );
@@ -245,7 +273,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
       sidebar_list_destination: "unread_new",
     });
     await visit("/t/280");
-    await click(".sidebar-section-community .sidebar-section-link-everything");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -254,14 +284,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-everything.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
       ),
       "the everything link is marked as active"
     );
@@ -271,15 +303,19 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/t/280");
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-users"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
+      ),
       "users link is not displayed in sidebar when it is not the active route"
     );
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
-    await click(".sidebar-section-community .sidebar-section-link-users");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -288,19 +324,23 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
-      exists(".sidebar-section-community .sidebar-section-link-users.active"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-users.active"
+      ),
       "the users link is marked as active"
     );
 
     assert.strictEqual(
       query(
-        ".sidebar-section-community .sidebar-more-section-links-details-summary"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
       ).textContent.trim(),
       I18n.t("sidebar.more"),
       "displays the right count as users link is currently active"
@@ -309,7 +349,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/u");
 
     assert.ok(
-      exists(".sidebar-section-community .sidebar-section-link-users.active"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-users.active"
+      ),
       "users link is displayed in sidebar when it is the active route"
     );
   });
@@ -320,11 +362,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-users"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
+      ),
       "users section link is not displayed in sidebar"
     );
   });
@@ -333,10 +377,12 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
-    await click(".sidebar-section-community .sidebar-section-link-badges");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-badges"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -351,11 +397,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-badges"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-badges"
+      ),
       "badges section link is not shown in sidebar"
     );
   });
@@ -364,15 +412,19 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/t/280");
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-groups"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
+      ),
       "groups link is not displayed in sidebar when it is not the active route"
     );
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
-    await click(".sidebar-section-community .sidebar-section-link-groups");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -381,19 +433,23 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
-      exists(".sidebar-section-community .sidebar-section-link-groups.active"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-groups.active"
+      ),
       "the groups link is marked as active"
     );
 
     assert.strictEqual(
       query(
-        ".sidebar-section-community .sidebar-more-section-links-details-summary"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
       ).textContent.trim(),
       I18n.t("sidebar.more"),
       "displays the right count as groups link is currently active"
@@ -402,7 +458,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/g");
 
     assert.ok(
-      exists(".sidebar-section-community .sidebar-section-link-groups.active"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-groups.active"
+      ),
       "groups link is displayed in sidebar when it is the active route"
     );
   });
@@ -413,11 +471,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-groups"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
+      ),
       "groups section link is not shown in sidebar"
     );
   });
@@ -426,10 +486,12 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
-    await click(".sidebar-section-community .sidebar-section-link-about");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-about"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -438,7 +500,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.ok(
-      exists(".sidebar-section-community .sidebar-section-link-about.active"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-about.active"
+      ),
       "about section link link is displayed in the main section and marked as active"
     );
   });
@@ -447,10 +511,12 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
-    await click(".sidebar-section-community .sidebar-section-link-faq");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-faq"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -465,11 +531,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.strictEqual(
-      query(".sidebar-section-community .sidebar-section-link-faq").href,
+      query(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-faq"
+      ).href,
       "http://some.faq.url/",
       "href attribute is set to custom FAQ URL on the section link"
     );
@@ -477,7 +545,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
 
   test("navigating to admin from sidebar", async function (assert) {
     await visit("/");
-    await click(".sidebar-section-community .sidebar-section-link-admin");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-admin"
+    );
 
     assert.strictEqual(currentRouteName(), "admin.dashboard.general");
   });
@@ -488,13 +558,17 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-admin")
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-admin"
+      )
     );
   });
 
   test("clicking on my posts link", async function (assert) {
     await visit("/t/280");
-    await click(".sidebar-section-community .sidebar-section-link-my-posts");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -503,14 +577,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-my-posts.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
       ),
       "the my posts link is marked as active"
     );
@@ -519,7 +595,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
 
     assert.notOk(
       exists(
-        ".sidebar-section-community .sidebar-section-link-my-posts.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
       ),
       "the my posts link is not marked as active when user has no drafts and visiting the user activity drafts URL"
     );
@@ -532,7 +608,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
       draft_count: 1,
     });
 
-    await click(".sidebar-section-community .sidebar-section-link-my-posts");
+    await click(
+      ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -541,14 +619,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-my-posts.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
       ),
       "the my posts link is marked as active"
     );
@@ -557,7 +637,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-my-posts.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
       ),
       "the my posts link is marked as active"
     );
@@ -620,14 +700,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/top");
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-everything.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
       ),
       "the everything link is marked as active"
     );
@@ -637,14 +719,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/unread");
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-everything.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
       ),
       "the everything link is marked as active"
     );
@@ -654,14 +738,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/new");
 
     assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-section-link-everything.active"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
       ),
       "the everything link is marked as active"
     );
@@ -866,16 +952,20 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-review"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
+      ),
       "review link is not shown"
     );
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-review"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
+      ),
       "review link is not shown"
     );
   });
@@ -889,24 +979,28 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/reivew");
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-review.active"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-review.active"
+      ),
       "review link is shown as active when visiting the review route even if there are no pending reviewables"
     );
 
     await visit("/");
 
     assert.notOk(
-      exists(".sidebar-section-community .sidebar-section-link-review"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
+      ),
       "review link is not shown as part of the main section links"
     );
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-community .sidebar-more-section-links-details-content .sidebar-section-link-review"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content .sidebar-section-link-review"
       ),
       "review link is displayed in the more drawer"
     );
@@ -916,25 +1010,27 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     });
 
     assert.ok(
-      exists(".sidebar-section-community .sidebar-section-link-review"),
+      exists(
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
+      ),
       "review link is shown as part of the main section links"
     );
 
     assert.strictEqual(
       query(
-        ".sidebar-section-community .sidebar-section-link-review .sidebar-section-link-content-badge"
+        ".sidebar-section[data-section-name='community'] .sidebar-section-link-review .sidebar-section-link-content-badge"
       ).textContent.trim(),
       "34 pending",
       "displays the pending reviewable count"
     );
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.notOk(
       exists(
-        ".sidebar-section-community .sidebar-more-section-links-details-content .sidebar-section-link-review"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content .sidebar-section-link-review"
       ),
       "review link is not displayed in the more drawer"
     );
@@ -953,7 +1049,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     assert.strictEqual(
@@ -1009,7 +1105,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     await visit("/");
 
     await click(
-      ".sidebar-section-community .sidebar-more-section-links-details-summary"
+      ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
     );
 
     await click(".sidebar-section-link-user-summary");
@@ -1087,7 +1183,7 @@ acceptance(
 
       assert.strictEqual(
         query(
-          ".sidebar-section-community .sidebar-section-link-everything .sidebar-section-link-content-badge"
+          ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything .sidebar-section-link-content-badge"
         ).textContent.trim(),
         "2",
         "count is 2 because there's 1 unread topic and 1 new topic"
@@ -1122,7 +1218,7 @@ acceptance(
 
       assert.true(
         query(
-          ".sidebar-section-community .sidebar-section-link-everything"
+          ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
         ).href.endsWith("/new"),
         "links to /new because there are 1 new and 1 unread topics"
       );
@@ -1138,7 +1234,7 @@ acceptance(
 
       assert.true(
         query(
-          ".sidebar-section-community .sidebar-section-link-everything"
+          ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
         ).href.endsWith("/new"),
         "links to /new because there is 1 unread topic"
       );
@@ -1154,7 +1250,7 @@ acceptance(
 
       assert.true(
         query(
-          ".sidebar-section-community .sidebar-section-link-everything"
+          ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
         ).href.endsWith("/latest"),
         "links to /latest because there are no unread or new topics"
       );
@@ -1170,7 +1266,7 @@ acceptance(
 
       assert.true(
         query(
-          ".sidebar-section-community .sidebar-section-link-everything"
+          ".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
         ).href.endsWith("/new"),
         "links to /new because there is 1 new topic"
       );
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-messages-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-messages-section-test.js
index f9629d6c78c..734ceed687b 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-messages-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-messages-section-test.js
@@ -29,7 +29,7 @@ acceptance(
       await visit("/");
 
       assert.ok(
-        !exists(".sidebar-section-messages"),
+        !exists(".sidebar-section[data-section-name='messages']"),
         "does not display messages section in sidebar"
       );
     });
@@ -74,7 +74,9 @@ acceptance(
 
     test("clicking on section header button", async function (assert) {
       await visit("/");
-      await click(".sidebar-section-messages .sidebar-section-header-button");
+      await click(
+        ".sidebar-section[data-section-name='messages'] .sidebar-section-header-button"
+      );
 
       assert.ok(
         exists("#reply-control.private-message"),
@@ -84,10 +86,14 @@ acceptance(
 
     test("clicking on section header link", async function (assert) {
       await visit("/");
-      await click(".sidebar-section-messages .sidebar-section-header");
+      await click(
+        ".sidebar-section[data-section-name='messages'] .sidebar-section-header"
+      );
 
       assert.notOk(
-        exists(".sidebar-section-messages .sidebar-section-content"),
+        exists(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-content"
+        ),
         "hides the content of the section"
       );
     });
@@ -97,30 +103,34 @@ acceptance(
 
       assert.ok(
         exists(
-          ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
         ),
         "displays the personal message inbox link"
       );
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link"
+        ),
         1,
         "only displays the personal message inbox link"
       );
 
       await click(
-        ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox"
+        ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
       );
 
       assert.ok(
         exists(
-          ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox.active"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox.active"
         ),
         "personal message inbox link is marked as active"
       );
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link"
+        ),
         5,
         "expands and displays the links for personal messages"
       );
@@ -131,11 +141,11 @@ acceptance(
         await visit("/");
 
         await click(
-          ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
         );
 
         await click(
-          `.sidebar-section-messages .sidebar-section-link-personal-messages-${type}`
+          `.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type}`
         );
 
         assert.strictEqual(
@@ -145,28 +155,30 @@ acceptance(
         );
 
         assert.strictEqual(
-          count(".sidebar-section-messages .sidebar-section-link.active"),
+          count(
+            ".sidebar-section[data-section-name='messages'] .sidebar-section-link.active"
+          ),
           2,
           "only two links are marked as active in the sidebar"
         );
 
         assert.ok(
           exists(
-            ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox.active"
+            ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox.active"
           ),
           "personal message inbox link is marked as active"
         );
 
         assert.ok(
           exists(
-            `.sidebar-section-messages .sidebar-section-link-personal-messages-${type}.active`
+            `.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type}.active`
           ),
           `personal message ${type} link is marked as active`
         );
 
         assert.notOk(
           exists(
-            `.sidebar-section-messages .sidebar-section-link-personal-messages-${type} .sidebar-section-link-prefix`
+            `.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type} .sidebar-section-link-prefix`
           ),
           `prefix is not displayed for ${type} personal message section link`
         );
@@ -194,7 +206,7 @@ acceptance(
       await visit("/");
 
       const groupSectionLinks = queryAll(
-        ".sidebar-section-messages .sidebar-section-link"
+        ".sidebar-section[data-section-name='messages'] .sidebar-section-link"
       );
 
       assert.deepEqual(
@@ -208,29 +220,37 @@ acceptance(
       await visit("/u/eviltrout/messages/group/GrOuP1");
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link"
+        ),
         6,
         "expands and displays the links for group1 group messages"
       );
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link.group1"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link.group1"
+        ),
         4,
         "expands the links for group1 group messages"
       );
 
       await click(
-        ".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group3"
+        ".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group3"
       );
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link.group1"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link.group1"
+        ),
         1,
         "collapses the links for group1 group messages"
       );
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link.group3"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link.group3"
+        ),
         4,
         "expands the links for group3 group messages"
       );
@@ -258,11 +278,11 @@ acceptance(
         await visit("/");
 
         await click(
-          `.sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1`
+          `.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1`
         );
 
         await click(
-          `.sidebar-section-messages .sidebar-section-link-group-messages-${type}.group1`
+          `.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-${type}.group1`
         );
 
         assert.strictEqual(
@@ -272,21 +292,23 @@ acceptance(
         );
 
         assert.strictEqual(
-          count(".sidebar-section-messages .sidebar-section-link.active"),
+          count(
+            ".sidebar-section[data-section-name='messages'] .sidebar-section-link.active"
+          ),
           2,
           "only two links are marked as active in the sidebar"
         );
 
         assert.ok(
           exists(
-            ".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1.active"
+            ".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1.active"
           ),
           "group1 group message inbox link is marked as active"
         );
 
         assert.ok(
           exists(
-            `.sidebar-section-messages .sidebar-section-link-group-messages-${type}.group1.active`
+            `.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-${type}.group1.active`
           ),
           `group1 group message ${type} link is marked as active`
         );
@@ -306,21 +328,25 @@ acceptance(
       await visit("/t/130");
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link"
+        ),
         5,
         "5 section links are displayed"
       );
 
       assert.strictEqual(
         count(
-          ".sidebar-section-messages .sidebar-section-link.personal-messages"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link.personal-messages"
         ),
         1,
         "personal messages inbox filter links are not shown"
       );
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link.foo_group"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link.foo_group"
+        ),
         4,
         "foo_group messages inbox filter links are shown"
       );
@@ -339,21 +365,25 @@ acceptance(
       await visit("/t/34");
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link"
+        ),
         6,
         "6 section links are displayed"
       );
 
       assert.strictEqual(
         count(
-          ".sidebar-section-messages .sidebar-section-link.personal-messages"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link.personal-messages"
         ),
         5,
         "personal messages inbox filter links are shown"
       );
 
       assert.strictEqual(
-        count(".sidebar-section-messages .sidebar-section-link.foo_group"),
+        count(
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link.foo_group"
+        ),
         1,
         "foo_group messages inbox filter links are not shown"
       );
@@ -377,7 +407,7 @@ acceptance(
       );
 
       await click(
-        ".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1"
+        ".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1"
       );
 
       await publishToMessageBus(pmTopicTrackingState.groupChannel(1), {
@@ -404,7 +434,7 @@ acceptance(
 
       assert.strictEqual(
         query(
-          ".sidebar-section-messages .sidebar-section-link-group-messages-unread.group1"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-unread.group1"
         ).textContent.trim(),
         I18n.t("sidebar.sections.messages.links.unread_with_count", {
           count: 1,
@@ -414,7 +444,7 @@ acceptance(
 
       assert.strictEqual(
         query(
-          ".sidebar-section-messages .sidebar-section-link-group-messages-new.group1"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-new.group1"
         ).textContent.trim(),
         I18n.t("sidebar.sections.messages.links.new_with_count", {
           count: 1,
@@ -435,7 +465,7 @@ acceptance(
 
       assert.strictEqual(
         query(
-          ".sidebar-section-messages .sidebar-section-link-group-messages-new.group1"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-new.group1"
         ).textContent.trim(),
         I18n.t("sidebar.sections.messages.links.new"),
         "removes count for group1 new inbox filter link"
@@ -450,7 +480,7 @@ acceptance(
       );
 
       await click(
-        ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox"
+        ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
       );
 
       await publishToMessageBus(pmTopicTrackingState.userChannel(), {
@@ -466,7 +496,7 @@ acceptance(
 
       assert.strictEqual(
         query(
-          ".sidebar-section-messages .sidebar-section-link-personal-messages-unread"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-unread"
         ).textContent.trim(),
         I18n.t("sidebar.sections.messages.links.unread_with_count", {
           count: 1,
@@ -487,7 +517,7 @@ acceptance(
 
       assert.strictEqual(
         query(
-          ".sidebar-section-messages .sidebar-section-link-personal-messages-unread"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-unread"
         ).textContent.trim(),
         I18n.t("sidebar.sections.messages.links.unread_with_count", {
           count: 2,
@@ -508,7 +538,7 @@ acceptance(
 
       assert.strictEqual(
         query(
-          ".sidebar-section-messages .sidebar-section-link-personal-messages-new"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-new"
         ).textContent.trim(),
         I18n.t("sidebar.sections.messages.links.new_with_count", {
           count: 1,
@@ -529,7 +559,7 @@ acceptance(
 
       assert.strictEqual(
         query(
-          ".sidebar-section-messages .sidebar-section-link-personal-messages-new"
+          ".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-new"
         ).textContent.trim(),
         I18n.t("sidebar.sections.messages.links.new"),
         "removes the count from the new inbox filter link"
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js
index 88cec9d74f0..bd31fb664c7 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js
@@ -28,7 +28,7 @@ acceptance(
       await visit("/");
 
       assert.ok(
-        !exists(".sidebar-section-tags"),
+        !exists(".sidebar-section[data-section-name='tags']"),
         "does not display the tags section"
       );
     });
@@ -97,14 +97,16 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     await visit("/");
 
     assert.notOk(
-      exists(".sidebar-section-tags"),
+      exists(".sidebar-section[data-section-name='tags']"),
       "tags section is not displayed"
     );
   });
 
   test("clicking on section header button", async function (assert) {
     await visit("/");
-    await click(".sidebar-section-tags .sidebar-section-header-button");
+    await click(
+      ".sidebar-section[data-section-name='tags'] .sidebar-section-header-button"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -121,7 +123,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     await visit("/");
 
     assert.notOk(
-      exists(".sidebar-section-tags"),
+      exists(".sidebar-section[data-section-name='tags']"),
       "tags section is not displayed"
     );
   });
@@ -135,14 +137,21 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
 
     await visit("/");
 
-    assert.ok(exists(".sidebar-section-tags"), "tags section is shown");
+    assert.ok(
+      exists(".sidebar-section[data-section-name='tags']"),
+      "tags section is shown"
+    );
 
     assert.ok(
-      exists(".sidebar-section-tags .sidebar-section-link-configure-tags"),
+      exists(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link-configure-tags"
+      ),
       "section link to add tags to sidebar is displayed"
     );
 
-    await click(".sidebar-section-tags .sidebar-section-link-configure-tags");
+    await click(
+      ".sidebar-section[data-section-name='tags'] .sidebar-section-link-configure-tags"
+    );
 
     assert.strictEqual(
       currentURL(),
@@ -155,7 +164,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     await visit("/");
 
     const tagSectionLinks = queryAll(
-      ".sidebar-section-tags .sidebar-section-link:not(.sidebar-section-link-all-tags)"
+      ".sidebar-section[data-section-name='tags'] .sidebar-section-link:not(.sidebar-section-link-all-tags)"
     );
 
     const tagNames = [...tagSectionLinks].map((tagSectionLink) =>
@@ -174,7 +183,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
 
     assert.strictEqual(
       count(
-        ".sidebar-section-tags .sidebar-section-link:not(.sidebar-section-link-all-tags)"
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link:not(.sidebar-section-link-all-tags)"
       ),
       4,
       "4 section links under the section"
@@ -207,7 +216,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -226,7 +237,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -252,7 +265,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -292,7 +307,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -332,7 +349,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -355,7 +374,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     );
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -370,7 +391,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     await visit(`/tag/tag1/l/top`);
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -385,7 +408,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     await visit(`/tag/tag1/l/new`);
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
@@ -400,7 +425,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     await visit(`/tag/tag1/l/unread`);
 
     assert.strictEqual(
-      count(".sidebar-section-tags .sidebar-section-link.active"),
+      count(
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
+      ),
       1,
       "only one link is marked as active"
     );
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js
index 94d5b65f91f..f527c41bd76 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js
@@ -161,7 +161,7 @@ acceptance(
 
       assert.ok(
         exists(
-          ".sidebar-section-community .sidebar-section-header[aria-expanded='true'][aria-controls='sidebar-section-content-community']"
+          ".sidebar-section[data-section-name='community'] .sidebar-section-header[aria-expanded='true'][aria-controls='sidebar-section-content-community']"
         ),
         "accessibility attributes are set correctly on sidebar section header when section is expanded"
       );
@@ -170,7 +170,7 @@ acceptance(
 
       assert.ok(
         exists(
-          ".sidebar-section-community .sidebar-section-header[aria-expanded='false'][aria-controls='sidebar-section-content-community']"
+          ".sidebar-section[data-section-name='community'] .sidebar-section-header[aria-expanded='false'][aria-controls='sidebar-section-content-community']"
         ),
         "accessibility attributes are set correctly on sidebar section header when section is collapsed"
       );
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-preferences-sidebar-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-preferences-sidebar-test.js
index 9140700c874..6f79b40b44f 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/user-preferences-sidebar-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/user-preferences-sidebar-test.js
@@ -67,12 +67,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-categories .sidebar-section-link[data-category-id=6]"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=6]"
       ),
       "support category is present in sidebar"
     );
 
-    await click(".sidebar-section-categories .sidebar-section-header-button");
+    await click(
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-header-button"
+    );
 
     const categorySelector = selectKit(".category-selector");
     await categorySelector.expand();
@@ -93,14 +95,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
 
     assert.ok(
       !exists(
-        ".sidebar-section-categories .sidebar-section-link[data-category-id=10]"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=10]"
       ),
       "howto category is not displayed in sidebar"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-categories .sidebar-section-link[data-category-id=6]"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=6]"
       ),
       "support category is displayed in sidebar"
     );
@@ -109,7 +111,7 @@ acceptance("User Preferences - Sidebar", function (needs) {
   test("user adding categories to sidebar when default sidebar categories have not been configured", async function (assert) {
     await visit("/u/eviltrout/preferences/sidebar");
 
-    assert.notOk(exists(".sidebar-section-categories"));
+    assert.notOk(exists(".sidebar-section[data-section-name='categories']"));
 
     const categorySelector = selectKit(".category-selector");
     await categorySelector.expand();
@@ -120,14 +122,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-categories .sidebar-section-link[data-category-id=6]"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=6]"
       ),
       "support category has been added to sidebar"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-categories .sidebar-section-link[data-category-id=1]"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=1]"
       ),
       "bug category has been added to sidebar"
     );
@@ -137,7 +139,9 @@ acceptance("User Preferences - Sidebar", function (needs) {
     this.siteSettings.default_sidebar_categories = "5";
 
     await visit("/");
-    await click(".sidebar-section-categories .sidebar-section-header-button");
+    await click(
+      ".sidebar-section[data-section-name='categories'] .sidebar-section-header-button"
+    );
 
     const categorySelector = selectKit(".category-selector");
     await categorySelector.expand();
@@ -148,14 +152,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-categories .sidebar-section-link[data-category-id=6]"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=6]"
       ),
       "support category has been added to sidebar"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-categories .sidebar-section-link[data-category-id=1]"
+        ".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=1]"
       ),
       "bug category has been added to sidebar"
     );
@@ -174,12 +178,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-tags .sidebar-section-link[data-tag-name=monkey]"
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=monkey]"
       ),
       "monkey tag is displayed in sidebar"
     );
 
-    await click(".sidebar-section-tags .sidebar-section-header-button");
+    await click(
+      ".sidebar-section[data-section-name='tags'] .sidebar-section-header-button"
+    );
 
     const tagChooser = selectKit(".tag-chooser");
     await tagChooser.expand();
@@ -200,14 +206,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
 
     assert.ok(
       !exists(
-        ".sidebar-section-tags .sidebar-section-link[data-tag-name=gazelle]"
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=gazelle]"
       ),
       "gazelle tag is not displayed in sidebar"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-tags .sidebar-section-link[data-tag-name=monkey]"
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=monkey]"
       ),
       "monkey tag is displayed in sidebar"
     );
@@ -232,7 +238,7 @@ acceptance("User Preferences - Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-tags .sidebar-section-link[data-tag-name=monkey]"
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=monkey]"
       ),
       "monkey tag has been added to sidebar"
     );
@@ -242,7 +248,9 @@ acceptance("User Preferences - Sidebar", function (needs) {
     this.siteSettings.default_sidebar_tags = "tag1|tag2";
 
     await visit("/");
-    await click(".sidebar-section-tags .sidebar-section-header-button");
+    await click(
+      ".sidebar-section[data-section-name='tags'] .sidebar-section-header-button"
+    );
 
     const tagChooser = selectKit(".tag-chooser");
     await tagChooser.expand();
@@ -253,14 +261,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-tags .sidebar-section-link[data-tag-name=monkey]"
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=monkey]"
       ),
       "monkey tag has been added to sidebar"
     );
 
     assert.ok(
       exists(
-        ".sidebar-section-tags .sidebar-section-link[data-tag-name=gazelle]"
+        ".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=gazelle]"
       ),
       "gazelle tag has been added to sidebar"
     );
diff --git a/plugins/chat/spec/system/list_channels/sidebar_spec.rb b/plugins/chat/spec/system/list_channels/sidebar_spec.rb
index 527930d8e3a..c256e06d497 100644
--- a/plugins/chat/spec/system/list_channels/sidebar_spec.rb
+++ b/plugins/chat/spec/system/list_channels/sidebar_spec.rb
@@ -22,7 +22,7 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
         end
 
         it "shows the channel in the correct section" do
-          expect(page.find(".sidebar-section-chat-channels")).to have_content(
+          expect(page.find(".sidebar-section[data-section-name='chat-channels']")).to have_content(
             category_channel_1.name,
           )
         end
@@ -70,7 +70,9 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
         before { visit("/") }
 
         it "shows the channel in the correct section" do
-          expect(page.find(".sidebar-section-chat-dms")).to have_content(current_user.username)
+          expect(page.find(".sidebar-section[data-section-name='chat-dms']")).to have_content(
+            current_user.username,
+          )
         end
       end
 
@@ -87,7 +89,7 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
   context "when no category channels" do
     it "doesn’t show the section" do
       visit("/")
-      expect(page).to have_no_css(".sidebar-section-chat-channels")
+      expect(page).to have_no_css(".sidebar-section[data-section-name='chat-channels']")
     end
 
     context "when user can create channels" do
@@ -95,7 +97,7 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
 
       it "shows the section" do
         visit("/")
-        expect(page).to have_css(".sidebar-section-chat-channels")
+        expect(page).to have_css(".sidebar-section[data-section-name='chat-channels']")
       end
     end
   end
@@ -104,7 +106,7 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
     before { visit("/") }
 
     it "shows the section" do
-      expect(page).to have_css(".sidebar-section-chat-dms")
+      expect(page).to have_css(".sidebar-section[data-section-name='chat-dms']")
     end
   end
 
@@ -115,8 +117,8 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
     end
 
     it "doesn’t show the sections" do
-      expect(page).to have_no_css(".sidebar-section-chat-channels")
-      expect(page).to have_no_css(".sidebar-section-chat-dms")
+      expect(page).to have_no_css(".sidebar-section[data-section-name='chat-channels']")
+      expect(page).to have_no_css(".sidebar-section[data-section-name='chat-dms']")
     end
   end
 
@@ -128,8 +130,8 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
     end
 
     it "doesn’t show the sections" do
-      expect(page).to have_no_css(".sidebar-section-chat-channels")
-      expect(page).to have_no_css(".sidebar-section-chat-dms")
+      expect(page).to have_no_css(".sidebar-section[data-section-name='chat-channels']")
+      expect(page).to have_no_css(".sidebar-section[data-section-name='chat-dms']")
     end
   end
 
diff --git a/plugins/chat/spec/system/page_objects/sidebar/sidebar.rb b/plugins/chat/spec/system/page_objects/sidebar/sidebar.rb
index bac01c87286..4117639a61d 100644
--- a/plugins/chat/spec/system/page_objects/sidebar/sidebar.rb
+++ b/plugins/chat/spec/system/page_objects/sidebar/sidebar.rb
@@ -4,19 +4,25 @@ module PageObjects
   module Pages
     class Sidebar < PageObjects::Pages::Base
       def channels_section
-        find(".sidebar-section-chat-channels")
+        find(".sidebar-section[data-section-name='chat-channels']")
       end
 
       def dms_section
-        find(".sidebar-section-chat-dms")
+        find(".sidebar-section[data-section-name='chat-dms']")
       end
 
       def open_draft_channel
-        find(".sidebar-section-chat-dms .sidebar-section-header-button", visible: false).click
+        find(
+          ".sidebar-section[data-section-name='chat-dms'] .sidebar-section-header-button",
+          visible: false,
+        ).click
       end
 
       def open_browse
-        find(".sidebar-section-chat-channels .sidebar-section-header-button", visible: false).click
+        find(
+          ".sidebar-section[data-section-name='chat-channels'] .sidebar-section-header-button",
+          visible: false,
+        ).click
       end
 
       def open_channel(channel)
diff --git a/spec/system/custom_sidebar_sections_spec.rb b/spec/system/custom_sidebar_sections_spec.rb
index 75c6108d8ab..c2b163458ff 100644
--- a/spec/system/custom_sidebar_sections_spec.rb
+++ b/spec/system/custom_sidebar_sections_spec.rb
@@ -136,11 +136,16 @@ describe "Custom sidebar sections", type: :system, js: true do
     visit("/latest")
 
     expect(page).to have_button("Public section")
-    find(".sidebar-section-public-section").hover
+
+    find(".sidebar-section[data-section-name='public-section']").hover
+
     expect(page).not_to have_css(
-      ".sidebar-section-public-section button.sidebar-section-header-button",
+      ".sidebar-section[data-section-name='public-section'] button.sidebar-section-header-button",
+    )
+
+    expect(page).not_to have_css(
+      ".sidebar-section[data-section-name='public-section'] .d-icon-globe",
     )
-    expect(page).not_to have_css(".sidebar-section-public-section .d-icon-globe")
   end
 
   it "allows the user to delete custom section" do
@@ -170,7 +175,7 @@ describe "Custom sidebar sections", type: :system, js: true do
 
     expect(page).to have_button("Public section")
     expect(sidebar).to have_link("Sidebar Tags")
-    expect(page).to have_css(".sidebar-section-public-section .d-icon-globe")
+    expect(page).to have_css(".sidebar-section[data-section-name='public-section'] .d-icon-globe")
 
     sidebar.edit_custom_section("Public section")
     section_modal.fill_name("Edited public section")
diff --git a/spec/system/page_objects/components/sidebar.rb b/spec/system/page_objects/components/sidebar.rb
index bce6d559d35..73c1e2e0e24 100644
--- a/spec/system/page_objects/components/sidebar.rb
+++ b/spec/system/page_objects/components/sidebar.rb
@@ -20,8 +20,11 @@ module PageObjects
       end
 
       def edit_custom_section(name)
-        find(".sidebar-section-#{name.parameterize}").hover
-        find(".sidebar-section-#{name.parameterize} button.sidebar-section-header-button").click
+        find(".sidebar-section[data-section-name='#{name.parameterize}']").hover
+
+        find(
+          ".sidebar-section[data-section-name='#{name.parameterize}'] button.sidebar-section-header-button",
+        ).click
       end
 
       def has_link?(name, href: nil)