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

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.

diff --git a/app/assets/javascripts/discourse/app/widgets/link.js b/app/assets/javascripts/discourse/app/widgets/link.js
index b4d79bf..3d69dfc 100644
--- a/app/assets/javascripts/discourse/app/widgets/link.js
+++ b/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);
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 8c6f099..c13bd27 100644
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js
+++ b/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(),
         })
       );
diff --git a/app/assets/javascripts/discourse/app/widgets/user-menu.js b/app/assets/javascripts/discourse/app/widgets/user-menu.js
index 7c89f3d..5ad3e53 100644
--- a/app/assets/javascripts/discourse/app/widgets/user-menu.js
+++ b/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,
     });
   },
 });
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index b78f1bc..3d10088 100644
--- a/config/locales/client.en.yml
+++ b/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"

GitHub sha: 4bc3a649

1 Like

This commit appears in #12175 which was approved by awesomerobot and CvX. It was merged by romanrizzi.