[ACS-10282] screen reader personal files perform actions empty state not announced by screen reader (#11444)

* [ACS-10282] Display and read errors for actions values * [ACS-10282] Added documentation
2026-09-09 18:03:21 +00:00 · 2025-12-10 09:08:57 +01:00
parent 8fa3e6acdf
commit 8c0d5fc8a1
14 changed files with 379 additions and 18 deletions
@@ -2,12 +2,18 @@
    <div class="adf-property-value">
        <mat-checkbox [attr.data-automation-id]="'card-boolean-' + property.key"
                      [attr.title]="'CORE.METADATA.ACTIONS.TOGGLE' | translate"
+                      [ngModel]="property.displayValue"
                      [checked]="property.displayValue"
                      [disabled]="!isEditable"
                      color="primary"
-                      (change)="changed($event)">
+                      (ngModelChange)="changed($event)"
+                      adf-card-view-property-validator
+                      [property]="property"
+                      (validated)="onValidation($event)"
+                      #checkbox="ngModel" >
            <div [attr.data-automation-id]="'card-boolean-label-' + property.key"
                 class="adf-property-label">{{ property.label | translate }}</div>
+            <mat-error *ngIf="checkbox.touched" [innerHTML]="error" />
        </mat-checkbox>
    </div>
 </ng-container>
@@ -16,13 +16,17 @@
 */

 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatCheckboxChange } from '@angular/material/checkbox';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { CardViewBoolItemComponent } from './card-view-boolitem.component';
 import { CardViewBoolItemModel } from '../../models/card-view-boolitem.model';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { CardViewPropertyValidatorDirective } from '../../directives/card-view-property-validator.directive';
