[ACS-10306] Proper alt for user or group icons (#11403)

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

* [ACS-10306] CR fix

Author: MichalKinas

.github/workflows/git-tag.yml

@@ -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

@@ -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

@@ -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,15 +113,17 @@ 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 select icon', () => {
         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

@@ -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,