From a984a807fdc4ec94d47c4d113eefa76eb435d8b6 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 23 Jun 2023 09:25:03 -0400
Subject: [PATCH] A11Y: Don't output `aria-labelledby` when card is empty
 (#22247)

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.
---
 .../javascripts/discourse/app/components/card-container.hbs | 1 -
 .../discourse/app/components/user-card-contents.js          | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/card-container.hbs b/app/assets/javascripts/discourse/app/components/card-container.hbs
index b2a70887f13..9bde984d351 100644
--- a/app/assets/javascripts/discourse/app/components/card-container.hbs
+++ b/app/assets/javascripts/discourse/app/components/card-container.hbs
@@ -9,7 +9,6 @@
   @composePrivateMessage={{route-action "composePrivateMessage"}}
   @createNewMessageViaParams={{route-action "createNewMessageViaParams"}}
   role="dialog"
-  aria-labelledby="discourse-user-card-title"
 />
 
 <GroupCardContents
diff --git a/app/assets/javascripts/discourse/app/components/user-card-contents.js b/app/assets/javascripts/discourse/app/components/user-card-contents.js
index 72a4926f1a8..4489659ac0f 100644
--- a/app/assets/javascripts/discourse/app/components/user-card-contents.js
+++ b/app/assets/javascripts/discourse/app/components/user-card-contents.js
@@ -30,6 +30,7 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
     "usernameClass",
     "primaryGroup",
   ],
+  attributeBindings: ["labelledBy:aria-labelledby"],
   allowBackgrounds: setting("allow_profile_backgrounds"),
   showBadges: setting("enable_badges"),
 
@@ -46,6 +47,11 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
   showDelete: and("viewingAdmin", "showName", "user.canBeDeleted"),
   linkWebsite: not("user.isBasic"),
 
+  @discourseComputed("user")
+  labelledBy(user) {
+    return user ? "discourse-user-card-title" : null;
+  },
+
   @discourseComputed("user")
   hasLocaleOrWebsite(user) {
     return user.location || user.website_name || this.userTimezone;