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

* 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
5 changed files with 15 additions and 7 deletions

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>"
);
});