Revert "A11Y: Switch tabs using the keyboard (#12241)" (#12260)

This reverts commit de10c39fa4.

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

@@ -6,7 +6,6 @@ import PanEvents, {
 import { cancel, later, schedule } from "@ember/runloop";
 import Docking from "discourse/mixins/docking";
 import MountWidget from "discourse/components/mount-widget";
-import Mousetrap from "mousetrap";
 import RerenderOnDoNotDisturbChange from "discourse/mixins/rerender-on-do-not-disturb-change";
 import { observes } from "discourse-common/utils/decorators";
 import { topicTitleDecorators } from "discourse/components/topic-title";
@@ -26,7 +25,6 @@ const SiteHeaderComponent = MountWidget.extend(
     _scheduledMovingAnimation: null,
     _scheduledRemoveAnimate: null,
     _topic: null,
-    _mousetrap: null,
 
     @observes(
       "currentUser.unread_notifications",
@@ -211,7 +209,6 @@ const SiteHeaderComponent = MountWidget.extend(
       this.dispatch("notifications:changed", "user-notifications");
       this.dispatch("header:keyboard-trigger", "header");
       this.dispatch("search-autocomplete:after-complete", "search-term");
-      this.dispatch("user-menu:navigation", "user-menu");
 
       this.appEvents.on("dom:clean", this, "_cleanDom");
 
@@ -239,26 +236,6 @@ const SiteHeaderComponent = MountWidget.extend(
           once: true,
         });
       }
-
-      const header = document.querySelector("header.d-header");
-      const mousetrap = new Mousetrap(header);
-      mousetrap.bind(["right", "left"], (e) => {
-        const activeTab = document.querySelector(".glyphs .menu-link.active");
-
-        if (activeTab) {
-          let focusedTab = document.activeElement;
-          if (!focusedTab.dataset.tabNumber) {
-            focusedTab = activeTab;
-          }
-
-          this.appEvents.trigger("user-menu:navigation", {
-            key: e.key,
-            tabNumber: Number(focusedTab.dataset.tabNumber),
-          });
-        }
-      });
-
-      this.set("_mousetrap", mousetrap);
     },
 
     _cleanDom() {
@@ -280,8 +257,6 @@ const SiteHeaderComponent = MountWidget.extend(
       cancel(this._scheduledRemoveAnimate);
       window.cancelAnimationFrame(this._scheduledMovingAnimation);
 
-      this._mousetrap.unbind(["right", "left"]);
-
       document.removeEventListener("click", this._dismissFirstNotification);
     },
 

app/assets/javascripts/discourse/app/widgets/button.js

@@ -28,10 +28,6 @@ export const ButtonClass = {
     return className;
   },
 
-  buildId(attrs) {
-    return attrs.id;
-  },
-
   buildAttributes() {
     const attrs = this.attrs;
     const attributes = {};
@@ -74,7 +70,7 @@ export const ButtonClass = {
     const icon = iconNode(attrs.icon, { class: attrs.iconClass });
     if (attrs["aria-label"]) {
       icon.properties.attributes["role"] = "img";
-      icon.properties.attributes["aria-hidden"] = true;
+      icon.properties.attributes["aria-hidden"] = false;
     }
     return icon;
   },

app/assets/javascripts/discourse/app/widgets/quick-access-panel.js

@@ -40,13 +40,9 @@ export default createWidget("quick-access-panel", {
     return Promise.resolve([]);
   },
 
-  buildId() {
-    return this.key;
-  },
-
   buildAttributes() {
     const attributes = this.attrs;
-    attributes["aria-labelledby"] = attributes.currentQuickAccess;
+    attributes["aria-labelledby"] = this.key;
     attributes["tabindex"] = "0";
     attributes["role"] = "tabpanel";
 

app/assets/javascripts/discourse/app/widgets/user-menu.js

@@ -1,6 +1,6 @@
-import { later } from "@ember/runloop";
 import { createWidget } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
+import { later } from "@ember/runloop";
 
 const UserMenuAction = {
   QUICK_ACCESS: "quickAccess",
@@ -59,8 +59,7 @@ createWidget("user-menu-links", {
   profileGlyph() {
     return {
       title: Titles["profile"],
-      className: "user-preferences-link menu-link",
+      className: "user-preferences-link",
-      id: QuickAccess.PROFILE,
       icon: "user",
       action: UserMenuAction.QUICK_ACCESS,
       actionParam: QuickAccess.PROFILE,
@@ -73,8 +72,7 @@ createWidget("user-menu-links", {
   notificationsGlyph() {
     return {
       title: Titles["notifications"],
-      className: "user-notifications-link menu-link",
+      className: "user-notifications-link",
-      id: QuickAccess.NOTIFICATIONS,
       icon: "bell",
       action: UserMenuAction.QUICK_ACCESS,
       actionParam: QuickAccess.NOTIFICATIONS,
@@ -89,8 +87,7 @@ createWidget("user-menu-links", {
       title: Titles["bookmarks"],
       action: UserMenuAction.QUICK_ACCESS,
       actionParam: QuickAccess.BOOKMARKS,
-      className: "user-bookmarks-link menu-link",
+      className: "user-bookmarks-link",
-      id: QuickAccess.BOOKMARKS,
       icon: "bookmark",
       data: { url: `${this.attrs.path}/activity/bookmarks` },
       "aria-label": "user.bookmarks",
@@ -104,8 +101,7 @@ createWidget("user-menu-links", {
       title: Titles["messages"],
       action: UserMenuAction.QUICK_ACCESS,
       actionParam: QuickAccess.MESSAGES,
-      className: "user-pms-link menu-link",
+      className: "user-pms-link",
-      id: QuickAccess.MESSAGES,
       icon: "envelope",
       data: { url: `${this.attrs.path}/messages` },
       role: "tab",
@@ -120,12 +116,10 @@ createWidget("user-menu-links", {
     return this.attach("link", link);
   },
 
-  glyphHtml(glyph, idx) {
+  glyphHtml(glyph) {
     if (this.isActive(glyph)) {
       glyph = this.markAsActive(glyph);
     }
-    glyph.data["tab-number"] = `${idx}`;
-
     return this.attach("flat-button", glyph);
   },
 
@@ -159,7 +153,7 @@ createWidget("user-menu-links", {
       h(
         "div.glyphs",
         { attributes: { "aria-label": "Menu links", role: "tablist" } },
-        glyphs.map((l, index) => this.glyphHtml(l, index))
+        glyphs.map((l) => this.glyphHtml(l))
       ),
     ]);
   },
@@ -200,25 +194,6 @@ export default createWidget("user-menu", {
     showLogoutButton: true,
   },
 
-  userMenuNavigation(nav) {
-    const maxTabNumber = document.querySelectorAll(".glyphs button").length - 1;
-    const isLeft = nav.key === "ArrowLeft";
-
-    let nextTab = isLeft ? nav.tabNumber - 1 : nav.tabNumber + 1;
-
-    if (isLeft && nextTab < 0) {
-      nextTab = maxTabNumber;
-    }
-
-    if (!isLeft && nextTab > maxTabNumber) {
-      nextTab = 0;
-    }
-
-    document
-      .querySelector(`.menu-link[role='tab'][data-tab-number='${nextTab}']`)
-      .focus();
-  },
-
   defaultState() {
     return {
       currentQuickAccess: QuickAccess.NOTIFICATIONS,
@@ -237,7 +212,7 @@ export default createWidget("user-menu", {
         path,
         currentQuickAccess,
       }),
-      this.quickAccessPanel(path, titleKey, currentQuickAccess),
+      this.quickAccessPanel(path, titleKey),
     ];
 
     return result;
@@ -294,14 +269,13 @@ export default createWidget("user-menu", {
     }
   },
 
-  quickAccessPanel(path, titleKey, currentQuickAccess) {
+  quickAccessPanel(path, titleKey) {
     const { showLogoutButton } = this.settings;
     // This deliberately does NOT fallback to a default quick access panel.
     return this.attach(`quick-access-${this.state.currentQuickAccess}`, {
       path,
       showLogoutButton,
       titleKey,
-      currentQuickAccess,
     });
   },
 });

app/assets/stylesheets/common/base/menu-panel.scss

@@ -416,10 +416,6 @@ div.menu-links-header {
         flex: 1 1 auto;
         padding: 0.65em 0.25em 0.75em;
         justify-content: center;
-
-        svg {
-          pointer-events: none;
-        }
       }
     }