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-10306] Proper alt for user or group icons (#11403)

Browse Source 
* [ACS-10306] Proper alt for user or group icons

* [ACS-10306] CR fix
This commit is contained in:
Michal Kinas
2025-11-28 13:58:32 +01:00
committed by GitHub
parent a9efe36e5f
commit f317374a2e
4 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/git-tag.yml
-1
View File
@@ -22,7 +22,6 @@ env:
LOG_LEVEL: "ERROR"
NODE_OPTIONS: "--max-old-space-size=5120"
NPM_REGISTRY_ADDRESS: ${{ secrets.NPM_REGISTRY_ADDRESS }}
NPM_REGISTRY_TOKEN: ${{ secrets.NPM_REGISTRY_TOKEN }}
BOT_GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
jobs:
lib/content-services/src/lib/i18n/en.json
+4
View File
@@ -612,6 +612,10 @@
"NOT-ALLOWED": "You are not allowed to change permissions"
}
},
"USER_ICON": {
"GROUP_ICON_ALT": "Group icon",
"GROUP_USER_SELECTED_ALT": "Selected group or user icon"
},
"ADF-TREE-VIEW": {
"MISSING-ID": "No nodeId provided!",
"ACCESSIBILITY": {
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.spec.ts
+15 -8
View File
@@ -19,11 +19,13 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContentTestingModule } from '../../../testing/content.testing.module';
import { UserIconColumnComponent } from './user-icon-column.component';
import { NodeEntry } from '@alfresco/js-api';
import { UnitTestingUtils } from '@alfresco/adf-core';
import { DebugElement } from '@angular/core';
describe('UserIconColumnComponent', () => {
let fixture: ComponentFixture<UserIconColumnComponent>;
let component: UserIconColumnComponent;
let element: HTMLElement;
let testingUtils: UnitTestingUtils;
const person = {
firstName: 'fake',
lastName: 'user',
@@ -35,18 +37,20 @@ describe('UserIconColumnComponent', () => {
displayName: 'fake authority'
};
const getVisuallyHiddenText = (): string => testingUtils.getInnerTextByCSS('.cdk-visually-hidden');
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ContentTestingModule]
});
fixture = TestBed.createComponent(UserIconColumnComponent);
component = fixture.componentInstance;
element = fixture.nativeElement;
testingUtils = new UnitTestingUtils(fixture.debugElement);
fixture.detectChanges();
});
describe('person initial', () => {
const getInitials = () => element.querySelector('[data-automation-id="user-initials-image"]')?.textContent;
const getInitials = (): string => testingUtils.getInnerTextByDataAutomationId('user-initials-image');
it('should render person value from context', () => {
component.context = {
@@ -58,7 +62,7 @@ describe('UserIconColumnComponent', () => {
};
component.ngOnInit();
fixture.detectChanges();
expect(getInitials()).toContain('fu');
expect(getInitials()).toContain('FU');
});
it('should render person value from node', () => {
@@ -80,7 +84,7 @@ describe('UserIconColumnComponent', () => {
});
describe('group initial', () => {
const getGroupIcon = () => element.querySelector('[id="group-icon"] .adf-group-icon');
const getGroupIcon = (): DebugElement => testingUtils.getByCSS('[id="group-icon"] .adf-group-icon');
it('should render group value from context', () => {
component.context = {
@@ -93,7 +97,8 @@ describe('UserIconColumnComponent', () => {
component.ngOnInit();
fixture.detectChanges();
expect(getGroupIcon()).toBeDefined();
expect(getGroupIcon().textContent).toContain('people_alt_outline');
expect(getGroupIcon().nativeElement.textContent).toContain('people_alt_outline');
expect(getVisuallyHiddenText()).toBe('USER_ICON.GROUP_ICON_ALT');
});
it('should render person value from node', () => {
@@ -108,7 +113,8 @@ describe('UserIconColumnComponent', () => {
component.ngOnInit();
fixture.detectChanges();
expect(getGroupIcon()).toBeDefined();
expect(getGroupIcon().textContent).toContain('people_alt_outline');
expect(getGroupIcon().nativeElement.textContent).toContain('people_alt_outline');
expect(getVisuallyHiddenText()).toBe('USER_ICON.GROUP_ICON_ALT');
});
});
@@ -116,7 +122,8 @@ describe('UserIconColumnComponent', () => {
component.selected = true;
component.ngOnInit();
fixture.detectChanges();
expect(element.querySelector('.adf-people-select-icon[svgIcon="selected"]')).toBeDefined();
expect(testingUtils.getByCSS('.adf-people-select-icon[svgIcon="selected"]')).toBeDefined();
expect(getVisuallyHiddenText()).toBe('USER_ICON.GROUP_USER_SELECTED_ALT');
expect(component.isSelected).toBe(true);
});
});
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts
+19 -10
View File
@@ -22,20 +22,29 @@ import { BehaviorSubject } from 'rxjs';
import { NodePermissionService } from '../../services/node-permission.service';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
selector: 'adf-user-icon-column',
imports: [CommonModule, MatIconModule, InitialUsernamePipe],
imports: [CommonModule, MatIconModule, InitialUsernamePipe, TranslatePipe],
template: `
<div class="adf-cell-value" [attr.id]="group ? 'group-icon' : 'person-icon'" *ngIf="!isSelected">
<ng-container *ngIf="displayText$ | async as user">
<mat-icon *ngIf="group" class="adf-group-icon">people_alt_outline</mat-icon>
<div *ngIf="!group" [outerHTML]="user | usernameInitials : 'adf-people-initial'"></div>
</ng-container>
</div>
<div class="adf-cell-value" *ngIf="isSelected">
<mat-icon class="adf-people-select-icon adf-datatable-selected" svgIcon="selected" />
</div>
@if (!isSelected) {
<div class="adf-cell-value" [attr.id]="group ? 'group-icon' : 'person-icon'">
@if (displayText$ | async; as user) {
@if (group) {
<mat-icon class="adf-group-icon">people_alt_outline</mat-icon>
<span class="cdk-visually-hidden">{{ 'USER_ICON.GROUP_ICON_ALT' | translate }}</span>
} @else {
<div [outerHTML]="user | usernameInitials: 'adf-people-initial'"></div>
}
}
</div>
} @else {
<div class="adf-cell-value">
<mat-icon class="adf-people-select-icon adf-datatable-selected" svgIcon="selected" />
<span class="cdk-visually-hidden">{{ 'USER_ICON.GROUP_USER_SELECTED_ALT' | translate }}</span>
</div>
}
`,
styleUrls: ['./user-icon-column.component.scss'],
encapsulation: ViewEncapsulation.None,