A11Y: Improve the quick access menu accessibility. (#11757)

- 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 <a> element without an href attribute, it is not keyboard focusable and therefore not keyboard focusable. Use a button element instead.

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")),
         ]),

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) {

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(),
         })
       );

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 &&

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);
     },
   });

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;

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);
   }