[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-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'],