From deba5b6afe60752148cc89366186599a610ada81 Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Mon, 3 Feb 2025 15:01:32 +0200
Subject: [PATCH] fix(ui5-avatar): announce initials

---
 packages/main/cypress/specs/Avatar.cy.tsx | 18 ++++++++++++++++++
 packages/main/src/Avatar.ts               |  4 +++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 packages/main/cypress/specs/Avatar.cy.tsx

diff --git a/packages/main/cypress/specs/Avatar.cy.tsx b/packages/main/cypress/specs/Avatar.cy.tsx
new file mode 100644
index 000000000000..d0944f61a885
--- /dev/null
+++ b/packages/main/cypress/specs/Avatar.cy.tsx
@@ -0,0 +1,18 @@
+import Avatar from "../../src/Avatar.js";
+
+describe("Accessibility", () => {
+	it("checks if initials of avatar are correctly announced", () => {
+		const INITIALS = "XS";
+
+		cy.mount(<Avatar id="interactive-avatar" initials={INITIALS} interactive></Avatar>);
+
+		// Store the expected label to compare against
+		const expectedLabel = `Avatar ${INITIALS}`;
+
+		// Check if the aria-label is correctly set
+		cy.get("#interactive-avatar")
+			.shadow()
+			.find(".ui5-avatar-root")
+			.should("have.attr", "aria-label", expectedLabel);
+	});
+});
diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts
index 7cace21bca6d..d26125fb2a55 100644
--- a/packages/main/src/Avatar.ts
+++ b/packages/main/src/Avatar.ts
@@ -298,7 +298,9 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 			return this.accessibleName;
 		}
 
-		return Avatar.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
+		const defaultLabel = Avatar.i18nBundle.getText(AVATAR_TOOLTIP);
+
+		return this.initials ? `${defaultLabel} ${this.initials}`.trim() : defaultLabel;
 	}
 
 	get hasImage() {