NAS-129774: PR update

src/app/app.routes.ts

@@ -140,13 +140,6 @@ export const rootRouterConfig: Routes = [
         path: 'system/audit',
         loadChildren: () => import('./pages/audit/audit.module').then((module) => module.AuditModule),
       },
-      {
-        path: 'errors',
-        children: [{
-          path: 'unauthorized',
-          loadChildren: () => import('./pages/unauthorized/unauthorized.module').then((module) => module.UnauthorizedModule),
-        }],
-      },
     ],
   },
   {

src/app/directives/common/new-feature-indicator/new-feature-indicator-wrapper.component.html

@@ -14,6 +14,7 @@ <h5 class="tooltip-title">
           mat-icon-button
           ixTest="tooltip-close"
           class="close-button"
+          [attr.aria-label]="'Close Tooltip' | translate"
           (click)="popperTooltip.hide()"
         >
           <ix-icon

src/app/directives/common/ui-search.directive.ts

@@ -17,6 +17,20 @@ export class UiSearchDirective implements OnInit, OnDestroy {
     return getSearchableElementId(this.config);
   }
 
+  get ariaLabel(): string {
+    const hierarchyItem = this.config.hierarchy?.[this.config.hierarchy.length - 1] || '';
+    const isSingleWord = hierarchyItem.trim().split(/\s+/).length === 1;
+
+    if (isSingleWord && this.config.synonyms?.length > 0) {
+      return this.config.synonyms.reduce((best, synonym) => {
+        const synonymWordCount = synonym.trim().split(/\s+/).length;
+        const bestWordCount = best.trim().split(/\s+/).length;
+        return synonymWordCount > bestWordCount ? synonym : best;
+      }, hierarchyItem);
+    }
+    return hierarchyItem;
+  }
+
   constructor(
     private renderer: Renderer2,
     private elementRef: ElementRef<HTMLElement>,
@@ -26,6 +40,7 @@ export class UiSearchDirective implements OnInit, OnDestroy {
   ngOnInit(): void {
     if (this.id) {
       this.renderer.setAttribute(this.elementRef.nativeElement, 'id', this.id);
+      this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-label', this.ariaLabel);
     }
     this.searchDirectives.register(this);
   }

src/app/enums/directory-service-state.enum.ts

@@ -1,7 +1,17 @@
+import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+
 export enum DirectoryServiceState {
   Disabled = 'DISABLED',
   Healthy = 'HEALTHY',
   Faulted = 'FAULTED',
   Leaving = 'LEAVING',
   Joining = 'JOINING',
 }
+
+export const directoryServiceStateLabels = new Map<DirectoryServiceState, string>([
+  [DirectoryServiceState.Disabled, T('Disabled')],
+  [DirectoryServiceState.Healthy, T('Healthy')],
+  [DirectoryServiceState.Faulted, T('Faulted')],
+  [DirectoryServiceState.Leaving, T('Leaving')],
+  [DirectoryServiceState.Joining, T('Joining')],
+]);

src/app/modules/dialog/components/job-progress/job-progress-dialog.component.html

@@ -56,6 +56,7 @@ <h5>{{ 'Logs' | translate }}</h5>
     mat-button
     ixTest="abort"
     [disabled]="isAbortingJob"
+    [attr.aria-label]="'Abort Job' | translate"
     (click)="abortJob()"
   >
     {{ isAbortingJob ? ('Aborting...' | translate) : ('Abort' | translate) }}
@@ -67,6 +68,7 @@ <h5>{{ 'Logs' | translate }}</h5>
     mat-icon-button
     mat-dialog-close="close"
     ixTest="close"
+    [aria-label]="'Hide Job' | translate: { jobMethod: job.method }"
   >
     <ix-icon name="remove"></ix-icon>
   </button>

src/app/modules/entity/entity-job/entity-job.component.html

@@ -81,6 +81,7 @@ <h5>{{ 'Logs' | translate }}</h5>
       mat-icon-button
       mat-dialog-close="close"
       ixTest="close"
+      [aria-label]="'Close Job' | translate"
     >
       <ix-icon name="close"></ix-icon>
     </button>
@@ -102,6 +103,7 @@ <h5>{{ 'Logs' | translate }}</h5>
       mat-icon-button
       mat-dialog-close="close"
       ixTest="close"
+      [aria-label]="'Hide Job' | translate"
     >
       <ix-icon name="remove"></ix-icon>
     </button>

src/app/modules/feedback/components/feedback-dialog/feedback-dialog.component.html

@@ -7,6 +7,7 @@ <h1 matDialogTitle>{{ 'Send Feedback' | translate }}</h1>
   mat-dialog-close
   class="close-feedback-dialog"
   ixTest="close-feedback-dialog"
+  [aria-label]="'Close Feedback Dialog' | translate"
 >
   <ix-icon name="clear"></ix-icon>
 </button>

src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html

@@ -63,6 +63,7 @@
     >
       <ix-list-item
         *ngFor="let element of getFormArray.controls; let i = index"
+        [label]="dynamicSchema.title | translate"
         [canDelete]="!isAllListControlsDisabled"
         (delete)="removeControl(i)"
       >

src/app/modules/forms/ix-forms/components/ix-input/ix-input.component.html

@@ -45,6 +45,7 @@
     type="button"
     class="toggle_pw"
     [ixTest]="['toggle-password', controlDirective.name]"
+    [attr.aria-label]="showPassword ? ('Hide Password' | translate) : ('Show Password' | translate)"
     (click)="onPasswordToggled()"
   >
     <ix-icon

src/app/modules/forms/ix-forms/components/ix-list/ix-list-item/ix-list-item.component.html

@@ -5,6 +5,7 @@
     type="button"
     class="delete-btn"
     ixTest="remove-from-list"
+    [attr.aria-label]="'Remove {label} item' | translate: { label }"
     (click)="deleteItem()"
   >
     <ix-icon name="clear"></ix-icon>

src/app/modules/forms/ix-forms/components/ix-list/ix-list-item/ix-list-item.component.ts

@@ -1,6 +1,6 @@
 import {
   ChangeDetectionStrategy,
-  Component, EventEmitter, input, Output,
+  Component, EventEmitter, Input, input, Output,
 } from '@angular/core';
 
 @Component({
@@ -11,6 +11,7 @@ import {
 })
 export class IxListItemComponent {
   readonly canDelete = input(true);
+  @Input() label?: string;
   @Output() delete = new EventEmitter<void>();
 
   deleteItem(): void {

src/app/modules/forms/ix-forms/components/ix-list/ix-list.component.html

@@ -13,6 +13,7 @@
       type="button"
       class="add-btn"
       [ixTest]="['add-item', label]"
+      [attr.aria-label]="'Add {item}' | translate: { item: label }"
       (click)="addItem()"
     >
       {{ 'Add' | translate }}

src/app/modules/forms/ix-forms/components/ix-select/ix-select.component.html

@@ -14,7 +14,7 @@
       [disabled]="disabledState"
       [multiple]="multiple"
       [ixTest]="controlDirective.name"
-      [attr.aria-label]="label"
+      [aria-label]="label"
       [(ngModel)]="value"
       (blur)="onTouch()"
       (ngModelChange)="onChange($event)"

src/app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header/ix-modal-header.component.html

@@ -13,6 +13,8 @@ <h3 class="ix-formtitle">
       tabindex="0"
       name="cancel"
       id="ix-close-icon"
+      type="button"
+      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title }"
       (click)="close()"
       (keydown.enter)="close()"
     ></ix-icon>

src/app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header2/ix-modal-header2.component.html

@@ -1,14 +1,15 @@
 <div
   class="ix-slidein-title-bar"
   fxLayout="row"
-  [fxLayoutAlign]="componentsSize > 1 ? 'left center' : 'space-between center'"
+  [fxLayoutAlign]="componentsSize() > 1 ? 'left center' : 'space-between center'"
 >
-  <ng-container *ngIf="componentsSize > 1 && !disableClose">
+  <ng-container *ngIf="componentsSize() > 1 && !disableClose">
     <button
       mat-icon-button
       id="ix-close-icon"
       [ixTest]="['close-slide-in']"
       [matTooltip]="tooltip"
+      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title }"
       (click)="close()"
     >
       <ix-icon name="mdi-chevron-left" ></ix-icon>
@@ -18,12 +19,13 @@ <h3 class="ix-form-title">
     {{ title | translate }}
     <ix-readonly-badge *ngIf="requiredRoles?.length && !(hasRequiredRoles | async)"></ix-readonly-badge>
   </h3>
-  <ng-container *ngIf="componentsSize <= 1 && !disableClose">
+  <ng-container *ngIf="componentsSize() <= 1 && !disableClose">
     <button
       mat-icon-button
       id="ix-close-icon"
       [ixTest]="['close-slide-in']"
       [matTooltip]="tooltip"
+      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title }"
       (click)="close()"
     >
       <ix-icon name="cancel" (keydown.enter)="close()"></ix-icon>

src/app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header2/ix-modal-header2.component.spec.ts

@@ -0,0 +1,89 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { CommonModule } from '@angular/common';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { mockProvider, Spectator, createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { Subject } from 'rxjs';
+import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
+import { ChainedRef } from 'app/modules/forms/ix-forms/components/ix-slide-in/chained-component-ref';
+import { IxModalHeader2Component } from 'app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header2/ix-modal-header2.component';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+import { CloudBackupFormComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-form/cloud-backup-form.component';
+import { CloudSyncWizardComponent } from 'app/pages/data-protection/cloudsync/cloudsync-wizard/cloudsync-wizard.component';
+import { ChainedComponentResponse, ChainedComponentSerialized, IxChainedSlideInService } from 'app/services/ix-chained-slide-in.service';
+
+describe('IxModalHeader2Component', () => {
+  let spectator: Spectator<IxModalHeader2Component>;
+  const components$ = new Subject<ChainedComponentSerialized[]>();
+  const closeSubject$ = new Subject<ChainedComponentResponse>();
+  const backSubject$ = new Subject<ChainedComponentResponse>();
+  let loader: HarnessLoader;
+  const createComponent = createComponentFactory({
+    component: IxModalHeader2Component,
+    imports: [
+      CommonModule,
+      FlexLayoutModule,
+    ],
+    declarations: [
+      MockComponent(CloudSyncWizardComponent),
+    ],
+    providers: [
+      mockAuth(),
+      mockProvider(IxChainedSlideInService, {
+        components$,
+      }),
+      mockProvider(ChainedRef, {
+        close: jest.fn(),
+        getData: jest.fn(() => undefined),
+        swap: jest.fn(),
+      }),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({
+      props: {
+        title: 'Add Cloudsync Task',
+        loading: false,
+      },
+    });
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+  });
+
+  it('shows proper title', () => {
+    const title = spectator.query('.ix-form-title');
+    expect(title.textContent).toBe(' Add Cloudsync Task ');
+  });
+
+  it('shows a working close button when only 1 component is in the queue', async () => {
+    const closeButton = await loader.getHarness(MatButtonHarness.with({ selector: '#ix-close-icon' }));
+    await closeButton.click();
+    expect(spectator.inject(ChainedRef).close).toHaveBeenCalledWith({ response: false, error: null });
+    const icon = spectator.query(IxIconComponent);
+    expect(icon.name()).toBe('cancel');
+  });
+
+  it('shows a working back button when more than 1 component is in the queue', async () => {
+    components$.next([{
+      id: 'id',
+      component: CloudSyncWizardComponent,
+      close$: closeSubject$,
+      data: undefined,
+      wide: false,
+    }, {
+      id: 'id2',
+      component: CloudBackupFormComponent,
+      close$: backSubject$,
+      data: undefined,
+      wide: false,
+    }] as ChainedComponentSerialized[]);
+    spectator.detectChanges();
+    const closeButton = await loader.getHarness(MatButtonHarness.with({ selector: '#ix-close-icon' }));
+    await closeButton.click();
+    expect(spectator.inject(ChainedRef).close).toHaveBeenCalledWith({ response: false, error: null });
+    const icon = spectator.query(IxIconComponent);
+    expect(icon.name()).toBe('mdi-chevron-left');
+  });
+});

src/app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header2/ix-modal-header2.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit, ChangeDetectionStrategy, Component, Input,
+  signal,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
@@ -21,7 +22,7 @@ export class IxModalHeader2Component implements AfterViewInit {
   @Input() loading: boolean;
   @Input() disableClose = false;
   @Input() requiredRoles: Role[] = [];
-  componentsSize = 1;
+  componentsSize = signal(1);
 
   get hasRequiredRoles(): Observable<boolean> {
     return this.authService.hasRole(this.requiredRoles);
@@ -40,7 +41,7 @@ export class IxModalHeader2Component implements AfterViewInit {
     this.chainedSlideIn.components$.pipe(
       untilDestroyed(this),
     ).subscribe((components) => {
-      this.componentsSize = components.length;
+      this.componentsSize.set(components.length);
       if (components.length > 1) {
         this.tooltip = this.translate.instant('Go back to the previous form');
       } else {