A11Y: Improve the accessibility of sidebar content (#19131)

app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs

@@ -2,8 +2,9 @@
   <DButton
     @title="sidebar.toggle_section"
     @class="sidebar-section-header sidebar-section-header-collapsable btn-flat"
-    @action={{@toggleSectionDisplay}} >
-
+    @action={{@toggleSectionDisplay}}
+    @ariaExpanded={{@isExpanded}}
+    @ariaControls={{@sidebarSectionContentID}} >
     {{yield}}
   </DButton>
 {{else}}

app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs

@@ -1,5 +1,5 @@
 {{#if this.shouldDisplay}}
-  <div class="sidebar-section-link-wrapper" {{did-insert this.didInsert this.args}}>
+  <li class="sidebar-section-link-wrapper" {{did-insert this.didInsert this.args}}>
     {{#if @href}}
       <a href={{@href}} rel="noopener noreferrer" target="_blank" class={{this.classNames}} title={{@title}}>
         <Sidebar::SectionLinkPrefix
@@ -68,5 +68,5 @@
         {{/if}}
       </Sidebar::SectionLinkTo>
     {{/if}}
-  </div>
+  </li>
 {{/if}}

app/assets/javascripts/discourse/app/components/sidebar/section.hbs

@@ -1,7 +1,12 @@
 {{#if this.displaySection}}
   <div class={{concat "sidebar-section-wrapper sidebar-section-" @sectionName}}>
     <div class="sidebar-section-header-wrapper sidebar-row">
-      <Sidebar::SectionHeader @collapsable={{@collapsable}} @toggleSectionDisplay={{this.toggleSectionDisplay}}>
+      <Sidebar::SectionHeader
+        @collapsable={{@collapsable}}
+        @sidebarSectionContentID={{this.sidebarSectionContentID}}
+        @toggleSectionDisplay={{this.toggleSectionDisplay}}
+        @isExpanded={{this.displaySectionContent}}
+      >
         {{#if @collapsable}}
           <span class="sidebar-section-header-caret">
             {{d-icon this.headerCaretIcon}}
@@ -36,9 +41,9 @@
     </div>
 
     {{#if this.displaySectionContent}}
-      <div class="sidebar-section-content">
+      <ul class="sidebar-section-content" id={{this.sidebarSectionContentID}}>
         {{yield}}
-      </div>
+      </ul>
     {{/if}}
   </div>
 {{/if}}

app/assets/javascripts/discourse/app/components/sidebar/section.js

@@ -8,6 +8,7 @@ export default class SidebarSection extends Component {
   @service keyValueStore;
 
   @tracked displaySectionContent;
+  sidebarSectionContentID = `sidebar-section-content-${this.args.sectionName}`;
   collapsedSidebarSectionKey = `sidebar-section-${this.args.sectionName}-collapsed`;
 
   constructor() {

app/assets/javascripts/discourse/app/widgets/button.js

@@ -49,6 +49,14 @@ export const ButtonClass = {
       attributes["aria-label"] = attrs.translatedAriaLabel;
     }
 
+    if (attrs.ariaExpanded) {
+      attributes["aria-expanded"] = attrs.ariaExpanded;
+    }
+
+    if (attrs.ariaControls) {
+      attributes["aria-controls"] = attrs.ariaControls;
+    }
+
     if (attrs.ariaPressed) {
       attributes["aria-pressed"] = attrs.ariaPressed;
     }

app/assets/stylesheets/common/base/sidebar-section.scss

@@ -134,7 +134,7 @@
 
   .sidebar-section-content {
     padding-bottom: 1em;
-
+    margin: 0;
     hr {
       margin: 0em 1.5em;
     }