IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11y: Accessible user menu icons (#11763)

Browse Source 
* 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.
This commit is contained in:
Jordan Vidrine 2021-01-20 10:46:57 -06:00 committed by GitHub
parent 1a7922bea2
commit da2ed566e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/app/widgets/default-notification-item.js
View File

@ -100,10 +100,11 @@ export const DefaultNotificationItem = createWidget(
icon(notificationName) { icon(notificationName) {
let icon = iconNode(`notification.${notificationName}`); let icon = iconNode(`notification.${notificationName}`);
icon.properties.attributes["alt"] = I18n.t( icon.properties.attributes["aria-label"] = I18n.t(
`notifications.titles.${notificationName}` `notifications.titles.${notificationName}`
); );
icon.properties.attributes["aria-hidden"] = false; icon.properties.attributes["aria-hidden"] = false;
icon.properties.attributes["role"] = "img";
return icon; return icon;
}, },

5
app/assets/javascripts/discourse/app/widgets/link.js
View File

@ -65,9 +65,10 @@ export default createWidget("link", {
const result = []; const result = [];
if (attrs.icon) { if (attrs.icon) {
if (attrs.alt) { if (attrs["aria-label"]) {
let icon = iconNode(attrs.icon); 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; icon.properties.attributes["aria-hidden"] = false;
result.push(icon); result.push(icon);
} else { } else {

8
app/assets/javascripts/discourse/app/widgets/user-menu.js
View File

@ -31,7 +31,7 @@ createWidget("user-menu-links", {
href: `${this.attrs.path}/summary`, href: `${this.attrs.path}/summary`,
action: UserMenuAction.QUICK_ACCESS, action: UserMenuAction.QUICK_ACCESS,
actionParam: QuickAccess.PROFILE, actionParam: QuickAccess.PROFILE,
alt: "user.preferences", "aria-label": "user.preferences",
}; };
}, },
@ -43,7 +43,7 @@ createWidget("user-menu-links", {
href: `${this.attrs.path}/notifications`, href: `${this.attrs.path}/notifications`,
action: UserMenuAction.QUICK_ACCESS, action: UserMenuAction.QUICK_ACCESS,
actionParam: QuickAccess.NOTIFICATIONS, actionParam: QuickAccess.NOTIFICATIONS,
alt: "user.notifications", "aria-label": "user.notifications",
}; };
}, },
@ -55,7 +55,7 @@ createWidget("user-menu-links", {
className: "user-bookmarks-link", className: "user-bookmarks-link",
icon: "bookmark", icon: "bookmark",
href: `${this.attrs.path}/activity/bookmarks`, 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", className: "user-pms-link",
icon: "envelope", icon: "envelope",
href: `${this.attrs.path}/messages`, href: `${this.attrs.path}/messages`,
alt: "user.private_messages", "aria-label": "user.private_messages",
}; };
}, },