[ACS-10274] sr personal files sr announces white heavy check mark in entitlements row of repository section (#11595)

* [ACS-10274] Corrected reading green check mark and red cross by screen reader

* [ACS-10274] Unit tests, cleaning code, centering content

* [ACS-10274] Fixed formatting

* [ACS-10274] Moved code for getting cell to unit testing utils

lib/core/src/lib/about/about-license-list/about-license-list.component.scss

@@ -1,4 +1,11 @@
 .adf-about-license-cell {
     white-space: pre-line;
     line-height: 30px;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+
+    div {
+        white-space: nowrap;
+    }
 }

lib/core/src/lib/about/about-license-list/about-license-list.component.spec.ts

@@ -0,0 +1,81 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AboutLicenseListComponent, UnitTestingUtils } from '@alfresco/adf-core';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+
+describe('AboutLicenseListComponent', () => {
+    let fixture: ComponentFixture<AboutLicenseListComponent>;
+    let component: AboutLicenseListComponent;
+    let unitTestingUtils: UnitTestingUtils;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [AboutLicenseListComponent]
+        });
+        fixture = TestBed.createComponent(AboutLicenseListComponent);
+        component = fixture.componentInstance;
+        unitTestingUtils = new UnitTestingUtils(fixture.debugElement, TestbedHarnessEnvironment.loader(fixture));
+    });
+
+    describe('Property value', () => {
+        const innerTextPropertyName = 'innerText';
+        const columnName = 'value';
+
+        beforeEach(() => {
+            component.data = [
+                {
+                    property: 'Test Property',
+                    value: '&#9989 Value 1'
+                }
+            ];
+        });
+
+        it('should display correct value when contains green check mark icon', async () => {
+            fixture.detectChanges();
+            expect(await (await (await unitTestingUtils.getMatCellByColumnName(columnName)).host()).getProperty(innerTextPropertyName)).toEqual(
+                '✅ ABOUT.LICENSE.ENABLED Value 1'
+            );
+        });
+
+        it('should display correct value when contains red cross icon', async () => {
+            component.data[0].value = '&#10060 Value 1';
+
+            fixture.detectChanges();
+            expect(await (await (await unitTestingUtils.getMatCellByColumnName(columnName)).host()).getProperty(innerTextPropertyName)).toEqual(
+                '❌ ABOUT.LICENSE.DISABLED Value 1'
+            );
+        });
+
+        it('should display correct value when contains no icon', async () => {
+            component.data[0].value = 'Value 1';
+
+            fixture.detectChanges();
+            expect(await (await (await unitTestingUtils.getMatCellByColumnName(columnName)).host()).getProperty(innerTextPropertyName)).toEqual(
+                'Value 1'
+            );
+        });
+
+        it('should display correct value when there is number value', async () => {
+            component.data[0].value = 3;
+
+            fixture.detectChanges();
+            expect(await (await (await unitTestingUtils.getMatCellByColumnName(columnName)).host()).getProperty(innerTextPropertyName)).toEqual('3');
+        });
+    });
+});

lib/core/src/lib/about/about-license-list/about-license-list.component.ts

@@ -18,7 +18,7 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
 import { LicenseData } from '../interfaces';
 import { CommonModule } from '@angular/common';
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { MatTableModule } from '@angular/material/table';
 
 @Component({
@@ -39,7 +39,24 @@ export class AboutLicenseListComponent {
         {
             columnDef: 'value',
             header: 'ABOUT.LICENSE.VALUE',
-            cell: (row: LicenseData) => `${row.value}`
+            cell: (row: LicenseData) => {
+                const enabledIcon = '&#9989';
+                const disabledIcon = '&#10060';
+                const statusAndValueGroupsRegex = new RegExp(`(${enabledIcon}|${disabledIcon})\\s*([^&#]+)`, 'g');
+                return typeof row.value === 'string'
+                    ? row.value.replace(
+                          statusAndValueGroupsRegex,
+                          (_match, icon, label) =>
+                              `<div>
+                                <span aria-hidden="true">${icon}</span>
+                                <span class="cdk-visually-hidden">
+                                ${this.translateService.instant(icon === enabledIcon ? 'ABOUT.LICENSE.ENABLED' : 'ABOUT.LICENSE.DISABLED')}
+                                </span>
+                                ${label}
+                              </div>`
+                      )
+                    : row.value;
+            }
         }
     ];
 
@@ -47,4 +64,6 @@ export class AboutLicenseListComponent {
 
     @Input({ required: true })
     data: LicenseData[] = [];
+
+    constructor(private readonly translateService: TranslateService) {}
 }

lib/core/src/lib/about/interfaces.ts

@@ -27,5 +27,5 @@ export interface StatusData {
 
 export interface LicenseData {
     property: string;
-    value: string;
+    value: string | number;
 }

lib/core/src/lib/i18n/en.json

@@ -605,7 +605,9 @@
     "LICENSE": {
       "TITLE": "License",
       "PROPERTY": "Property",
-      "VALUE": "Value"
+      "VALUE": "Value",
+      "ENABLED": "Enabled",
+      "DISABLED": "Disabled"
     },
     "STATUS": {
       "TITLE": "Status",

lib/core/src/lib/testing/unit-testing-utils.ts

@@ -33,6 +33,7 @@ import { MatToolbarHarness } from '@angular/material/toolbar/testing';
 import { MatSnackBarHarness } from '@angular/material/snack-bar/testing';
 import { MatProgressBarHarness } from '@angular/material/progress-bar/testing';
 import { MatListOptionHarness } from '@angular/material/list/testing';
+import { MatCellHarness } from '@angular/material/table/testing';
 
 export class UnitTestingUtils {
     constructor(
@@ -463,4 +464,10 @@ export class UnitTestingUtils {
     async getAllMatListOptions(): Promise<MatListOptionHarness[]> {
         return this.loader.getAllHarnesses(MatListOptionHarness);
     }
+
+    /** MatCell related methods */
+
+    async getMatCellByColumnName(columnName: string): Promise<MatCellHarness> {
+        return this.loader.getHarness(MatCellHarness.with({ columnName }));
+    }
 }