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.
This commit is contained in:
parent
1a7922bea2
commit
da2ed566e3
|
@ -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;
|
||||
},
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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",
|
||||
};
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue