From e30df227162e08e3ff33e1217ef36051e615d726 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 21 Nov 2022 16:32:43 -0500
Subject: [PATCH] A11Y: Improve the accessibility of sidebar content (#19131)

---
 .../app/components/sidebar/section-header.hbs         |  5 +++--
 .../discourse/app/components/sidebar/section-link.hbs |  4 ++--
 .../discourse/app/components/sidebar/section.hbs      | 11 ++++++++---
 .../discourse/app/components/sidebar/section.js       |  1 +
 .../javascripts/discourse/app/widgets/button.js       |  8 ++++++++
 .../stylesheets/common/base/sidebar-section.scss      |  2 +-
 6 files changed, 23 insertions(+), 8 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 55839c39e3c..b878399fea8 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs
index 6be1ab4512f..d1d9cb9451d 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
index de74d2ccdfc..047a97b1b56 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.js b/app/assets/javascripts/discourse/app/components/sidebar/section.js
index ea11c34d952..6b227a67e08 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section.js
+++ b/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() {
diff --git a/app/assets/javascripts/discourse/app/widgets/button.js b/app/assets/javascripts/discourse/app/widgets/button.js
index 723d0db05c2..83b9e0505e1 100644
--- a/app/assets/javascripts/discourse/app/widgets/button.js
+++ b/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;
     }
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index d70e794de98..ca2958351f0 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/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;
     }