From da2ed566e36e60fa62e673bb9597165e902ec366 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Wed, 20 Jan 2021 10:46:57 -0600
Subject: [PATCH] A11y: Accessible user menu icons (#11763)

* FEATURE: Give user menu icons alt attributes

This commit gives user menu icons + notifications alt attributes

* UI: Use Translations

This commit refactors the code injecting alt tags to the icons to use translations instead of hard-coded text.

* FIX: Add correct syntax for aria-label + role

This commit adds the correct accessibility syntax to the tab icons + notification icons.
---
 .../discourse/app/widgets/default-notification-item.js    | 3 ++-
 app/assets/javascripts/discourse/app/widgets/link.js      | 5 +++--
 app/assets/javascripts/discourse/app/widgets/user-menu.js | 8 ++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/default-notification-item.js b/app/assets/javascripts/discourse/app/widgets/default-notification-item.js
index 825d9e50211..a5e3a35ff97 100644
--- a/app/assets/javascripts/discourse/app/widgets/default-notification-item.js
+++ b/app/assets/javascripts/discourse/app/widgets/default-notification-item.js
@@ -100,10 +100,11 @@ export const DefaultNotificationItem = createWidget(
 
     icon(notificationName) {
       let icon = iconNode(`notification.${notificationName}`);
-      icon.properties.attributes["alt"] = I18n.t(
+      icon.properties.attributes["aria-label"] = I18n.t(
         `notifications.titles.${notificationName}`
       );
       icon.properties.attributes["aria-hidden"] = false;
+      icon.properties.attributes["role"] = "img";
       return icon;
     },
 
diff --git a/app/assets/javascripts/discourse/app/widgets/link.js b/app/assets/javascripts/discourse/app/widgets/link.js
index 1e1e2b790d3..b4d79bf281d 100644
--- a/app/assets/javascripts/discourse/app/widgets/link.js
+++ b/app/assets/javascripts/discourse/app/widgets/link.js
@@ -65,9 +65,10 @@ export default createWidget("link", {
 
     const result = [];
     if (attrs.icon) {
-      if (attrs.alt) {
+      if (attrs["aria-label"]) {
         let icon = iconNode(attrs.icon);
-        icon.properties.attributes["alt"] = I18n.t(attrs.alt);
+        icon.properties.attributes["aria-label"] = I18n.t(attrs["aria-label"]);
+        icon.properties.attributes["role"] = "img";
         icon.properties.attributes["aria-hidden"] = false;
         result.push(icon);
       } else {
diff --git a/app/assets/javascripts/discourse/app/widgets/user-menu.js b/app/assets/javascripts/discourse/app/widgets/user-menu.js
index d7304ff44cc..e532b38a211 100644
--- a/app/assets/javascripts/discourse/app/widgets/user-menu.js
+++ b/app/assets/javascripts/discourse/app/widgets/user-menu.js
@@ -31,7 +31,7 @@ createWidget("user-menu-links", {
       href: `${this.attrs.path}/summary`,
       action: UserMenuAction.QUICK_ACCESS,
       actionParam: QuickAccess.PROFILE,
-      alt: "user.preferences",
+      "aria-label": "user.preferences",
     };
   },
 
@@ -43,7 +43,7 @@ createWidget("user-menu-links", {
       href: `${this.attrs.path}/notifications`,
       action: UserMenuAction.QUICK_ACCESS,
       actionParam: QuickAccess.NOTIFICATIONS,
-      alt: "user.notifications",
+      "aria-label": "user.notifications",
     };
   },
 
@@ -55,7 +55,7 @@ createWidget("user-menu-links", {
       className: "user-bookmarks-link",
       icon: "bookmark",
       href: `${this.attrs.path}/activity/bookmarks`,
-      alt: "user.bookmarks",
+      "aria-label": "user.bookmarks",
     };
   },
 
@@ -67,7 +67,7 @@ createWidget("user-menu-links", {
       className: "user-pms-link",
       icon: "envelope",
       href: `${this.attrs.path}/messages`,
-      alt: "user.private_messages",
+      "aria-label": "user.private_messages",
     };
   },