From 7d0133af35d19757c6600aa2ed312fddd36965a6 Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:02:49 +0100
Subject: [PATCH] [ACS-10309] screen reader personal files new process dialog
 does not announce any semantics (#5008)

* [ACS-10309] Fixed reading for screen reader for save search dialog

* [ACS-10309] Unit tests
---
 .../dialog/save-search-dialog.component.html  |  7 +-
 .../dialog/save-search-dialog.component.ts    |  3 +-
 .../save-search-directive-dialog-data.ts      | 27 ++++++
 .../directive/save-search.directive.spec.ts   | 84 ++++++++++++-------
 .../directive/save-search.directive.ts        | 15 ++--
 5 files changed, 98 insertions(+), 38 deletions(-)
 create mode 100644 projects/aca-content/src/lib/components/search/search-save/dialog/save-search-directive-dialog-data.ts

diff --git a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.html b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.html
index a19a5e803..c52560a4c 100644
--- a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.html
+++ b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.html
@@ -1,5 +1,9 @@
 <div class="aca-save-search-dialog__header">
-    <h2 class="aca-save-search-dialog__title">{{"APP.BROWSE.SEARCH.SAVE_SEARCH.MODAL_HEADER" | translate}}</h2>
+    <h2
+      id="aca-save-search-dialog-title"
+      class="aca-save-search-dialog__title">
+      {{"APP.BROWSE.SEARCH.SAVE_SEARCH.MODAL_HEADER" | translate}}
+    </h2>
     <button
       mat-icon-button
       mat-dialog-close
@@ -20,7 +24,6 @@
         matInput
         required
         [formControlName]="'name'"
-        adf-auto-focus
       />
 
       <mat-error *ngIf="form.controls['name'].touched">
diff --git a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.ts b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.ts
index e7c97e983..f310a0682 100644
--- a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.ts
+++ b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.ts
@@ -34,7 +34,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NotificationService } from '@alfresco/adf-core';
-import { AutoFocusDirective, forbidOnlySpaces } from '@alfresco/adf-content-services';
+import { forbidOnlySpaces } from '@alfresco/adf-content-services';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { take } from 'rxjs/operators';
 import { UniqueSearchNameValidator } from './unique-search-name-validator';
@@ -53,7 +53,6 @@ import { SavedSearchesContextService } from '../../../../services/saved-searches
     A11yModule,
     MatCheckboxModule,
     FormsModule,
-    AutoFocusDirective,
     ReactiveFormsModule,
     MatDialogModule
   ],
