328405692: (fix) [a11y] add validation, error messages, hints for filters modal

modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html

@@ -21,21 +21,44 @@
       appearance="outline"
       class="text-field"
       *ngIf="data.filter === FilterName.DeviceInfo">
+      <mat-label>Device</mat-label>
       <input
         class="text-field-input"
         formControlName="deviceInfo"
         matInput
         aria-label="device name" />
+      <mat-hint>Please enter device model name</mat-hint>
+      <mat-error
+        *ngIf="deviceInfo.hasError('invalid_format')"
+        role="alert"
+        aria-live="assertive">
+        <span
+          >Please, check. The device model name must be a maximum of 64
+          characters. Only letters, numbers, and accented letters are
+          permitted.</span
+        >
+      </mat-error>
     </mat-form-field>
     <mat-form-field
       appearance="outline"
       class="text-field"
       *ngIf="data.filter === FilterName.DeviceFirmware">
+      <mat-label>Firmware</mat-label>
       <input
-        class="text-field-input"
+        class="text-field-input firmware-input"
         formControlName="deviceFirmware"
         matInput
         aria-label="device firmware" />
+      <mat-hint>Please enter firmware name</mat-hint>
+      <mat-error
+        *ngIf="deviceFirmware.hasError('invalid_format')"
+        role="alert"
+        aria-live="assertive">
+        <span
+          >Please, check. The firmware name must be a maximum of 64 characters.
+          Only letters, numbers, and accented letters are permitted.</span
+        >
+      </mat-error>
     </mat-form-field>
     <div formArrayName="results" *ngIf="data.filter === FilterName.Results">
       <p
@@ -47,20 +70,34 @@
       </p>
     </div>
   </form>
+
   <ng-container *ngIf="data.filter === FilterName.Started">
     <mat-form-field appearance="outline" class="date-field">
+      <mat-label>mm/dd/yyyy - mm/dd/yyyy</mat-label>
       <mat-date-range-input>
         <input
           matStartDate
           placeholder="mm/dd/yyyy"
           [(ngModel)]="range.start"
+          #startDate="ngModel"
           (dateChange)="startDateChanged($event)" />
         <input
           matEndDate
           placeholder="mm/dd/yyyy"
           [(ngModel)]="range.end"
+          #endDate="ngModel"
           (dateChange)="endDateChanged($event)" />
       </mat-date-range-input>
+      <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
+      <mat-error
+        *ngIf="
+          (startDate.invalid && (startDate.dirty || startDate.touched)) ||
+          (endDate.invalid && (endDate.dirty || endDate.touched))
+        "
+        role="alert"
+        aria-live="assertive">
+        <span>Please, select the correct date range in MM/DD/YYYY format.</span>
+      </mat-error>
     </mat-form-field>
 
     <mat-calendar

modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.scss

@@ -64,3 +64,16 @@
     padding-bottom: 20px;
   }
 }
+
+.text-field {
+  padding-bottom: 10px;
+
+  &::ng-deep.mat-mdc-form-field-subscript-wrapper:has(mat-error) {
+    height: 60px;
+  }
+
+  &::ng-deep.mat-mdc-form-field-hint-wrapper,
+  &::ng-deep.mat-mdc-form-field-error-wrapper {
+    padding: 0 10px;
+  }
+}

modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts

@@ -129,6 +129,50 @@ describe('FilterDialogComponent', () => {
     closeSpy.calls.reset();
   });
 
+  it('should not close dialog with invalid date on "confirm" click', () => {
+    fixture.detectChanges();
+    component.filterForm.get('deviceInfo')?.setValue('as&@3$');
+    const closeSpy = spyOn(component.dialogRef, 'close');
+    const confirmButton = compiled.querySelector(
+      '.confirm-button'
+    ) as HTMLButtonElement;
+
+    confirmButton?.click();
+
+    expect(closeSpy).not.toHaveBeenCalled();
+
+    closeSpy.calls.reset();
+  });
+
+  it('should have "invalid_format" error if field does not satisfy validation rules', () => {
+    [
+      'very long value very long value very long value very long value very long value very long value very long',
+      'as&@3$',
+    ].forEach(value => {
+      component.data = {
+        trigger: mockClientRest,
+        filter: FilterName.DeviceFirmware,
+      };
+      fixture.detectChanges();
+
+      const firmware: HTMLInputElement = compiled.querySelector(
+        '.firmware-input'
+      ) as HTMLInputElement;
+      firmware.value = value;
+      firmware.dispatchEvent(new Event('input'));
+      component.deviceFirmware.markAsTouched();
+      fixture.detectChanges();
+
+      const firmwareError = compiled.querySelector('mat-error')?.innerHTML;
+      const error = component.deviceFirmware.hasError('invalid_format');
+
+      expect(error).toBeTruthy();
+      expect(firmwareError).toContain(
+        'The firmware name must be a maximum of 64 characters. Only letters, numbers, and accented letters are permitted.'
+      );
+    });
+  });
+
   describe('date filter', () => {
     beforeEach(() => {
       component.data = {

modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts

@@ -31,11 +31,13 @@ import {
 } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import {
+  AbstractControl,
   FormArray,
   FormBuilder,
   FormControl,
   FormGroup,
   FormsModule,
+  NgModel,
   ReactiveFormsModule,
 } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -57,6 +59,7 @@ import {
 } from '../../../../model/filters';
 import { EscapableDialogComponent } from '../../../../components/escapable-dialog/escapable-dialog.component';
 import { StatusOfTestResult } from '../../../../model/testrun-status';
+import { DeviceValidators } from '../../../devices/components/device-form/device.validators';
 
 interface DialogData {
   trigger: ElementRef;
@@ -116,15 +119,26 @@ export class FilterDialogComponent
   }
 
   @ViewChild(MatCalendar) calendar!: MatCalendar<Date>;
+  @ViewChild('startDate') startDate!: NgModel;
+  @ViewChild('endDate') endDate!: NgModel;
 
   constructor(
     public override dialogRef: MatDialogRef<FilterDialogComponent>,
+    private deviceValidators: DeviceValidators,
     @Inject(MAT_DIALOG_DATA) public data: DialogData,
     private fb: FormBuilder
   ) {
     super(dialogRef);
   }
 
+  get deviceInfo() {
+    return this.filterForm.get('deviceInfo') as AbstractControl;
+  }
+
+  get deviceFirmware() {
+    return this.filterForm.get('deviceFirmware') as AbstractControl;
+  }
+
   ngOnInit() {
     this.setDialogView();
     this.createFilterForm();
@@ -147,8 +161,8 @@ export class FilterDialogComponent
   }
   private createFilterForm() {
     this.filterForm = this.fb.group({
-      deviceInfo: [''],
-      deviceFirmware: [''],
+      deviceInfo: ['', [this.deviceValidators.deviceStringFormat()]],
+      deviceFirmware: ['', [this.deviceValidators.deviceStringFormat()]],
       results: new FormArray(this.resultList.map(() => new FormControl(false))),
     });
   }
@@ -175,6 +189,14 @@ export class FilterDialogComponent
   }
 
   confirm(): void {
+    if (
+      this.filterForm?.invalid ||
+      this.startDate?.invalid ||
+      this.endDate?.invalid
+    ) {
+      return;
+    }
+
     const formData = this.filterForm.value;
     const results = this.resultList
       .filter((item, i) => {