diff --git a/app/assets/javascripts/discourse/app/components/sidebar.hbs b/app/assets/javascripts/discourse/app/components/sidebar.hbs index 65d3b9240f..533f7531a1 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar.hbs @@ -1,4 +1,4 @@ - + diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js index 3f79982873..5cdb3502cf 100644 --- a/app/assets/javascripts/discourse/app/components/site-header.js +++ b/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, }; }, diff --git a/app/assets/javascripts/discourse/app/templates/application.hbs b/app/assets/javascripts/discourse/app/templates/application.hbs index 1bcc83c735..9c462727a6 100644 --- a/app/assets/javascripts/discourse/app/templates/application.hbs +++ b/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}} diff --git a/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js b/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js index 35033fd417..72cc52c6e8 100644 --- a/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js +++ b/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", }), ]; }, diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js index a8d5f44b01..8f80d85dc3 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js +++ b/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" + ); + }); } ); diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 864e251a45..a04315378a 100644 --- a/config/locales/client.en.yml +++ b/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"