Skip to content

Commit 36b8646

Browse files
kdinevkdinev
authored
Merge pull request #14978 from IgniteUI/mpopov/fix-for-#14976-17.2.x
fix(navigation-drawer): fix ARIA role issue warning
2 parents a3bda02 + ea8344c commit 36b8646

File tree

3 files changed

+35
-39
lines changed

3 files changed

+35
-39
lines changed

‎projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
[class.igx-nav-drawer--disable-animation]="disableAnimation"
1414
(click)="close()" #overlay>
1515
</div>
16-
<aside role="navigation"
16+
<nav
1717
class="igx-nav-drawer__aside"
1818
[class.igx-nav-drawer__aside--collapsed]="!miniTemplate && !isOpen"
1919
[class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
@@ -23,5 +23,5 @@
2323
[class.igx-nav-drawer--disable-animation]="disableAnimation">
2424

2525
<ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
26-
</aside>
26+
</nav>
2727
<div class="igx-nav-drawer__style-dummy" #dummy></div>

‎projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ describe('Navigation Drawer', () => {
203203
fixture.detectChanges();
204204

205205
expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeTruthy();
206-
expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList)
206+
expect(fixture.debugElement.query(By.css('.igx-nav-drawer__aside')).nativeElement.classList)
207207
.toContain('igx-nav-drawer__aside--mini');
208208
}).catch((reason) => Promise.reject(reason));
209209
}));
@@ -260,7 +260,7 @@ describe('Navigation Drawer', () => {
260260
fixture.detectChanges();
261261

262262
expect(fixture.componentInstance.navDrawer.pin).toBeTruthy();
263-
expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList)
263+
expect(fixture.debugElement.query(By.css('.igx-nav-drawer__aside')).nativeElement.classList)
264264
.toContain('igx-nav-drawer__aside--pinned');
265265

266266
expect(fixture.componentInstance.navDrawer.enableGestures).toBe(false);
@@ -289,7 +289,7 @@ describe('Navigation Drawer', () => {
289289
fixture.detectChanges();
290290
const windowHeight = window.innerHeight;
291291
const container = fixture.debugElement.query(By.css('div')).nativeElement;
292-
const navdrawer = fixture.debugElement.query(By.css('igx-nav-drawer > aside')).nativeElement;
292+
const navdrawer = fixture.debugElement.query(By.css('igx-nav-drawer > .igx-nav-drawer__aside')).nativeElement;
293293

294294
fixture.componentInstance.pin = false;
295295
fixture.detectChanges();

‎src/app/app.component.html‎

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,45 @@
55
[(pin)]="drawerState.pin" [position]="drawerState.position">
66

77
<ng-template igxDrawer>
8-
<nav>
9-
<div class="nav-header"></div>
8+
<div class="nav-header"></div>
109

11-
<!-- Components -->
12-
<span igxDrawerItem [isHeader]="true">Components</span>
10+
<!-- Components -->
11+
<span igxDrawerItem [isHeader]="true">Components</span>
1312

14-
<span *ngFor="let item of componentLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
15-
<igx-icon>{{item.icon}}</igx-icon>
16-
<span class="navdrawer-ellipsis">{{item.name}}</span>
17-
</span>
13+
<span *ngFor="let item of componentLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
14+
<igx-icon>{{item.icon}}</igx-icon>
15+
<span class="navdrawer-ellipsis">{{item.name}}</span>
16+
</span>
1817

19-
<!--Directives-->
20-
<span igxDrawerItem [isHeader]="true">Directives</span>
18+
<!--Directives-->
19+
<span igxDrawerItem [isHeader]="true">Directives</span>
2120

22-
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
23-
<igx-icon>{{item.icon}}</igx-icon>
24-
<span class="navdrawer-ellipsis">{{item.name}}</span>
25-
</span>
21+
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
22+
<igx-icon>{{item.icon}}</igx-icon>
23+
<span class="navdrawer-ellipsis">{{item.name}}</span>
24+
</span>
2625

27-
<!--Style guide-->
28-
<span igxDrawerItem [isHeader]="true">Style</span>
26+
<!--Style guide-->
27+
<span igxDrawerItem [isHeader]="true">Style</span>
2928

30-
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
31-
<igx-icon>{{item.icon}}</igx-icon>
32-
<span class="navdrawer-ellipsis">{{item.name}}</span>
33-
</span>
34-
</nav>
29+
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
30+
<igx-icon>{{item.icon}}</igx-icon>
31+
<span class="navdrawer-ellipsis">{{item.name}}</span>
32+
</span>
3533
</ng-template>
3634

3735
<ng-template *ngIf="drawerState.miniVariant" igxDrawerMini>
38-
<nav>
39-
<span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
40-
<igx-icon>{{item.icon}}</igx-icon>
41-
</span>
42-
43-
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
44-
<igx-icon>{{item.icon}}</igx-icon>
45-
</span>
46-
47-
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
48-
<igx-icon>{{item.icon}}</igx-icon>
49-
</span>
50-
</nav>
36+
<span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
37+
<igx-icon>{{item.icon}}</igx-icon>
38+
</span>
39+
40+
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
41+
<igx-icon>{{item.icon}}</igx-icon>
42+
</span>
43+
44+
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
45+
<igx-icon>{{item.icon}}</igx-icon>
46+
</span>
5147
</ng-template>
5248
</igx-nav-drawer>
5349

0 commit comments

Comments
 (0)