inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-10288] Aria label for user initials pipe (#11568)

Browse Source
This commit is contained in:
Michal Kinas
2026-01-26 10:51:12 +01:00
committed by GitHub
parent 3f01a92d67
commit 6927af4ec3
2 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/pipes/user-initial.pipe.spec.ts
+30 -8
View File
@@ -62,28 +62,28 @@ describe('UserInitialPipe', () => {
fakeUser.firstName = 'FAKE-NAME';
fakeUser.lastName = 'FAKE-SURNAME';
const result = pipe.transform(fakeUser);
expect(result).toBe('<div data-automation-id="user-initials-image" class="">FF</div>');
expect(result).toBe('<div data-automation-id="user-initials-image" aria-label="FAKE-NAME FAKE-SURNAME" class="">FF</div>');
});
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('<div data-automation-id="user-initials-image" class="fake-class-to-check">FF</div>');
expect(result).toBe('<div data-automation-id="user-initials-image" aria-label="FAKE-NAME FAKE-SURNAME" class="fake-class-to-check">FF</div>');
});
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('<div data-automation-id="user-initials-image" class="">F</div>');
expect(result).toBe('<div data-automation-id="user-initials-image" aria-label="" class="">F</div>');
});
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('<div data-automation-id="user-initials-image" class="">F</div>');
expect(result).toBe('<div data-automation-id="user-initials-image" aria-label="" class="">F</div>');
});
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('<div data-automation-id="user-initials-image" class="">U</div>');
expect(result).toBe('<div data-automation-id="user-initials-image" aria-label="USERNAME-FAKE" class="">U</div>');
});
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('<div data-automation-id="user-initials-image" class="">F</div>');
expect(result).toBe('<div data-automation-id="user-initials-image" aria-label="USERNAME-FAKE" class="">F</div>');
});
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('<div data-automation-id="user-initials-image" class="">UF</div>');
expect(result).toBe('<div data-automation-id="user-initials-image" aria-label="USERNAME-FAKE" class="">UF</div>');
});
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('<div data-automation-id="user-initials-image" class="">FF</div>');
expect(result).toBe('<div data-automation-id="user-initials-image" aria-label="FAKE-NAME FAKE-SURNAME" class="">FF</div>');
});
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=""');
});
});
lib/core/src/lib/pipes/user-initial.pipe.ts
+1
View File
@@ -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);