A11Y: add title & aria-expanded for sidebar toggle (#19130)

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

@@ -1,4 +1,4 @@
-<DSection @pageClass="has-sidebar" @class="sidebar-container" @scrollTop={{false}}>
+<DSection @pageClass="has-sidebar" @id="d-sidebar" @class="sidebar-container" @scrollTop={{false}}>
   <Sidebar::Sections @currentUser={{this.currentUser}} @collapsableSections={{true}} />
   <Sidebar::Footer />
 </DSection>

app/assets/javascripts/discourse/app/components/site-header.js

@@ -335,6 +335,7 @@ const SiteHeaderComponent = MountWidget.extend(
         topic: this._topic,
         canSignUp: this.canSignUp,
         sidebarEnabled: this.sidebarEnabled,
+        showSidebar: this.showSidebar,
       };
     },
 

app/assets/javascripts/discourse/app/templates/application.hbs

@@ -13,6 +13,7 @@
       @toggleAnonymous={{route-action "toggleAnonymous"}}
       @logout={{route-action "logout"}}
       @sidebarEnabled={{this.sidebarEnabled}}
+      @showSidebar={{this.showSidebar}}
       @toggleSidebar={{action "toggleSidebar"}} />
   {{/if}}
 

app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js

@@ -4,12 +4,17 @@ export default createWidget("sidebar-toggle", {
   tagName: "span.header-sidebar-toggle",
 
   html() {
+    const attrs = this.attrs;
     return [
       this.attach("button", {
-        title: "",
+        title: attrs.showSidebar
+          ? "sidebar.hide_sidebar"
+          : "sidebar.show_sidebar",
         icon: "bars",
         action: "toggleSidebar",
         className: "btn btn-flat btn-sidebar-toggle",
+        ariaExpanded: attrs.showSidebar ? "true" : "false",
+        ariaControls: "d-sidebar",
       }),
     ];
   },

app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js

@@ -4,6 +4,7 @@ import { click, visit } from "@ember/test-helpers";
 import {
   acceptance,
   exists,
+  query,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
 
@@ -215,5 +216,37 @@ acceptance(
         "accessibility attributes are set correctly on sidebar section header when section is collapsed"
       );
     });
+
+    test("accessibility of sidebar toggle", async function (assert) {
+      await visit("/");
+
+      assert.ok(
+        exists(
+          ".btn-sidebar-toggle[aria-expanded='true'][aria-controls='d-sidebar']"
+        ),
+        "has the right accessibility attributes set when sidebar is expanded"
+      );
+
+      assert.strictEqual(
+        query(".btn-sidebar-toggle").title,
+        I18n.t("sidebar.hide_sidebar"),
+        "has the right title attribute when sidebar is expanded"
+      );
+
+      await click(".btn-sidebar-toggle");
+
+      assert.ok(
+        exists(
+          ".btn-sidebar-toggle[aria-expanded='false'][aria-controls='d-sidebar']"
+        ),
+        "has the right accessibility attributes set when sidebar is collapsed"
+      );
+
+      assert.strictEqual(
+        query(".btn-sidebar-toggle").title,
+        I18n.t("sidebar.show_sidebar"),
+        "has the right title attribute when sidebar is collapsed"
+      );
+    });
   }
 );

config/locales/client.en.yml

@@ -4179,6 +4179,8 @@ en:
       redirect_after_success: "Second factor authentication is successful. Redirecting to the previous page…"
 
     sidebar:
+      show_sidebar: "Show sidebar"
+      hide_sidebar: "Hide sidebar"
       unread_count:
         one: "%{count} unread"
         other: "%{count} unread"