[ADF-4973] CLONE - Header - sidenav menu button expanded/collapsed state not exposed via ARIA (#5179)

* Set aria expanded for the sidenav toggle bar

* Define initialSidenavExpanded which can be set in the demo shell than as taken the same true or false value as the sideNav.expandedSidenav value.

* Added some unit tests for the sidenav toggle aria-expanded behaviour

* Update lib/core/layout/components/header/header.component.ts

Co-Authored-By: Denys Vuika <denys.vuika@alfresco.com>

* Update lib/core/layout/components/header/header.component.html

Co-Authored-By: Denys Vuika <denys.vuika@alfresco.com>

* Update demo-shell/src/app/components/app-layout/app-layout.component.html

Co-Authored-By: Denys Vuika <denys.vuika@alfresco.com>

* Update lib/core/layout/components/header/header.component.html

Co-Authored-By: Denys Vuika <denys.vuika@alfresco.com>

* As suggested from Denys remove initialSidnavExpanded property as we already have expandedSidenav

* As suggested from Denys remove initialSidnavExpanded property as we already have expandedSidenav

* As suggested from Denys remove initialSidnavExpanded property as we already have expandedSidenav

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -5,8 +5,8 @@
         <ng-template let-toggleMenu="toggleMenu">
 
             <adf-layout-header id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo"
-                [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" [position]="position"
+                [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [expandedSidenav]="expandedSidenav"
-                (clicked)=toggleMenu($event)>
+                [color]="color" [position]="position" (clicked)=toggleMenu($event)>
 
                 <div class="app-layout-menu-spacer"></div>
 

lib/core/layout/components/header/header.component.html

@@ -10,6 +10,7 @@
         class="mat-icon-button adf-menu-icon"
         mat-icon-button
         (click)="toggleMenu()"
+        [attr.aria-expanded]="expandedSidenav"
         [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
         <mat-icon
             class="mat-icon material-icon"
@@ -43,6 +44,7 @@
         class="mat-icon-button adf-menu-icon"
         mat-icon-button
         (click)="toggleMenu()"
+        [attr.aria-expanded]="expandedSidenav"
         [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
     >
         <mat-icon

lib/core/layout/components/header/header.component.spec.ts

@@ -122,6 +122,42 @@ describe('HeaderLayoutComponent', () => {
             expect(button === null).toBeTruthy();
         });
 
+        it('if expandedSidenav is false aria expanded should be false too', () => {
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            const nodeAttributes = fixture.debugElement.nativeElement.querySelector('#adf-sidebar-toggle-start').attributes as NamedNodeMap;
+            expect(nodeAttributes.getNamedItem('aria-expanded').value).toEqual('false');
+        });
+
+        it('if expandedSidenav is true aria expanded should be true too', () => {
+            component.expandedSidenav = true;
+            fixture.detectChanges();
+
+            const nodeAttributes = fixture.debugElement.nativeElement.querySelector('#adf-sidebar-toggle-start').attributes as NamedNodeMap;
+            expect(nodeAttributes.getNamedItem('aria-expanded').value).toEqual('true');
+        });
+
+        it('if expandedSidenav is false than we click on the sidenav button aria expanded should be true and if click again it should be false', () => {
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            const button = fixture.nativeElement.querySelector('#adf-sidebar-toggle-start');
+            button.click();
+
+            fixture.detectChanges();
+
+            const nodeAttributes = button.attributes as NamedNodeMap;
+            expect(nodeAttributes.getNamedItem('aria-expanded').value).toEqual('true');
+
+            button.click();
+
+            fixture.detectChanges();
+
+            const nodeAttributes2 = button.attributes as NamedNodeMap;
+            expect(nodeAttributes2.getNamedItem('aria-expanded').value).toEqual('false');
+        });
+
         it('if position is end the button menu should be at the end', () => {
             component.position = 'end';
             fixture.detectChanges();

lib/core/layout/components/header/header.component.ts

@@ -49,13 +49,16 @@ export class HeaderLayoutComponent implements OnInit {
     @Input() showSidenavToggle: boolean = true;
 
     /** Emitted when the sidenav button is clicked. */
-    @Output() clicked = new EventEmitter<any>();
+    @Output() clicked = new EventEmitter<boolean>();
+
+    @Input() expandedSidenav: boolean = true;
 
     /** The side of the page that the drawer is attached to (can be 'start' or 'end') */
     @Input() position = 'start';
 
     toggleMenu() {
         this.clicked.emit(true);
+        this.expandedSidenav = !this.expandedSidenav;
     }
 
     ngOnInit() {