[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
This commit is contained in:
Martin Muller
2019-10-24 23:54:32 +02:00
committed by Eugenio Romano
parent 6331979baa
commit ef229dd300
4 changed files with 44 additions and 3 deletions

View File

@@ -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();