diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html index 3ffb4c6b82..2f389c4773 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.html +++ b/demo-shell/src/app/components/app-layout/app-layout.component.html @@ -5,8 +5,8 @@ + [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [expandedSidenav]="expandedSidenav" + [color]="color" [position]="position" (clicked)=toggleMenu($event)>
diff --git a/lib/core/layout/components/header/header.component.html b/lib/core/layout/components/header/header.component.html index 283e874c60..4aa87e27b8 100644 --- a/lib/core/layout/components/header/header.component.html +++ b/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"> > { 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(); diff --git a/lib/core/layout/components/header/header.component.ts b/lib/core/layout/components/header/header.component.ts index 80598aed60..27d9050a36 100644 --- a/lib/core/layout/components/header/header.component.ts +++ b/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(); + @Output() clicked = new EventEmitter(); + + @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() {