From 6927af4ec3bc413f415882ff73ba44d184e97ed8 Mon Sep 17 00:00:00 2001
From: Michal Kinas <113341662+MichalKinas@users.noreply.github.com>
Date: Mon, 26 Jan 2026 10:51:12 +0100
Subject: [PATCH] [ACS-10288] Aria label for user initials pipe (#11568)
---
.../src/lib/pipes/user-initial.pipe.spec.ts | 38 +++++++++++++++----
lib/core/src/lib/pipes/user-initial.pipe.ts | 1 +
2 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/lib/core/src/lib/pipes/user-initial.pipe.spec.ts b/lib/core/src/lib/pipes/user-initial.pipe.spec.ts
index 5c21ac2e8f..3ba3abcc68 100644
--- a/lib/core/src/lib/pipes/user-initial.pipe.spec.ts
+++ b/lib/core/src/lib/pipes/user-initial.pipe.spec.ts
@@ -62,28 +62,28 @@ describe('UserInitialPipe', () => {
fakeUser.firstName = 'FAKE-NAME';
fakeUser.lastName = 'FAKE-SURNAME';
const result = pipe.transform(fakeUser);
- expect(result).toBe('FF
');
+ expect(result).toBe('FF
');
});
it('should apply the style class passed in input', () => {
fakeUser.firstName = 'FAKE-NAME';
fakeUser.lastName = 'FAKE-SURNAME';
const result = pipe.transform(fakeUser, 'fake-class-to-check');
- expect(result).toBe('FF
');
+ expect(result).toBe('FF
');
});
it('should return a single letter into div when lastName is undefined', () => {
fakeUser.firstName = 'FAKE-NAME';
fakeUser.lastName = undefined;
const result = pipe.transform(fakeUser);
- expect(result).toBe('F
');
+ expect(result).toBe('F
');
});
it('should return a single letter into div when firstname is null', () => {
fakeUser.firstName = undefined;
fakeUser.lastName = 'FAKE-SURNAME';
const result = pipe.transform(fakeUser);
- expect(result).toBe('F
');
+ expect(result).toBe('F
');
});
it('should return a single letter into div when only username is defined', () => {
@@ -91,7 +91,7 @@ describe('UserInitialPipe', () => {
fakeUser.lastName = undefined;
fakeUser.username = 'USERNAME-FAKE';
const result = pipe.transform(fakeUser);
- expect(result).toBe('U
');
+ expect(result).toBe('U
');
});
it('should return a single letter into div of firstName when only firstName and username is defined', () => {
@@ -99,7 +99,7 @@ describe('UserInitialPipe', () => {
fakeUser.lastName = undefined;
fakeUser.username = 'USERNAME-FAKE';
const result = pipe.transform(fakeUser);
- expect(result).toBe('F
');
+ expect(result).toBe('F
');
});
it('should return two letter into div of username and lastName when firstName is undefined', () => {
@@ -107,7 +107,7 @@ describe('UserInitialPipe', () => {
fakeUser.lastName = 'FAKE-SURNAME';
fakeUser.username = 'USERNAME-FAKE';
const result = pipe.transform(fakeUser);
- expect(result).toBe('UF
');
+ expect(result).toBe('UF
');
});
it('should return a div with the user initials when firstName, lastName and username is defined', () => {
@@ -115,11 +115,33 @@ describe('UserInitialPipe', () => {
fakeUser.lastName = 'FAKE-SURNAME';
fakeUser.username = 'USERNAME-FAKE';
const result = pipe.transform(fakeUser);
- expect(result).toBe('FF
');
+ expect(result).toBe('FF
');
});
it('should return an empty string when user is null', () => {
const result = pipe.transform(null);
expect(result).toBe('');
});
+
+ it('should add aria label with available user information', () => {
+ fakeUser.firstName = 'FAKE-NAME';
+ fakeUser.lastName = 'FAKE-SURNAME';
+ const result = pipe.transform(fakeUser);
+ expect(result).toContain('aria-label="FAKE-NAME FAKE-SURNAME"');
+
+ fakeUser.firstName = undefined;
+ fakeUser.lastName = undefined;
+ fakeUser.displayName = 'Fake Display Name';
+ const result2 = pipe.transform(fakeUser);
+ expect(result2).toContain('aria-label="Fake Display Name"');
+
+ fakeUser.displayName = undefined;
+ fakeUser.username = 'fakeusername';
+ const result3 = pipe.transform(fakeUser);
+ expect(result3).toContain('aria-label="fakeusername"');
+
+ fakeUser.username = undefined;
+ const result4 = pipe.transform(fakeUser);
+ expect(result4).toContain('aria-label=""');
+ });
});
diff --git a/lib/core/src/lib/pipes/user-initial.pipe.ts b/lib/core/src/lib/pipes/user-initial.pipe.ts
index d9d0237dcd..6adb4d3d0d 100644
--- a/lib/core/src/lib/pipes/user-initial.pipe.ts
+++ b/lib/core/src/lib/pipes/user-initial.pipe.ts
@@ -32,6 +32,7 @@ export class InitialUsernamePipe implements PipeTransform {
const div = document.createElement('div');
div.textContent = initialResult;
div.dataset.automationId = 'user-initials-image';
+ div.ariaLabel = user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.displayName || user.username || '';
div.className = className;
safeHtml = this.sanitized.bypassSecurityTrustHtml(div.outerHTML);