[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();
+      });
+    });
   }
 }