FEATURE: Give user menu icons alt attributes (#11750)

* 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.
This commit is contained in:
Jordan Vidrine 2021-01-19 12:27:27 -06:00 committed by GitHub
parent 440b63e833
commit e6bbe9b5df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 2 deletions

View File

@ -99,7 +99,12 @@ export const DefaultNotificationItem = createWidget(
},
icon(notificationName) {
return iconNode(`notification.${notificationName}`);
let icon = iconNode(`notification.${notificationName}`);
icon.properties.attributes["alt"] = I18n.t(
`notifications.titles.${notificationName}`
);
icon.properties.attributes["aria-hidden"] = false;
return icon;
},
notificationTitle(notificationName) {

View File

@ -65,7 +65,14 @@ export default createWidget("link", {
const result = [];
if (attrs.icon) {
result.push(iconNode(attrs.icon));
if (attrs.alt) {
let icon = iconNode(attrs.icon);
icon.properties.attributes["alt"] = I18n.t(attrs.alt);
icon.properties.attributes["aria-hidden"] = false;
result.push(icon);
} else {
result.push(iconNode(attrs.icon));
}
result.push(" ");
}

View File

@ -31,6 +31,7 @@ createWidget("user-menu-links", {
href: `${this.attrs.path}/summary`,
action: UserMenuAction.QUICK_ACCESS,
actionParam: QuickAccess.PROFILE,
alt: "user.preferences",
};
},
@ -42,6 +43,7 @@ createWidget("user-menu-links", {
href: `${this.attrs.path}/notifications`,
action: UserMenuAction.QUICK_ACCESS,
actionParam: QuickAccess.NOTIFICATIONS,
alt: "user.notifications",
};
},
@ -53,6 +55,7 @@ createWidget("user-menu-links", {
className: "user-bookmarks-link",
icon: "bookmark",
href: `${this.attrs.path}/activity/bookmarks`,
alt: "user.bookmarks",
};
},
@ -64,6 +67,7 @@ createWidget("user-menu-links", {
className: "user-pms-link",
icon: "envelope",
href: `${this.attrs.path}/messages`,
alt: "user.private_messages",
};
},