Merge branch 'master' into simeonoff/scoped-styles

simeonoff · web-flow · commit 26038823c8d6 · 2026-07-16T17:22:59.000+03:00
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -18,7 +18,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
       - name: Use Node.js 24
         uses: actions/setup-node@v7
         with:
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -11,7 +11,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
       - uses: actions/setup-node@v7
         with:
           node-version: 24.x
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/stale@v7
+    - uses: actions/stale@v10
       with:
         repo-token: ${{ secrets.GITHUB_TOKEN }}
         stale-issue-message: 'There has been no recent activity and this issue has been marked inactive.'
diff --git a/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts b/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts
@@ -20,8 +20,6 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
     public combo = inject<IgxComboBase>(IGX_COMBO_COMPONENT);
     protected comboAPI = inject(IgxComboAPIService);
 
-    private _activeDescendantId: string | null = null;
-
     /** @hidden @internal */
     @Input({ transform: booleanAttribute })
     public singleMode = false;
diff --git a/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, OnInit, ElementRef, ViewChildren, QueryList, ChangeDetectorRef, DOCUMENT, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ViewChild, OnInit, ElementRef, ViewChildren, QueryList, ChangeDetectorRef, DOCUMENT, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core';
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -45,7 +45,7 @@ describe('IgxDropDown ', () => {
         const mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck', 'detectChanges']);
         mockSelection.get.and.returnValue(new Set([]));
         const mockForOf = jasmine.createSpyObj('IgxForOfDirective', ['totalItemCount']);
-        const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { 'defaultView': { getComputedStyle: () => null }});
+        const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { 'defaultView': { getComputedStyle: () => null } });
 
         beforeEach(() => {
             TestBed.configureTestingModule({
@@ -854,7 +854,7 @@ describe('IgxDropDown ', () => {
 
                 const itemToClick = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_ITEM}`))[0];
 
-                const event = new Event('mousedown', { });
+                const event = new Event('mousedown', {});
                 spyOn(event, 'preventDefault');
                 itemToClick.triggerEventHandler('mousedown', event);
 
@@ -1029,6 +1029,98 @@ describe('IgxDropDown ', () => {
             expect(expectedScroll - acceptableDelta < scrollTop && expectedScroll + acceptableDelta > scrollTop).toBe(true);
         });
     });
+    describe('Zoneless virtualization tests', () => {
+        let scroll: IgxForOfDirective<any>;
+        beforeEach(async () => {
+            TestBed.resetTestingModule();
+            await TestBed.configureTestingModule({
+                imports: [
+                    NoopAnimationsModule,
+                    VirtualizedDropDownComponent
+                ],
+                providers: [provideZonelessChangeDetection()]
+            }).compileComponents();
+            fixture = TestBed.createComponent(VirtualizedDropDownComponent);
+            fixture.detectChanges();
+            dropdown = fixture.componentInstance.dropdown;
+            scroll = fixture.componentInstance.virtualScroll;
+        });
+        it('should not throw when scrolling after selecting an item', async () => {
+            const preSelected = { value: fixture.componentInstance.items[0], index: 0 } as IgxDropDownItemBaseDirective;
+            dropdown.selectItem(preSelected);
+
+            dropdown.toggle();
+            await wait(50);
+            fixture.detectChanges();
+
+            scroll.getScroll().scrollTop = scroll.getScroll().scrollHeight;
+            await wait(50);
+
+            expect(() => fixture.detectChanges()).not.toThrow();
+        });
+
+        it('should update aria-activedescendant to the id of the focused item in virtualized dropdown when navigating', async () => {
+            const preSelected = { value: fixture.componentInstance.items[0], index: 0 } as IgxDropDownItemBaseDirective;
+            dropdown.selectItem(preSelected);
+            dropdown.toggle();
+            await wait(50);
+            fixture.detectChanges();
+
+            const targetElement = fixture.debugElement.query(By.directive(IgxButtonDirective)).nativeElement;
+            let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement;
+
+            expect(focusedItem).toBeTruthy();
+            let focusedItemId = focusedItem.getAttribute('id');
+            expect(focusedItemId).toBeTruthy();
+            expect(targetElement.getAttribute('aria-activedescendant')).toBe(focusedItemId);
+
+            dropdown.navigateNext();
+            await wait(50);
+            fixture.detectChanges();
+
+            focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement;
+            focusedItemId = focusedItem.getAttribute('id');
+            expect(targetElement.getAttribute('aria-activedescendant')).toBe(focusedItemId);
+
+            dropdown.navigateFirst();
+            await wait(50);
+            fixture.detectChanges();
+            focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement;
+            focusedItemId = focusedItem.getAttribute('id');
+            expect(targetElement.getAttribute('aria-activedescendant')).toBe(focusedItemId);
+        });
+
+        it('should update aria-activedescendant to the id of the focused item in virtualized dropdown when navigating with scrolling', async () => {
+            const preSelected = { value: fixture.componentInstance.items[0], index: 0 } as IgxDropDownItemBaseDirective;
+            dropdown.selectItem(preSelected);
+            dropdown.toggle();
+            await wait(50);
+            fixture.detectChanges();
+
+            const targetElement = fixture.debugElement.query(By.directive(IgxButtonDirective)).nativeElement;
+            let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement;
+
+            expect(focusedItem).toBeTruthy();
+            let focusedItemId = focusedItem.getAttribute('id');
+            expect(focusedItemId).toBeTruthy();
+            expect(targetElement.getAttribute('aria-activedescendant')).toBe(focusedItemId);
+
+            dropdown.navigateLast();
+            await wait(50);
+            fixture.detectChanges();
+
+            focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement;
+            focusedItemId = focusedItem.getAttribute('id');
+            expect(targetElement.getAttribute('aria-activedescendant')).toBe(focusedItemId);
+
+            dropdown.navigateFirst();
+            await wait(50);
+            fixture.detectChanges();
+            focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement;
+            focusedItemId = focusedItem.getAttribute('id');
+            expect(targetElement.getAttribute('aria-activedescendant')).toBe(focusedItemId);
+        });
+    });
     describe('Rendering', () => {
         describe('Accessibility', () => {
             beforeEach(waitForAsync(() => {
diff --git a/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts b/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts
@@ -29,7 +29,7 @@ import { IgxSelectionAPIService } from 'igniteui-angular/core';
 import { Subject } from 'rxjs';
 import { IgxDropDownItemBaseDirective } from './drop-down-item.base';
 import { IgxForOfToken } from 'igniteui-angular/directives';
-import { take } from 'rxjs/operators';
+import { take, takeUntil } from 'rxjs/operators';
 import { OverlaySettings } from 'igniteui-angular/core';
 import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
 
@@ -61,6 +61,7 @@ import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
 })
 export class IgxDropDownComponent extends IgxDropDownBaseDirective implements IDropDownBase, OnChanges, AfterViewInit, OnDestroy {
     protected selection = inject(IgxSelectionAPIService);
+    protected _activeDescendantId: string | null = null;
 
     /**
      * @hidden
@@ -174,6 +175,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
         if (!value) {
             this.selection.clear(`${this.id}-active`);
             this._focusedItem = null;
+            this._activeDescendantId = null;
             return;
         }
         this._focusedItem = value;
@@ -186,6 +188,13 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
         this.selection.set(`${this.id}-active`, new Set([this._focusedItem]));
     }
 
+    public override get activeDescendant(): string | null {
+        if (this.virtDir) {
+            return this._activeDescendantId;
+        }
+        return super.activeDescendant;
+    }
+
     public override get id(): string {
         return this._id;
     }
@@ -338,6 +347,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
                     this.skipHeader(direction);
                 });
             } else {
+                this._activeDescendantId = this.children.find(e => e.index === index)?.id ?? null;
                 this.skipHeader(direction);
             }
         } else {
@@ -464,6 +474,13 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
     public ngAfterViewInit() {
         if (this.virtDir) {
             this.virtDir.igxForItemSize = 28;
+            this.virtDir.chunkLoad.pipe(takeUntil(this.destroy$)).subscribe(() => {
+                const item = this._focusedItem
+                    ? this.children.find(e => e.index === this._focusedItem.index)
+                    : null;
+                this._activeDescendantId = item?.id ?? null;
+                this.cdr.markForCheck();
+            });
         }
     }
 
@@ -613,6 +630,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
     protected updateItemFocus() {
         if (this.selectedItem) {
             this.focusedItem = this.selectedItem;
+            this._activeDescendantId = this.focusedItem?.id ?? null;
             this.focusItem(true);
         } else if (this.allowItemsFocus) {
             this.navigateFirst();
