github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 22:26:26 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

A11Y: Improve small-post markup for screen readers (#23732)

Browse Source
This commit is contained in:
Kris 2023-10-02 13:55:54 -04:00 committed by GitHub
parent fac3ca2344
commit 6cb6302a34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/app/widgets/post-small-action.js
View File

@ -94,7 +94,17 @@ export function resetPostSmallActionClassesCallbacks() {
export default createWidget("post-small-action", {
buildKey: (attrs) => `post-small-act-${attrs.id}`,
tagName: "div.small-action.onscreen-post",
tagName: "article.small-action.onscreen-post",
buildAttributes(attrs) {
return {
"aria-label": I18n.t("share.post", {
postNumber: attrs.post_number,
username: attrs.username,
}),
role: "region",
};
},
buildId(attrs) {
return `post_${attrs.post_number}`;
@ -130,6 +140,7 @@ export default createWidget("post-small-action", {
template: attrs.avatar_template,
username: attrs.username,
url: attrs.usernameUrl,
ariaHidden: false,
})
);

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

@ -59,7 +59,7 @@ export function avatarImg(wanted, attrs) {
height: size,
src: getURLWithCDN(url),
title,
"aria-label": title,
"aria-hidden": true,
loading: "lazy",
tabindex: "-1",
},
@ -73,8 +73,19 @@ export function avatarFor(wanted, attrs, linkAttrs) {
const attributes = {
href: attrs.url,
"data-user-card": attrs.username,
"aria-hidden": true,
};
// often avatars are paired with usernames,
// making them redundant for screen readers
// so we hide the avatar from screen readers by default
if (attrs.ariaHidden === false) {
attributes["aria-label"] = I18n.t("user.profile_possessive", {
username: attrs.username,
});
} else {
attributes["aria-hidden"] = true;
}
if (linkAttrs) {
Object.assign(attributes, linkAttrs);
}