DEV: Use button for sidebar section header

Buttons can be focused and action triggered via the enter key compared
to a span.

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

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"

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;
     }
   }