Skip to content

Commit c5a5d85

Browse files
kdinevkdinev
authored
Merge pull request #14977 from IgniteUI/mpopov/fix-for-#14976-18.2.x
fix(navigation-drawer): fix ARIA role issue warning
2 parents 2b83179 + 2890b40 commit c5a5d85

File tree

3 files changed

+41
-45
lines changed

3 files changed

+41
-45
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
@@ -14,7 +14,7 @@
1414
[class.igx-nav-drawer--disable-animation]="disableAnimation"
1515
(click)="close()" #overlay>
1616
</div>
17-
<aside role="navigation"
17+
<nav
1818
class="igx-nav-drawer__aside"
1919
[class.igx-nav-drawer__aside--collapsed]="!miniTemplate && !isOpen"
2020
[class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
@@ -24,5 +24,5 @@
2424
[class.igx-nav-drawer--disable-animation]="disableAnimation">
2525

2626
<ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
27-
</aside>
27+
</nav>
2828
<div class="igx-nav-drawer__style-dummy" #dummy></div>

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

Lines changed: 4 additions & 4 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
}));
@@ -262,7 +262,7 @@ describe('Navigation Drawer', () => {
262262
fixture.detectChanges();
263263

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

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

296296
fixture.componentInstance.pin = false;
297297
fixture.detectChanges();
@@ -484,7 +484,7 @@ describe('Navigation Drawer', () => {
484484
fixture.detectChanges();
485485

486486
// const comp: DebugElement = fixture.debugElement.query(By.component(IgxNavbarComponent));
487-
const asideElem = fixture.debugElement.query(By.css('igx-nav-drawer > aside')).nativeElement;
487+
const asideElem = fixture.debugElement.query(By.css('igx-nav-drawer > .igx-nav-drawer__aside')).nativeElement;
488488

489489
const computedStyle = window.getComputedStyle(asideElem);
490490
let asideWidth = computedStyle.getPropertyValue('width');

‎src/app/app.component.html‎

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,54 @@
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-
<span igxDrawerItem [disabled]="true">
20-
<igx-icon>web</igx-icon>
21-
<span class="navdrawer-ellipsis">Disabled Item</span>
22-
</span>
18+
<span igxDrawerItem [disabled]="true">
19+
<igx-icon>web</igx-icon>
20+
<span class="navdrawer-ellipsis">Disabled Item</span>
21+
</span>
2322

24-
<!--Directives-->
25-
<span igxDrawerItem [isHeader]="true">Directives</span>
23+
<!--Directives-->
24+
<span igxDrawerItem [isHeader]="true">Directives</span>
2625

27-
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
28-
<igx-icon>{{item.icon}}</igx-icon>
29-
<span class="navdrawer-ellipsis">{{item.name}}</span>
30-
</span>
26+
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
27+
<igx-icon>{{item.icon}}</igx-icon>
28+
<span class="navdrawer-ellipsis">{{item.name}}</span>
29+
</span>
3130

32-
<!--Style guide-->
33-
<span igxDrawerItem [isHeader]="true">Style</span>
31+
<!--Style guide-->
32+
<span igxDrawerItem [isHeader]="true">Style</span>
3433

35-
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
36-
<igx-icon>{{item.icon}}</igx-icon>
37-
<span class="navdrawer-ellipsis">{{item.name}}</span>
38-
</span>
39-
</nav>
34+
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
35+
<igx-icon>{{item.icon}}</igx-icon>
36+
<span class="navdrawer-ellipsis">{{item.name}}</span>
37+
</span>
4038
</ng-template>
4139

4240
<ng-template *ngIf="drawerState.miniVariant" igxDrawerMini>
43-
<nav>
44-
<span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
45-
<igx-icon>{{item.icon}}</igx-icon>
46-
</span>
41+
<span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
42+
<igx-icon>{{item.icon}}</igx-icon>
43+
</span>
4744

48-
<span igxDrawerItem [disabled]="true">
49-
<igx-icon>web</igx-icon>
50-
</span>
45+
<span igxDrawerItem [disabled]="true">
46+
<igx-icon>web</igx-icon>
47+
</span>
5148

52-
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
53-
<igx-icon>{{item.icon}}</igx-icon>
54-
</span>
49+
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
50+
<igx-icon>{{item.icon}}</igx-icon>
51+
</span>
5552

56-
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
57-
<igx-icon>{{item.icon}}</igx-icon>
58-
</span>
59-
</nav>
53+
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
54+
<igx-icon>{{item.icon}}</igx-icon>
55+
</span>
6056
</ng-template>
6157
</igx-nav-drawer>
6258

0 commit comments

Comments
 (0)