Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: Make user avatars in posts stream untabbable 

The user avatar in posts has aria-hidden set to true to reduce
redundancy since the information that the avatar gives to screen readers
is the same information that the username/name of the post gives which
is the author of the post.

However, it's still possible for a screen reader user to reach the
avatar by tabbing through the post and when that happens the avatar is
read as "blank". This isn't ideal so we should set tabindex to -1 on the
avatar to remove it from the default keyboard nav flow.
This commit is contained in:
OsamaSayegh 2022-03-30 08:26:58 +03:00 committed by Osama Sayegh
parent ca58d80b0c
commit db67c478be
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/javascripts/discourse/app/widgets/post.js
View File

@ -184,14 +184,21 @@ createWidget("post-avatar", {
if (!attrs.user_id) { if (!attrs.user_id) {
body = iconNode("far-trash-alt", { class: "deleted-user-avatar" }); body = iconNode("far-trash-alt", { class: "deleted-user-avatar" });
} else { } else {
body = avatarFor.call(this, this.settings.size, { body = avatarFor.call(
template: attrs.avatar_template, this,
username: attrs.username, this.settings.size,
name: attrs.name, {
url: attrs.usernameUrl, template: attrs.avatar_template,
className: `main-avatar ${hideFromAnonUser ? "non-clickable" : ""}`, username: attrs.username,
hideTitle: true, name: attrs.name,
}); url: attrs.usernameUrl,
className: `main-avatar ${hideFromAnonUser ? "non-clickable" : ""}`,
hideTitle: true,
},
{
tabindex: "-1",
}
);
} }
const postAvatarBody = [body]; const postAvatarBody = [body];