IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: Don't output aria-labelledby when card is empty (#22247)

Browse Source 
The user card is always present in the DOM. Therefore we only need to
add the `aria-labelledby` attribute when there is a user (and a title)
to point to.
This commit is contained in:
Penar Musaraj 2023-06-23 09:25:03 -04:00 committed by GitHub
parent 4e5575c065
commit a984a807fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/app/components/card-container.hbs
View File

@ -9,7 +9,6 @@
@composePrivateMessage={{route-action "composePrivateMessage"}} @composePrivateMessage={{route-action "composePrivateMessage"}}
@createNewMessageViaParams={{route-action "createNewMessageViaParams"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}}
role="dialog" role="dialog"
aria-labelledby="discourse-user-card-title"
/> />
<GroupCardContents <GroupCardContents

6
app/assets/javascripts/discourse/app/components/user-card-contents.js
View File

@ -30,6 +30,7 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
"usernameClass", "usernameClass",
"primaryGroup", "primaryGroup",
], ],
attributeBindings: ["labelledBy:aria-labelledby"],
allowBackgrounds: setting("allow_profile_backgrounds"), allowBackgrounds: setting("allow_profile_backgrounds"),
showBadges: setting("enable_badges"), showBadges: setting("enable_badges"),
@ -46,6 +47,11 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
showDelete: and("viewingAdmin", "showName", "user.canBeDeleted"), showDelete: and("viewingAdmin", "showName", "user.canBeDeleted"),
linkWebsite: not("user.isBasic"), linkWebsite: not("user.isBasic"),
@discourseComputed("user")
labelledBy(user) {
return user ? "discourse-user-card-title" : null;
},
@discourseComputed("user") @discourseComputed("user")
hasLocaleOrWebsite(user) { hasLocaleOrWebsite(user) {
return user.location || user.website_name || this.userTimezone; return user.location || user.website_name || this.userTimezone;