A11Y: aria-label for mobile topic list avatar (#23693)

This commit is contained in:
Kris 2023-09-28 13:29:56 -04:00 committed by GitHub
parent 3fe5ce7ab4
commit a523f17ed7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 6 additions and 5 deletions

View File

@ -75,7 +75,7 @@ export function avatarImg(options, customGetURL) {
let title = "";
if (options.title) {
const escaped = escape(options.title || "");
title = ` title='${escaped}' aria-label='${escaped}'`;
title = ` title='${escaped}'`;
}
return `<img loading='lazy' alt='' width='${size}' height='${size}' src='${url}' class='${classes}'${title}>`;

View File

@ -6,7 +6,7 @@
<input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
</label>
{{else}}
<a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
<a href="{{topic.lastPostUrl}}" aria-label="{{i18n 'latest_poster_link' username=topic.lastPosterUser.username}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
{{/if}}
</div>
<div class='right'>

View File

@ -69,7 +69,7 @@ module("Unit | Utilities", function (hooks) {
size: "tiny",
title: "evilest trout",
}),
"<img loading='lazy' alt='' width='24' height='24' src='/path/to/avatar/48.png' class='avatar' title='evilest trout' aria-label='evilest trout'>",
"<img loading='lazy' alt='' width='24' height='24' src='/path/to/avatar/48.png' class='avatar' title='evilest trout'>",
"it adds a title if supplied"
);

View File

@ -370,7 +370,7 @@ module("Unit | Model | report", function (hooks) {
const computedUsernameLabel = usernameLabel.compute(row);
assert.strictEqual(
computedUsernameLabel.formattedValue,
"<a href='/admin/users/1/joffrey'><img loading='lazy' alt='' width='24' height='24' src='/' class='avatar' title='joffrey' aria-label='joffrey'><span class='username'>joffrey</span></a>"
"<a href='/admin/users/1/joffrey'><img loading='lazy' alt='' width='24' height='24' src='/' class='avatar' title='joffrey'><span class='username'>joffrey</span></a>"
);
assert.strictEqual(computedUsernameLabel.value, "joffrey");
@ -459,7 +459,7 @@ module("Unit | Model | report", function (hooks) {
const userLink = computedLabels[0].compute(row).formattedValue;
assert.strictEqual(
userLink,
"<a href='/forum/admin/users/1/joffrey'><img loading='lazy' alt='' width='24' height='24' src='/forum/' class='avatar' title='joffrey' aria-label='joffrey'><span class='username'>joffrey</span></a>"
"<a href='/forum/admin/users/1/joffrey'><img loading='lazy' alt='' width='24' height='24' src='/forum/' class='avatar' title='joffrey'><span class='username'>joffrey</span></a>"
);
});
});

View File

@ -3933,6 +3933,7 @@ en:
other {}
}
latest_poster_link: "%{username}'s profile, latest poster"
original_post: "Original Post"
views: "Views"
sr_views: "Sort by views"