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

FIX: Add aria-labels to topic list items (#9048)

Browse Source 
* FIX: Add aria-labels to topic list items

Before this fix you could navigate the topic list using a screen reader
and a keyboard but some of the items were not as descriptive as they
could be. The newly added labels make it easier to understand what you
are tabbing over.

context:
https://meta.discourse.org/t/accessibility-aria-attributes-are-not-defined-for-links-under-replies-category/142539

* Update app/assets/javascripts/discourse/lib/utilities.js.es6

Co-Authored-By: Régis Hanol <regis@hanol.fr>

* Multiline fix

* Fix more tests

Co-authored-by: Régis Hanol <regis@hanol.fr>
This commit is contained in:
Robin Ward 2020-03-02 14:28:54 -05:00 committed by GitHub
parent f17459c620
commit a653737a66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/helpers/application.js.es6
View File

@ -41,6 +41,11 @@ registerUnbound("number", (orig, params) => {
if (n.toString() !== title.toString() && addTitle) {
result += " title='" + Handlebars.Utils.escapeExpression(title) + "'";
}
if (params.ariaLabel) {
const ariaLabel = Handlebars.Utils.escapeExpression(params.ariaLabel);
result += ` aria-label='${ariaLabel}'`;
}
result += ">" + n + "</span>";
return new safe(result);

9
app/assets/javascripts/discourse/lib/utilities.js.es6
View File

@ -66,9 +66,12 @@ export function avatarImg(options, getURL) {
const classes =
"avatar" + (options.extraClasses ? " " + options.extraClasses : "");
const title = options.title
? " title='" + escapeExpression(options.title || "") + "'"
: "";
let title = "";
if (options.title) {
const escaped = escapeExpression(options.title || "");
title = ` title='${escaped}' aria-label='${escaped}'`;
}
return (
"<img alt='' width='" +

2
app/assets/javascripts/discourse/templates/list/posts-count-column.hbr
View File

@ -1,6 +1,6 @@
<{{view.tagName}} class='num posts-map posts {{view.likesHeat}}' title='{{view.title}}'>
<a href class='posts-map badge-posts {{view.likesHeat}}'>
{{raw-plugin-outlet name="topic-list-before-reply-count"}}
{{number topic.replyCount noTitle="true"}}
{{number topic.replyCount noTitle="true" ariaLabel=view.title}}
</a>
</{{view.tagName}}>

2
test/javascripts/lib/utilities-test.js.es6
View File

@ -89,7 +89,7 @@ QUnit.test("avatarImg", assert => {
size: "tiny",
title: "evilest trout"
}),
"<img alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar' title='evilest trout'>",
"<img alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar' title='evilest trout' aria-label='evilest trout'>",
"it adds a title if supplied"
);

4
test/javascripts/models/report-test.js.es6
View File

@ -459,7 +459,7 @@ QUnit.test("computed labels", assert => {
const computedUsernameLabel = usernameLabel.compute(row);
assert.equal(
computedUsernameLabel.formatedValue,
"<a href='/admin/users/1/joffrey'><img alt='' width='20' height='20' src='/' class='avatar' title='joffrey'><span class='username'>joffrey</span></a>"
"<a href='/admin/users/1/joffrey'><img alt='' width='20' height='20' src='/' class='avatar' title='joffrey' aria-label='joffrey'><span class='username'>joffrey</span></a>"
);
assert.equal(computedUsernameLabel.value, "joffrey");
@ -542,6 +542,6 @@ QUnit.test("computed labels", assert => {
const userLink = computedLabels[0].compute(row).formatedValue;
assert.equal(
userLink,
"<a href='/forum/admin/users/1/joffrey'><img alt='' width='20' height='20' src='/forum/' class='avatar' title='joffrey'><span class='username'>joffrey</span></a>"
"<a href='/forum/admin/users/1/joffrey'><img alt='' width='20' height='20' src='/forum/' class='avatar' title='joffrey' aria-label='joffrey'><span class='username'>joffrey</span></a>"
);
});