A11Y: Improve the header menu "view all" title. (#12175)

* A11Y: Improve the header menu "view all" title.

The title attribute has been used to attempt to provide the link with an accessible name, but the value of the title attribute is “view all” for the link in each of the tabs, and so their purpose is not uniquely identified.

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

@@ -67,7 +67,12 @@ export default createWidget("link", {
     if (attrs.icon) {
       if (attrs["aria-label"]) {
         let icon = iconNode(attrs.icon);
-        icon.properties.attributes["aria-label"] = I18n.t(attrs["aria-label"]);
+
+        icon.properties.attributes["aria-label"] = I18n.t(
+          attrs["aria-label"],
+          attrs.ariaLabelOptions
+        );
+
         icon.properties.attributes["role"] = "img";
         icon.properties.attributes["aria-hidden"] = false;
         result.push(icon);

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

@@ -111,13 +111,17 @@ export default createWidget("quick-access-panel", {
     let bottomItems = [];
 
     if (!this.hideBottomItems()) {
+      const tab = I18n.t(this.attrs.titleKey).toLowerCase();
+
       bottomItems.push(
         // intentionally a link so it can be ctrl clicked
         this.attach("link", {
           title: "view_all",
+          titleOptions: { tab },
           icon: "chevron-down",
           className: "btn btn-default btn-icon no-text show-all",
           "aria-label": "view_all",
+          ariaLabelOptions: { tab },
           href: this.showAllHref(),
         })
       );

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

@@ -13,6 +13,13 @@ const QuickAccess = {
   PROFILE: "profile",
 };
 
+const Titles = {
+  bookmarks: "user.bookmarks",
+  messages: "user.private_messages",
+  notifications: "user.notifications",
+  profile: "user.preferences",
+};
+
 let extraGlyphs;
 
 export function addUserMenuGlyph(glyph) {
@@ -51,7 +58,7 @@ createWidget("user-menu-links", {
 
   profileGlyph() {
     return {
-      title: "user.preferences",
+      title: Titles["profile"],
       className: "user-preferences-link",
       icon: "user",
       action: UserMenuAction.QUICK_ACCESS,
@@ -64,7 +71,7 @@ createWidget("user-menu-links", {
 
   notificationsGlyph() {
     return {
-      title: "user.notifications",
+      title: Titles["notifications"],
       className: "user-notifications-link",
       icon: "bell",
       action: UserMenuAction.QUICK_ACCESS,
@@ -77,7 +84,7 @@ createWidget("user-menu-links", {
 
   bookmarksGlyph() {
     return {
-      title: "user.bookmarks",
+      title: Titles["bookmarks"],
       action: UserMenuAction.QUICK_ACCESS,
       actionParam: QuickAccess.BOOKMARKS,
       className: "user-bookmarks-link",
@@ -91,7 +98,7 @@ createWidget("user-menu-links", {
 
   messagesGlyph() {
     return {
-      title: "user.private_messages",
+      title: Titles["messages"],
       action: UserMenuAction.QUICK_ACCESS,
       actionParam: QuickAccess.MESSAGES,
       className: "user-pms-link",
@@ -126,6 +133,8 @@ createWidget("user-menu-links", {
         }
         if (g) {
           const structuredGlyph = this._structureAsTab(g);
+          Titles[structuredGlyph.actionParam] =
+            structuredGlyph.title || structuredGlyph.label;
           glyphs.push(structuredGlyph);
         }
       });
@@ -188,6 +197,7 @@ export default createWidget("user-menu", {
   defaultState() {
     return {
       currentQuickAccess: QuickAccess.NOTIFICATIONS,
+      titleKey: Titles["notifications"],
       hasUnread: false,
       markUnread: null,
     };
@@ -195,14 +205,14 @@ export default createWidget("user-menu", {
 
   panelContents() {
     const path = this.currentUser.get("path");
-    const { currentQuickAccess } = this.state;
+    const { currentQuickAccess, titleKey } = this.state;
 
     const result = [
       this.attach("user-menu-links", {
         path,
         currentQuickAccess,
       }),
-      this.quickAccessPanel(path),
+      this.quickAccessPanel(path, titleKey),
     ];
 
     return result;
@@ -255,15 +265,17 @@ export default createWidget("user-menu", {
   quickAccess(type) {
     if (this.state.currentQuickAccess !== type) {
       this.state.currentQuickAccess = type;
+      this.state.titleKey = Titles[type];
     }
   },
 
-  quickAccessPanel(path) {
+  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,
     });
   },
 });

config/locales/client.en.yml

@@ -2259,7 +2259,7 @@ en:
     go_back: "go back"
     not_logged_in_user: "user page with summary of current activity and preferences"
     current_user: "go to your user page"
-    view_all: "view all"
+    view_all: "view all %{tab}"
 
     topics:
       new_messages_marker: "last visit"