diff --git a/app/assets/javascripts/discourse/app/widgets/link.js b/app/assets/javascripts/discourse/app/widgets/link.js index b4d79bf281d..3d69dfcd41b 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 8c6f0996f2a..c13bd2705b5 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 7c89f3da0c5..5ad3e5309fa 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 b78f1bc62ff..3d100889dcf 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"