From 2d1e50911b0be459a58e5e22c8ff79de159e503f Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 18 Aug 2022 20:14:44 +0800
Subject: [PATCH] DEV: Use button for sidebar section header

Buttons can be focused and action triggered via the enter key compared
to a span.
---
 .../app/components/sidebar/section-header.hbs       | 13 ++++++-------
 .../tests/acceptance/sidebar-plugin-api-test.js     |  4 ++--
 .../stylesheets/common/base/sidebar-section.scss    |  7 ++++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
index 37103bf04c9..55839c39e3c 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
@@ -1,12 +1,11 @@
 {{#if @collapsable}}
-  <span
-    role="button"
-    title={{i18n "sidebar.toggle_section"}}
-    class="sidebar-section-header sidebar-section-header-collapsable"
-    {{on "click" @toggleSectionDisplay}}
-  >
+  <DButton
+    @title="sidebar.toggle_section"
+    @class="sidebar-section-header sidebar-section-header-collapsable btn-flat"
+    @action={{@toggleSectionDisplay}} >
+
     {{yield}}
-  </span>
+  </DButton>
 {{else}}
   <span class="sidebar-section-header" title={{i18n "sidebar.toggle_section"}}>
     {{yield}}
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 675c69f121f..8e33ca9df22 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
@@ -202,7 +202,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     assert.strictEqual(
       query(
-        ".sidebar-section-test-chat-channels .sidebar-section-header"
+        ".sidebar-section-test-chat-channels .sidebar-section-header-text"
       ).textContent.trim(),
       "chat channels text",
       "displays header with correct text"
@@ -381,7 +381,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     assert.strictEqual(
       query(
-        ".sidebar-section-test-chat-channels .sidebar-section-header"
+        ".sidebar-section-test-chat-channels .sidebar-section-header-text"
       ).textContent.trim(),
       "chat channels text",
       "displays header with correct text"
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index 9325ba11edc..5800cafe63c 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -3,8 +3,6 @@
 
   .sidebar-section-header-wrapper {
     display: flex;
-    text-transform: uppercase;
-    font-weight: bold;
     align-items: stretch;
     box-sizing: border-box;
 
@@ -31,12 +29,15 @@
   .sidebar-section-header {
     @include ellipsis;
     flex: 1 1 auto;
+    text-transform: uppercase;
+    font-weight: bold;
     font-size: var(--font-1);
     color: var(--primary);
     align-items: center;
 
     &.sidebar-section-header-collapsable {
-      cursor: pointer;
+      justify-content: flex-start;
+      padding: 0;
     }
   }