From 2b9052e4c7afebce27a2658779933c0bee13c3eb Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Tue, 29 Oct 2024 09:38:37 +0200
Subject: [PATCH 1/2] fix(navigation-drawer): change <aside> to simple <div>
 and remove the role="navigation" since we use <nav> which is semantic tag and
 there is no need to be wrapped in an element with a role.

---
 .../lib/navigation-drawer/navigation-drawer.component.html  | 4 ++--
 .../navigation-drawer/navigation-drawer.component.spec.ts   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
index e3b0521ec5c..e8684f69687 100644
--- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
+++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
@@ -13,7 +13,7 @@
     [class.igx-nav-drawer--disable-animation]="disableAnimation"
     (click)="close()" #overlay>
 </div>
-<aside role="navigation"
+<div
     class="igx-nav-drawer__aside"
     [class.igx-nav-drawer__aside--collapsed]="!miniTemplate && !isOpen"
     [class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
@@ -23,5 +23,5 @@
     [class.igx-nav-drawer--disable-animation]="disableAnimation">
 
     <ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
-</aside>
+</div>
 <div class="igx-nav-drawer__style-dummy" #dummy></div>
diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts
index b39bda07be9..0396ac517ce 100644
--- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts
@@ -203,7 +203,7 @@ describe('Navigation Drawer', () => {
             fixture.detectChanges();
 
             expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeTruthy();
-            expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList)
+            expect(fixture.debugElement.query(By.css('.igx-nav-drawer__aside')).nativeElement.classList)
                 .toContain('igx-nav-drawer__aside--mini');
         }).catch((reason) => Promise.reject(reason));
     }));
@@ -260,7 +260,7 @@ describe('Navigation Drawer', () => {
             fixture.detectChanges();
 
             expect(fixture.componentInstance.navDrawer.pin).toBeTruthy();
-            expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList)
+            expect(fixture.debugElement.query(By.css('.igx-nav-drawer__aside')).nativeElement.classList)
                 .toContain('igx-nav-drawer__aside--pinned');
 
             expect(fixture.componentInstance.navDrawer.enableGestures).toBe(false);
@@ -289,7 +289,7 @@ describe('Navigation Drawer', () => {
                 fixture.detectChanges();
                 const windowHeight = window.innerHeight;
                 const container = fixture.debugElement.query(By.css('div')).nativeElement;
-                const navdrawer = fixture.debugElement.query(By.css('igx-nav-drawer > aside')).nativeElement;
+                const navdrawer = fixture.debugElement.query(By.css('igx-nav-drawer > .igx-nav-drawer__aside')).nativeElement;
 
                 fixture.componentInstance.pin = false;
                 fixture.detectChanges();

From 21c2b6668db7cd23241a41adb3016957f3d21907 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Wed, 30 Oct 2024 18:41:06 +0200
Subject: [PATCH 2/2] fix(navigation-drawer): change the div to nav

---
 .../navigation-drawer.component.html          |  4 +-
 src/app/app.component.html                    | 64 +++++++++----------
 2 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
index e8684f69687..eb2d6910a36 100644
--- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
+++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
@@ -13,7 +13,7 @@
     [class.igx-nav-drawer--disable-animation]="disableAnimation"
     (click)="close()" #overlay>
 </div>
-<div
+<nav
     class="igx-nav-drawer__aside"
     [class.igx-nav-drawer__aside--collapsed]="!miniTemplate && !isOpen"
     [class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
@@ -23,5 +23,5 @@
     [class.igx-nav-drawer--disable-animation]="disableAnimation">
 
     <ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
-</div>
+</nav>
 <div class="igx-nav-drawer__style-dummy" #dummy></div>
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4c070c780a1..3edcebe19f9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,49 +5,45 @@
         [(pin)]="drawerState.pin" [position]="drawerState.position">
 
         <ng-template igxDrawer>
-            <nav>
-                <div class="nav-header"></div>
+            <div class="nav-header"></div>
 
-                <!-- Components -->
-                <span igxDrawerItem [isHeader]="true">Components</span>
+            <!-- Components -->
+            <span igxDrawerItem [isHeader]="true">Components</span>
 
-                <span *ngFor="let item of componentLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                    <span class="navdrawer-ellipsis">{{item.name}}</span>
-                </span>
+            <span *ngFor="let item of componentLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+                <span class="navdrawer-ellipsis">{{item.name}}</span>
+            </span>
 
-                <!--Directives-->
-                <span igxDrawerItem [isHeader]="true">Directives</span>
+            <!--Directives-->
+            <span igxDrawerItem [isHeader]="true">Directives</span>
 
-                <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                    <span class="navdrawer-ellipsis">{{item.name}}</span>
-                </span>
+            <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+                <span class="navdrawer-ellipsis">{{item.name}}</span>
+            </span>
 
-                <!--Style guide-->
-                <span igxDrawerItem [isHeader]="true">Style</span>
+            <!--Style guide-->
+            <span igxDrawerItem [isHeader]="true">Style</span>
 
-                <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                    <span class="navdrawer-ellipsis">{{item.name}}</span>
-                </span>
-            </nav>
+            <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+                <span class="navdrawer-ellipsis">{{item.name}}</span>
+            </span>
         </ng-template>
 
         <ng-template *ngIf="drawerState.miniVariant" igxDrawerMini>
-            <nav>
-                <span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                </span>
-
-                <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                </span>
-
-                <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                </span>
-            </nav>
+            <span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+            </span>
+
+            <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+            </span>
+
+            <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+            </span>
         </ng-template>
     </igx-nav-drawer>