From 22c1f572cb09d8fa63e836a53e5294f830f7e23b 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] refactor(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.

---
 .../navigation-drawer/navigation-drawer.component.html    | 4 ++--
 .../navigation-drawer/navigation-drawer.component.spec.ts | 8 ++++----
 2 files changed, 6 insertions(+), 6 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 dedf1500af7..0ce9933a2a6 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
@@ -14,7 +14,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"
@@ -24,5 +24,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 f17308683db..5dcae02b715 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));
     }));
@@ -262,7 +262,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);
@@ -291,7 +291,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();
@@ -484,7 +484,7 @@ describe('Navigation Drawer', () => {
         fixture.detectChanges();
 
         // const comp: DebugElement = fixture.debugElement.query(By.component(IgxNavbarComponent));
-        const asideElem = fixture.debugElement.query(By.css('igx-nav-drawer > aside')).nativeElement;
+        const asideElem = fixture.debugElement.query(By.css('igx-nav-drawer > .igx-nav-drawer__aside')).nativeElement;
 
         const computedStyle = window.getComputedStyle(asideElem);
         let asideWidth = computedStyle.getPropertyValue('width');

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

---
 .../navigation-drawer.component.html          |  4 +-
 src/app/app.component.html                    | 74 +++++++++----------
 2 files changed, 37 insertions(+), 41 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 0ce9933a2a6..c219a5a691d 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
@@ -14,7 +14,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"
@@ -24,5 +24,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 ddb520bb27c..e749389a05d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,58 +5,54 @@
         [(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>
 
-                <span igxDrawerItem [disabled]="true">
-                    <igx-icon>web</igx-icon>
-                    <span class="navdrawer-ellipsis">Disabled Item</span>
-                </span>
+            <span igxDrawerItem [disabled]="true">
+                <igx-icon>web</igx-icon>
+                <span class="navdrawer-ellipsis">Disabled Item</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 componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+            </span>
 
-                <span igxDrawerItem [disabled]="true">
-                    <igx-icon>web</igx-icon>
-                </span>
+            <span igxDrawerItem [disabled]="true">
+                <igx-icon>web</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 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 styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+            </span>
         </ng-template>
     </igx-nav-drawer>