diff --git a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-directive-dialog-data.ts b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-directive-dialog-data.ts
new file mode 100644
index 000000000..e158d4343
--- /dev/null
+++ b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-directive-dialog-data.ts
@@ -0,0 +1,27 @@
+/*!
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Alfresco Example Content Application
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail. Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export interface SaveSearchDirectiveDialogData {
+  searchUrl: string;
+}
diff --git a/projects/aca-content/src/lib/components/search/search-save/directive/save-search.directive.spec.ts b/projects/aca-content/src/lib/components/search/search-save/directive/save-search.directive.spec.ts
index 553c5caf4..fdc73de9d 100644
--- a/projects/aca-content/src/lib/components/search/search-save/directive/save-search.directive.spec.ts
+++ b/projects/aca-content/src/lib/components/search/search-save/directive/save-search.directive.spec.ts
@@ -24,11 +24,13 @@
 
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
 import { of, Subject } from 'rxjs';
 import { SaveSearchDirective } from './save-search.directive';
 import { SaveSearchDialogComponent } from '../dialog/save-search-dialog.component';
+import { SaveSearchDirectiveDialogData } from '../dialog/save-search-directive-dialog-data';
+import { OverlayContainer } from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-test-component',
@@ -49,11 +51,6 @@ describe('SaveSearchDirective', () => {
   let element: DebugElement;
   let dialog: MatDialog;
 
-  const event = {
-    type: 'click',
-    preventDefault: jasmine.createSpy('preventDefault')
-  };
-
   beforeEach(() => {
     void TestBed.configureTestingModule({
       imports: [SaveSearchDirective, TestComponent],
@@ -75,36 +72,65 @@ describe('SaveSearchDirective', () => {
     fixture.detectChanges();
   });
 
-  it('should prevent the default click action', () => {
-    element.triggerEventHandler('click', event);
-    expect(event.preventDefault).toHaveBeenCalled();
-  });
+  describe('Click on save search directive', () => {
+    it('should prevent the default click action', () => {
+      const event = new MouseEvent('click');
+      spyOn(event, 'preventDefault');
 
-  it('should open the dialog with the correct configuration', () => {
-    spyOn(dialog, 'open');
-    element.triggerEventHandler('click', event);
+      element.nativeElement.dispatchEvent(event);
+      expect(event.preventDefault).toHaveBeenCalled();
+    });
 
-    const expectedConfig = {
-      data: { searchUrl: 'encodedQuery' },
-      restoreFocus: true
-    };
+    it('should open the dialog with the correct configuration', () => {
+      spyOn(dialog, 'open');
+      element.nativeElement.click();
 
-    expect(dialog.open).toHaveBeenCalledWith(SaveSearchDialogComponent, expectedConfig);
-  });
+      const expectedConfig: MatDialogConfig<SaveSearchDirectiveDialogData> = {
+        data: { searchUrl: 'encodedQuery' },
+        restoreFocus: true,
+        ariaLabelledBy: 'aca-save-search-dialog-title'
+      };
 
-  it('should emit event on save search success', () => {
-    const afterClosed$ = new Subject<boolean>();
+      expect(dialog.open).toHaveBeenCalledWith(SaveSearchDialogComponent, expectedConfig);
+    });
 
-    spyOn(dialog, 'open').and.returnValue({
-      afterClosed: () => afterClosed$.asObservable()
-    } as MatDialogRef<SaveSearchDialogComponent>);
+    it('should call setAttribute on container element', () => {
+      const overlayContainer = TestBed.inject(OverlayContainer);
+      const containerElement = document.createElement('div');
+      spyOn(containerElement, 'setAttribute');
+      spyOn(overlayContainer, 'getContainerElement').and.returnValue(containerElement);
 
-    element.triggerEventHandler('click', event);
+      element.nativeElement.click();
+      expect(containerElement.setAttribute).toHaveBeenCalledWith('role', 'dialog');
+    });
 
-    afterClosed$.next(true);
-    afterClosed$.complete();
-    fixture.detectChanges();
+    it('should open the dialog with the correct configuration', () => {
+      spyOn(dialog, 'open');
+      element.nativeElement.click();
 
-    expect(fixture.componentInstance.isSavedWithSuccess).toBe(true);
+      const expectedConfig: MatDialogConfig<SaveSearchDirectiveDialogData> = {
+        data: { searchUrl: 'encodedQuery' },
+        restoreFocus: true,
+        ariaLabelledBy: 'aca-save-search-dialog-title'
+      };
+
+      expect(dialog.open).toHaveBeenCalledWith(SaveSearchDialogComponent, expectedConfig);
+    });
+
+    it('should emit event on save search success', () => {
+      const afterClosed$ = new Subject<boolean>();
+
+      spyOn(dialog, 'open').and.returnValue({
+        afterClosed: () => afterClosed$.asObservable()
+      } as MatDialogRef<SaveSearchDialogComponent>);
+
+      element.nativeElement.click();
+
+      afterClosed$.next(true);
+      afterClosed$.complete();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isSavedWithSuccess).toBe(true);
+    });
   });
 });
diff --git a/projects/aca-content/src/lib/components/search/search-save/directive/save-search.directive.ts b/projects/aca-content/src/lib/components/search/search-save/directive/save-search.directive.ts
index 7abc8ffd9..004506bbc 100644
--- a/projects/aca-content/src/lib/components/search/search-save/directive/save-search.directive.ts
+++ b/projects/aca-content/src/lib/components/search/search-save/directive/save-search.directive.ts
@@ -26,10 +26,8 @@ import { DestroyRef, Directive, ElementRef, EventEmitter, HostListener, inject,
 import { MatDialog } from '@angular/material/dialog';
 import { SaveSearchDialogComponent } from '../dialog/save-search-dialog.component';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-interface SaveSearchDirectiveDialogData {
-  searchUrl: string;
-}
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { SaveSearchDirectiveDialogData } from '../dialog/save-search-directive-dialog-data';
 
 @Directive({
   selector: '[acaSaveSearch]',
@@ -48,6 +46,8 @@ export class SaveSearchDirective {
   private readonly dialogRef = inject(MatDialog);
   private readonly elementRef = inject(ElementRef<HTMLElement>);
 
+  constructor(private readonly overlayContainer: OverlayContainer) {}
+
   @HostListener('click', ['$event'])
   onClick(event: MouseEvent) {
     event.preventDefault();
@@ -56,7 +56,12 @@ export class SaveSearchDirective {
   }
 
   private openDialog(): void {
-    const dialog = this.dialogRef.open(SaveSearchDialogComponent, { ...this.getDialogConfig(), restoreFocus: true });
+    this.overlayContainer.getContainerElement().setAttribute('role', 'dialog');
+    const dialog = this.dialogRef.open(SaveSearchDialogComponent, {
+      ...this.getDialogConfig(),
+      restoreFocus: true,
+      ariaLabelledBy: 'aca-save-search-dialog-title'
+    });
     dialog
       .afterClosed()
       .pipe(takeUntilDestroyed(this.destroyRef))