+import { FormControl, NgModel } from '@angular/forms';
+import { MatError } from '@angular/material/form-field';
+import { Injector } from '@angular/core';
+import { MatCheckbox } from '@angular/material/checkbox';

 describe('CardViewBoolItemComponent', () => {
    let fixture: ComponentFixture<CardViewBoolItemComponent>;
@@ -170,7 +174,7 @@ describe('CardViewBoolItemComponent', () => {
            spyOn(cardViewUpdateService, 'update');
            const property = { ...component.property };

-            component.changed({ checked: true } as MatCheckboxChange);
+            component.changed(true);

            expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, true);
        });
@@ -178,7 +182,7 @@ describe('CardViewBoolItemComponent', () => {
        it('should update the property value after a changed', async () => {
            component.property.value = true;

-            component.changed({ checked: false } as MatCheckboxChange);
+            component.changed(false);

            fixture.detectChanges();
            await fixture.whenStable();
@@ -202,4 +206,35 @@ describe('CardViewBoolItemComponent', () => {
            testingUtils.clickByDataAutomationId('card-boolean-label-boolKey');
        });
    });
+
+    describe('Validation', () => {
+        let cardViewPropertyValidator: CardViewPropertyValidatorDirective;
+        let control: FormControl<string | number>;
+
+        const getCheckboxElementInjector = (): Injector => testingUtils.getByDirective(MatCheckbox).injector;
+
+        beforeEach(() => {
+            component.editable = true;
+            fixture.detectChanges();
+            const checkboxElementInjector = getCheckboxElementInjector();
+            cardViewPropertyValidator = checkboxElementInjector.get(CardViewPropertyValidatorDirective);
+            control = checkboxElementInjector.get(NgModel).control;
+        });
+
+        it('should have assigned correct property', () => {
+            expect(cardViewPropertyValidator.property).toBe(component.property);
+        });
+
+        it('should display correct error', () => {
+            cardViewPropertyValidator.validated.emit(['Error 1', 'Error 2']);
+            control.setErrors({
+                error1: 'Error 1',
+                error2: 'Error 2'
+            });
+            control.markAsTouched();
+
+            fixture.detectChanges();
+            expect(testingUtils.getByDirective(MatError).nativeElement.textContent).toBe('Error 1Error 2');
+        });
+    });
 });
@@ -16,15 +16,18 @@
 */

 import { Component, Input } from '@angular/core';
-import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { CardViewBoolItemModel } from '../../models/card-view-boolitem.model';
 import { BaseCardView } from '../base-card-view';
 import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
+import { CardViewPropertyValidatorDirective } from '../../directives/card-view-property-validator.directive';
+import { FormsModule } from '@angular/forms';
+import { MatError } from '@angular/material/form-field';

@Component({
    selector: 'adf-card-view-boolitem',
-    imports: [CommonModule, MatCheckboxModule, TranslatePipe],
+    imports: [CommonModule, MatCheckboxModule, TranslatePipe, CardViewPropertyValidatorDirective, FormsModule, MatError],
    templateUrl: './card-view-boolitem.component.html',
    styles: [
        `
@@ -38,8 +41,18 @@ export class CardViewBoolItemComponent extends BaseCardView<CardViewBoolItemMode
    @Input()
    editable: boolean;

-    changed(change: MatCheckboxChange) {
-        this.cardViewUpdateService.update({ ...this.property } as CardViewBoolItemModel, change.checked);
-        this.property.value = change.checked;
+    private _error: string;
+
+    get error(): string {
+        return this._error;
+    }
+
+    changed(checked: boolean) {
+        this.cardViewUpdateService.update({ ...this.property } as CardViewBoolItemModel, checked);
+        this.property.value = checked;
+    }
+
+    onValidation(errors: string[]): void {
+        this._error = errors.join('<br>');
    }
 }
@@ -27,12 +27,15 @@
                            >{{ property.label | translate }}
                        </mat-label>
                        <mat-select
-                            [(value)]="value"
+                            [(ngModel)]="value"
                            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
                            panelClass="adf-select-filter"
                            (selectionChange)="onChange($event)"
                            data-automation-class="select-box"
                            [aria-label]="property.label | translate"
+                            adf-card-view-property-validator
+                            [property]="property"
+                            (validated)="onValidation($event)"
                        >
                            <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" />
                            <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
@@ -40,6 +43,7 @@
                                {{ option.label | translate }}
                            </mat-option>
                        </mat-select>
+                        <mat-error [innerHTML]="error" />
                    </mat-form-field>
                </div>
            </div>
@@ -45,7 +45,7 @@
    }

    #{ms.$mat-form-field-subscript-wrapper} {
-        display: none;
+        display: block;
    }

    .adf-property-read-only {
@@ -26,6 +26,9 @@ import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { DebugElement } from '@angular/core';
+import { CardViewPropertyValidatorDirective } from '../../directives/card-view-property-validator.directive';
+import { MatError } from '@angular/material/form-field';
+import { FormControl, NgModel } from '@angular/forms';

 describe('CardViewSelectItemComponent', () => {
    let loader: HarnessLoader;
@@ -59,6 +62,8 @@ describe('CardViewSelectItemComponent', () => {
        editable: true
    };

+    const getSelectElement = (): DebugElement => testingUtils.getByDataAutomationClass('select-box');
+
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [CardViewSelectItemComponent]
@@ -96,10 +101,9 @@ describe('CardViewSelectItemComponent', () => {

            component.ngOnChanges({});
            fixture.detectChanges();
-            const selectBox = testingUtils.getByDataAutomationClass('select-box');

            expect(getReadOnlyElement()).not.toBeNull();
-            expect(selectBox).toBeNull();
+            expect(getSelectElement()).toBeNull();
        });

        it('should read only value have title', () => {
@@ -336,4 +340,37 @@ describe('CardViewSelectItemComponent', () => {
            expect(await options[1].getText()).toContain('Option 2');
        });
    });
+
+    describe('Validation', () => {
+        let cardViewPropertyValidator: CardViewPropertyValidatorDirective;
+        let control: FormControl<string | number>;
+
+        beforeEach(() => {
+            component.property = new CardViewSelectItemModel({
+                ...mockDefaultProps,
+                editable: true
+            });
+            component.editable = true;
+            fixture.detectChanges();
+            const selectElementInjector = getSelectElement().injector;
+            cardViewPropertyValidator = selectElementInjector.get(CardViewPropertyValidatorDirective);
+            control = selectElementInjector.get(NgModel).control;
+        });
+
+        it('should have assigned correct property', () => {
+            expect(cardViewPropertyValidator.property).toBe(component.property);
+        });
+
+        it('should display correct error', () => {
+            cardViewPropertyValidator.validated.emit(['Error 1', 'Error 2']);
+            control.setErrors({
+                error1: 'Error 1',
+                error2: 'Error 2'
+            });
+            control.markAsTouched();
+
+            fixture.detectChanges();
+            expect(testingUtils.getByDirective(MatError).nativeElement.textContent).toBe('Error 1Error 2');
+        });
+    });
 });
@@ -29,8 +29,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { SelectFilterInputComponent } from './select-filter-input/select-filter-input.component';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
-import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CardViewPropertyValidatorDirective } from '../../directives/card-view-property-validator.directive';

@Component({
    selector: 'adf-card-view-selectitem',
@@ -42,7 +43,9 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
        SelectFilterInputComponent,
        MatAutocompleteModule,
        MatInputModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        CardViewPropertyValidatorDirective,
+        FormsModule
    ],
    templateUrl: './card-view-selectitem.component.html',
    styleUrls: ['./card-view-selectitem.component.scss'],
@@ -50,7 +53,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
    host: { class: 'adf-card-view-selectitem' }
 })
 export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItemModel<string | number>> implements OnInit, OnChanges {
-    private appConfig = inject(AppConfigService);
    static HIDE_FILTER_LIMIT = 5;

    @Input() options$: Observable<CardViewSelectItemOption<string | number>[]>;
@@ -70,6 +72,13 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
    editedValue: string | number;

    private readonly destroyRef = inject(DestroyRef);
+    private readonly appConfig = inject(AppConfigService);
+
+    private _error = '';
+
+    get error(): string {
+        return this._error;
+    }

    ngOnChanges(changes: SimpleChanges): void {
        this.value = this.property.value;
@@ -142,6 +151,10 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
        this.property.value = selectedOption;
    }

+    onValidation(errors: string[]): void {
+        this._error = errors.join('<br>');
+    }
+
    get showProperty(): boolean {
        return this.displayEmpty || !this.property.isEmpty();
    }
@@ -38,6 +38,8 @@
                [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
                [attr.data-automation-id]="'card-textitem-value-' + property.key"
                (keydown)="undoText($event)"
+                (blur)="update()"
+                [aria-describedby]="'adf-card-textitem-error-' + property.key"
            />
            <textarea
                matInput
@@ -142,6 +144,7 @@
                (keydown.enter)="update()"
                [readonly]="!isEditable"
                [attr.data-automation-id]="'card-textitem-value-' + property.key"
+                [aria-describedby]="'adf-card-textitem-error-' + property.key"
            />
            <button
                mat-icon-button
@@ -160,7 +163,13 @@
        <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
    </div>

-    <mat-error *ngIf="isEditable && hasErrors" class="adf-textitem-error" [attr.data-automation-id]="'card-textitem-error-' + property.key">
+    <mat-error
+        *ngIf="isEditable && hasErrors"
+        class="adf-textitem-error"
+        [attr.data-automation-id]="'card-textitem-error-' + property.key"
+        [id]="'adf-card-textitem-error-' + property.key"
+        role="alert"
+        aria-live="polite">
        <ul>
            <li *ngFor="let error of errors">{{ error.message | translate : error }}</li>
        </ul>
@@ -191,6 +191,66 @@ describe('CardViewTextItemComponent', () => {
            expect(await getTextFieldValue(component.property.key)).toBe('FAKE-DEFAULT-KEY');
        });

+        it('should set errors on textInput when blur event is triggered and field is invalid', async () => {
+            component.property = new CardViewTextItemModel({
+                label: 'Name label',
+                value: { id: 123, displayName: 'User Name' },
+                key: 'namekey',
+                editable: true
+            });
+            spyOn(component.property, 'isValid').and.returnValue(false);
+            component.editable = true;
+            spyOn(component.textInput, 'setErrors');
+            const textField = await getTextField(component.property.key);
+            await textField.blur();
+
+            expect(component.textInput.setErrors).toHaveBeenCalledWith({
+                customError: true
+            });
+        });
+
+        it('should call markAsTouched on textInput when blur event is triggered and field is invalid', async () => {
+            component.property = new CardViewTextItemModel({
+                label: 'Name label',
+                value: { id: 123, displayName: 'User Name' },
+                key: 'namekey',
+                editable: true
+            });
+            spyOn(component.property, 'isValid').and.returnValue(false);
+            component.editable = true;
+            spyOn(component.textInput, 'markAsTouched');
+            const textField = await getTextField(component.property.key);
+            await textField.blur();
+
+            expect(component.textInput.markAsTouched).toHaveBeenCalled();
+        });
+
+        it('should render errors when blur event is triggered and field is invalid', async () => {
+            component.property = new CardViewTextItemModel({
+                label: 'Name label',
+                value: { id: 123, displayName: 'User Name' },
+                key: 'namekey',
+                editable: true
+            });
+            spyOn(component.property, 'isValid').and.returnValue(false);
+            spyOn(component.property, 'getValidationErrors').and.returnValue([
+                {
+                    message: 'Error 1'
+                },
+                {
+                    message: 'Error 2'
+                }
+            ] as CardViewItemValidator[]);
+            component.editable = true;
+            const textField = await getTextField(component.property.key);
+            await textField.blur();
+
+            expect(getErrorElements(component.property.key, true).map((element) => element.nativeElement.textContent)).toEqual([
+                'Error 1',
+                'Error 2'
+            ]);
+        });
+
        it('should render value when editable:true', async () => {
            component.editable = true;
            component.property.editable = true;
@@ -0,0 +1,49 @@
+/*!
+ * @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 { Directive, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, ValidationErrors } from '@angular/forms';
+import { CardViewBaseItemModel } from '../models/card-view-baseitem.model';
+import { TranslateService } from '@ngx-translate/core';
+
+@Directive({
+    selector: '[adf-card-view-property-validator]',
+    providers: [
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => CardViewPropertyValidatorDirective),
+            multi: true
+        }
+    ]
+})
+export class CardViewPropertyValidatorDirective {
+    @Input()
+    property: CardViewBaseItemModel;
+
+    @Output()
+    validated = new EventEmitter<string[]>();
+
+    constructor(private readonly translateService: TranslateService) {}
+
+    validate(control: AbstractControl): ValidationErrors | null {
+        const errors: ValidationErrors | null = this.property.isValid(control.value)
+            ? null
+            : Object.fromEntries(this.property.validators.map((validator) => [validator.message, this.translateService.instant(validator.message)]));
+        this.validated.emit(errors ? Object.values(errors) : []);
+        return errors;
+    }
+}
@@ -0,0 +1,93 @@
+/*!
+ * @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 { Component, Input } from '@angular/core';
+import { CardViewPropertyValidatorDirective } from './card-view-property-validator.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CardViewBaseItemModel, CardViewTextItemModel, UnitTestingUtils } from '@alfresco/adf-core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+    imports: [CardViewPropertyValidatorDirective, ReactiveFormsModule],
+    template: `<input [formControl]="control" adf-card-view-property-validator [property]="property" />`
+})
+class MockComponent {
+    @Input()
+    property: CardViewBaseItemModel;
+
+    control = new FormControl('');
+}
+
+describe('CardViewPropertyValidatorDirective', () => {
+    let fixture: ComponentFixture<MockComponent>;
+    let component: MockComponent;
+    let unitTestingUtils: UnitTestingUtils;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [MockComponent]
+        });
+        fixture = TestBed.createComponent(MockComponent);
+        component = fixture.componentInstance;
+        unitTestingUtils = new UnitTestingUtils(fixture.debugElement);
+    });
+
+    describe('Validation', () => {
+        let validatorDirective: CardViewPropertyValidatorDirective;
+
+        beforeEach(() => {
+            component.property = new CardViewTextItemModel({
+                label: 'Some label',
+                key: 'Some key',
+                value: 'Some value'
+            });
+            validatorDirective = unitTestingUtils.getByCSS('input').injector.get(CardViewPropertyValidatorDirective);
+            spyOn(validatorDirective.validated, 'emit');
+        });
+
+        it('should control be valid if property has valid value', () => {
+            spyOn(component.property, 'isValid').and.returnValue(true);
+
+            fixture.detectChanges();
+            expect(component.control.valid).toBeTrue();
+            expect(component.control.errors).toBeNull();
+            expect(validatorDirective.validated.emit).toHaveBeenCalledWith([]);
+        });
+
+        it('should control be invalid if property has invalid value', () => {
+            spyOn(component.property, 'isValid').and.returnValue(false);
+            const translationKey = 'ERROR_TRANSLATION_KEY';
+            component.property.validators = [
+                {
+                    isValid: (): boolean => false,
+                    message: translationKey
+                }
+            ];
+            const error = 'Some error';
+            const translateService = TestBed.inject(TranslateService);
+            spyOn(translateService, 'instant').and.returnValue(error);
+
+            fixture.detectChanges();
+            expect(component.control.valid).toBeFalse();
+            expect(component.control.errors).toEqual({
+                [translationKey]: error
+            });
+            expect(validatorDirective.validated.emit).toHaveBeenCalledWith([error]);
+        });
+    });
+});