From 48f06e56f236f3b55b34070265cddb15bea35808 Mon Sep 17 00:00:00 2001 From: Roman Rizzi Date: Wed, 20 Jan 2021 14:50:36 -0300 Subject: [PATCH] A11Y: Improve the quick access menu accessibility. (#11757) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - The icon for the “view all” controls in the panels have no accessible alternative. - Because the “Log Out” and "Do Not Disturb" elements in the preferences tab are an element without an href attribute, it is not keyboard focusable and therefore not keyboard focusable. Use a button element instead. --- .../discourse/app/widgets/do-not-disturb.js | 4 +-- .../app/widgets/quick-access-item.js | 2 +- .../app/widgets/quick-access-panel.js | 1 + .../app/widgets/quick-access-profile.js | 25 +++++++++++-------- .../integration/widgets/user-menu-test.js | 3 ++- .../stylesheets/common/base/menu-panel.scss | 7 +++++- app/assets/stylesheets/mobile/menu-panel.scss | 3 ++- 7 files changed, 29 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/discourse/app/widgets/do-not-disturb.js b/app/assets/javascripts/discourse/app/widgets/do-not-disturb.js index fdca3767213..956104bbc33 100644 --- a/app/assets/javascripts/discourse/app/widgets/do-not-disturb.js +++ b/app/assets/javascripts/discourse/app/widgets/do-not-disturb.js @@ -12,7 +12,7 @@ export default createWidget("do-not-disturb", { html() { if (this.currentUser.isInDoNotDisturb()) { return [ - h("a.do-not-disturb-inner-container", [ + h("button.btn-flat.do-not-disturb-inner-container", [ iconNode("toggle-on"), h("span.do-not-disturb-label", [ h("span", I18n.t("do_not_disturb.label")), @@ -22,7 +22,7 @@ export default createWidget("do-not-disturb", { ]; } else { return [ - h("a.do-not-disturb-inner-container", [ + h("button.btn-flat.do-not-disturb-inner-container", [ iconNode("toggle-off"), h("span.do-not-disturb-label", I18n.t("do_not_disturb.label")), ]), diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-item.js b/app/assets/javascripts/discourse/app/widgets/quick-access-item.js index b5a241214eb..98b50a28699 100644 --- a/app/assets/javascripts/discourse/app/widgets/quick-access-item.js +++ b/app/assets/javascripts/discourse/app/widgets/quick-access-item.js @@ -19,7 +19,7 @@ import { iconNode } from "discourse-common/lib/icon-library"; * read * username */ -createWidget("quick-access-item", { +export default createWidget("quick-access-item", { tagName: "li", buildClasses(attrs) { diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js b/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js index f1a8370a0cf..23145723b53 100644 --- a/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js +++ b/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js @@ -108,6 +108,7 @@ export default createWidget("quick-access-panel", { title: "view_all", icon: "chevron-down", className: "btn btn-default btn-icon no-text show-all", + "aria-label": "view_all", href: this.showAllHref(), }) ); diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-profile.js b/app/assets/javascripts/discourse/app/widgets/quick-access-profile.js index 727cfa34e64..5ad69f6e9c1 100644 --- a/app/assets/javascripts/discourse/app/widgets/quick-access-profile.js +++ b/app/assets/javascripts/discourse/app/widgets/quick-access-profile.js @@ -1,5 +1,6 @@ import I18n from "I18n"; import { Promise } from "rsvp"; +import QuickAccessItem from "discourse/widgets/quick-access-item"; import QuickAccessPanel from "discourse/widgets/quick-access-panel"; import { createWidgetFrom } from "discourse/widgets/widget"; @@ -9,6 +10,19 @@ export function addQuickAccessProfileItem(item) { _extraItems.push(item); } +createWidgetFrom(QuickAccessItem, "logout-item", { + tagName: "li.logout", + + html() { + return this.attach("flat-button", { + action: "logout", + content: I18n.t("user.log_out"), + icon: "sign-out-alt", + label: "user.log_out", + }); + }, +}); + createWidgetFrom(QuickAccessPanel, "quick-access-profile", { tagName: "div.quick-access-panel.quick-access-profile", @@ -36,7 +50,7 @@ createWidgetFrom(QuickAccessPanel, "quick-access-profile", { items = items.concat(_extraItems); if (this.attrs.showLogoutButton) { - items.push(this._logOutButton()); + items.push({ widget: "logout-item" }); } return items; }, @@ -103,15 +117,6 @@ createWidgetFrom(QuickAccessPanel, "quick-access-profile", { } }, - _logOutButton() { - return { - action: "logout", - className: "logout", - content: I18n.t("user.log_out"), - icon: "sign-out-alt", - }; - }, - _showToggleAnonymousButton() { return ( (this.siteSettings.allow_anonymous_posting && diff --git a/app/assets/javascripts/discourse/tests/integration/widgets/user-menu-test.js b/app/assets/javascripts/discourse/tests/integration/widgets/user-menu-test.js index d2b2667afcf..891c07101c7 100644 --- a/app/assets/javascripts/discourse/tests/integration/widgets/user-menu-test.js +++ b/app/assets/javascripts/discourse/tests/integration/widgets/user-menu-test.js @@ -94,9 +94,10 @@ discourseModule("Integration | Component | Widget | user-menu", function ( async test(assert) { await click(".user-preferences-link"); + assert.ok(queryAll(".logout").length); - await click(".logout"); + await click(".logout button"); assert.ok(this.loggedOut); }, }); diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index 1c775df27dc..9d93eb26f86 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -283,6 +283,10 @@ a { display: flex; + } + + a, + button { padding: 0.25em 0.5em; > div { @@ -396,7 +400,8 @@ div.menu-links-header { } } - a { + a, + button { // This is to make sure active and inactive tab icons have the same // size. `box-sizing` does not work and I have no idea why. border: 1px solid transparent; diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss index 95894ad691c..d69cde92604 100644 --- a/app/assets/stylesheets/mobile/menu-panel.scss +++ b/app/assets/stylesheets/mobile/menu-panel.scss @@ -26,7 +26,8 @@ .user-menu .quick-access-panel.quick-access-profile li:not(.show-all) { border-bottom: 1px solid var(--primary-low); - a { + a, + button { // accounts for menu "ears" 4px + border 1px padding: 0.75em calc(0.5em + 4px + 1px); }