[ACS-11350] Fixed focusing after collapsing sidenav menu (#5168)

* [ACS-11350] Fixed focusing after collapsing sidenav menu

* [ACS-11350] Addressed copilot comments

* [ACS-11350] Addressed copilot comments

* [ACS-11350] Addressed copilot comments

projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.html

@@ -4,7 +4,8 @@
       class="aca-sidenav-header-title-logo"
       data-automation-id="app-sidenav-header-title-logo"
       (click)="toggleNavBar.emit()"
-      [attr.aria-label]="'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate">
+      [attr.aria-label]="'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate"
+      #toggleNavbarButton>
       <img
         src="{{ logoUrl }}"
         title="{{ 'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate }}"

projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.spec.ts

@@ -0,0 +1,83 @@
+/*!
+ * 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/>.
+ */
+
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { SidenavHeaderComponent } from './sidenav-header.component';
+import { NoopAuthModule, NoopTranslateModule, UnitTestingUtils } from '@alfresco/adf-core';
+import { AppService } from '@alfresco/aca-shared';
+import { Subject } from 'rxjs';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideMockStore } from '@ngrx/store/testing';
+
+describe('SidenavHeaderComponent', () => {
+  let fixture: ComponentFixture<SidenavHeaderComponent>;
+  let unitTestingUtils: UnitTestingUtils;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SidenavHeaderComponent, NoopAuthModule, NoopTranslateModule],
+      providers: [
+        {
+          provide: AppService,
+          useValue: {
+            toggleAppNavBar$: new Subject()
+          }
+        },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideMockStore({
+          initialState: {
+            app: {
+              selection: {}
+            }
+          }
+        })
+      ]
+    });
+    fixture = TestBed.createComponent(SidenavHeaderComponent);
+    unitTestingUtils = new UnitTestingUtils(fixture.debugElement);
+  });
+
+  describe('Toggle navbar button', () => {
+    let toggleSidenavButton: Element;
+
+    beforeEach(() => {
+      document.body.focus();
+      fixture.detectChanges();
+      toggleSidenavButton = unitTestingUtils.getByCSS('.aca-sidenav-header-title-logo').nativeElement;
+    });
+
+    it('should be focused when toggleAppNavBar$ emits on AppService', fakeAsync(() => {
+      TestBed.inject(AppService).toggleAppNavBar$.next();
+      tick();
+
+      expect(toggleSidenavButton).toBe(document.activeElement);
+    }));
+
+    it('should not be focused when toggleAppNavBar$ does not emit on AppService', () => {
+      expect(toggleSidenavButton).not.toBe(document.activeElement);
+    });
+  });
+});

projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.ts

@@ -22,9 +22,9 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, DestroyRef, EventEmitter, inject, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, ElementRef, EventEmitter, inject, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
-import { AppExtensionService, AppSettingsService, ToolbarComponent } from '@alfresco/aca-shared';
+import { AppExtensionService, AppService, AppSettingsService, ToolbarComponent } from '@alfresco/aca-shared';
 import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
@@ -38,6 +38,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   host: { class: 'app-sidenav-header' }
 })
 export class SidenavHeaderComponent implements OnInit {
+  private readonly appService = inject(AppService);
   private readonly appSettings = inject(AppSettingsService);
   private readonly appExtensions = inject(AppExtensionService);
 
@@ -51,6 +52,9 @@ export class SidenavHeaderComponent implements OnInit {
   @Output()
   toggleNavBar = new EventEmitter();
 
+  @ViewChild('toggleNavbarButton')
+  private readonly toggleNavbarButton!: ElementRef<HTMLButtonElement>;
+
   ngOnInit() {
     this.appExtensions
       .getHeaderActions()
@@ -58,5 +62,10 @@ export class SidenavHeaderComponent implements OnInit {
       .subscribe((actions) => {
         this.actions = actions;
       });
+    this.appService.toggleAppNavBar$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      setTimeout(() => {
+        this.toggleNavbarButton.nativeElement.focus();
+      });
+    });
   }
 }

projects/aca-shared/src/lib/components/page-layout/page-layout.component.html

@@ -3,7 +3,9 @@
       mat-icon-button
       class="aca-content-header-button"
       (click)="toggleClick()"
-      title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
+      [attr.aria-label]="'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate"
+      title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}"
+      adf-auto-focus>
       <mat-icon>keyboard_double_arrow_right</mat-icon>
     </button>
     <ng-content select=".aca-page-layout-header, aca-page-layout-header" />

projects/aca-shared/src/lib/components/page-layout/page-layout.component.spec.ts

@@ -26,10 +26,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PageLayoutComponent } from './page-layout.component';
 import { AppService } from '../../services/app.service';
 import { BehaviorSubject, Subject } from 'rxjs';
+import { NoopTranslateModule, UnitTestingUtils } from '@alfresco/adf-core';
+import { AutoFocusDirective } from '@alfresco/adf-content-services';
+import { DebugElement } from '@angular/core';
 
 describe('PageLayoutComponent', () => {
   let fixture: ComponentFixture<PageLayoutComponent>;
-  let component: PageLayoutComponent;
+  let unitTestingUtils: UnitTestingUtils;
+
   const appServiceMock = {
     toggleAppNavBar$: new Subject(),
     appNavNarMode$: new BehaviorSubject<'collapsed' | 'expanded'>('expanded')
@@ -37,7 +41,7 @@ describe('PageLayoutComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [PageLayoutComponent],
+      imports: [PageLayoutComponent, NoopTranslateModule],
       providers: [
         {
           provide: AppService,
@@ -46,12 +50,28 @@ describe('PageLayoutComponent', () => {
       ]
     });
     fixture = TestBed.createComponent(PageLayoutComponent);
-    component = fixture.componentInstance;
+    unitTestingUtils = new UnitTestingUtils(fixture.debugElement);
   });
 
-  it('should toggle the appService toggleAppNavBar$ Subject', () => {
-    spyOn(appServiceMock.toggleAppNavBar$, 'next');
-    component.toggleClick();
-    expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled();
+  describe('Expand button', () => {
+    let expandButton: DebugElement;
+
+    beforeEach(() => {
+      appServiceMock.appNavNarMode$.next('collapsed');
+      fixture.detectChanges();
+      expandButton = unitTestingUtils.getByCSS('.aca-content-header-button');
+    });
+
+    it('should toggle the appService toggleAppNavBar$ Subject', () => {
+      spyOn(appServiceMock.toggleAppNavBar$, 'next');
+
+      expandButton.nativeElement.click();
+      expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled();
+    });
+
+    it('should have AutoFocusDirective', () => {
+      fixture.detectChanges();
+      expect(expandButton.injector.get(AutoFocusDirective, null)).not.toBeNull();
+    });
   });
 });

projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts

@@ -30,9 +30,10 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AutoFocusDirective } from '@alfresco/adf-content-services';
 
 @Component({
-  imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule],
+  imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule, AutoFocusDirective],
   selector: 'aca-page-layout',
   templateUrl: './page-layout.component.html',
   styleUrls: ['./page-layout.component.scss'],