Merge branch 'master' into bpachilova/icon-aria-hidden-16008-master

ddaribo · web-flow · commit f1ea9297b9be · 2025-08-07T15:52:31.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,9 +3,17 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 20.1.0
+### New Features
+- `IgxCarousel`
+    - Added `select` method overload accepting index.
+    ```ts
+    this.carousel.select(2, Direction.NEXT);
+    ```
+
 ### General
 - `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
 
+
 ## 20.0.6
 ### General
 - `IgxSimpleCombo`
diff --git a/LICENSE b/LICENSE
@@ -11,6 +11,6 @@ and refer to the purchasing options in the pricing section on the product page.
 This repository includes code originally copied from https://github.com/zloirock/core-js
 in the projects/igniteui-angular/src/lib/core/setImmediate.ts file. The original version of the code is MIT licensed. See the file header for details.
 
-© Copyright 2020 INFRAGISTICS. All Rights Reserved.
+© Copyright 2025 INFRAGISTICS. All Rights Reserved.
 The Infragistics Ultimate license & copyright applies to this distribution.
 For information on that license, please go to our website https://www.infragistics.com/legal/license.
diff --git a/README.md b/README.md
@@ -337,7 +337,7 @@ In order for us to verify your eligibility for free usage, please [register for
 
 To acquire a license for commercial usage, please [register for trial](https://Infragistics.com/Angular) and refer to the purchasing options in the pricing section on the product page.
 
-© Copyright 2020 INFRAGISTICS. All Rights Reserved.
+© Copyright 2025 INFRAGISTICS. All Rights Reserved.
 The Infragistics Ultimate license & copyright applies to this distribution.
 For information on that license, please go to our website [https://www.infragistics.com/legal/license](https://www.infragistics.com/legal/license).
 
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -2,21 +2,24 @@
 
 # Current Milestone
 
-## Milestone 38, version 20.0 (Due by Jun, 2025)
-1. Support of Angular 20.0
+## Milestone 38, version 20.1 (Due by Sep, 2025)
+1. Grid cell merging feature [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
+2. “Clear Selection” button in Combo component is keyboard accessible [#15841](https://github.com/IgniteUI/igniteui-angular/issues/15841)
+3. Selecting a slide by index in the Carousel component [#16046](https://github.com/IgniteUI/igniteui-angular/issues/16046)
 
 ## Going down the road
 
-1. Provide an option to modify the default enter edit mode conditions, to e.g. allow edit mode start on a single click [#14658](https://github.com/IgniteUI/igniteui-angular/issues/14658)
-2. Provide an excel-like navigation mode for editing where all arrow keys navigate the cell in edit mode. [#14659](https://github.com/IgniteUI/igniteui-angular/issues/14659)
-3. Extend the 18.2 editorOptions property to allow modifying numeric editors to not change the value on up/down arrow press [#14660](https://github.com/IgniteUI/igniteui-angular/issues/14660)
+1. AI Chat UI component [#16094](https://github.com/IgniteUI/igniteui-angular/issues/16094)
 
 # Previous Milestone
 
+## Milestone 38, version 20.0 (Released Jun 09th, 2025)
+1. **[DONE]** Support of Angular 20.0
+
 ## Milestone 37,  version 19.2 (Released Apr 16th, 2025), [Release Blog 19.2](https://www.infragistics.com/blogs/ignite-ui-for-angular-19-2/)
 
-1. Tile Manager - layout component [#239](https://github.com/IgniteUI/igniteui-angular/issues/239)
-2. SSR Grid Improvements - [15202](https://github.com/IgniteUI/igniteui-angular/issues/15202)
+1. **[DONE]** Tile Manager - layout component [#239](https://github.com/IgniteUI/igniteui-angular/issues/239)
+2. **[DONE]** SSR Grid Improvements - [15202](https://github.com/IgniteUI/igniteui-angular/issues/15202)
 
 ## Milestone 36,  version 19.1 (Released Feb 27th, 2025), [Release Blog 19.1](https://www.infragistics.com/blogs/ignite-ui-for-angular-19-1/)
 
@@ -26,8 +29,8 @@
 
 ## Milestone 35, version 19.0 (Released Nov 25th, 2024)
 
-1. Angular 19 support
-2. Simplify hiding Grid summary results through API [#14905](https://github.com/IgniteUI/igniteui-angular/issues/14905)
+1. **[DONE]** Angular 19 support
+2. **[DONE]** Simplify hiding Grid summary results through API [#14905](https://github.com/IgniteUI/igniteui-angular/issues/14905)
 
 ## Milestone 34, version 18.2 (Released Oct 25th, 2024)
 
diff --git a/projects/igniteui-angular/src/lib/carousel/README.md b/projects/igniteui-angular/src/lib/carousel/README.md
@@ -34,8 +34,9 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `next()` | void | Switches to the next slide. Emits `slideChanged` event. |
 | `add(slide: IgxSlide)` | void | Adds a slide to the carousel. Emits `slideAdded` event. |
 | `remove(slide: IgxSlide)` | void | Removes an existing slide from the carousel. Emits `slideRemoved` event. |
-| `get(index: Number)` | IgxSlide or void | Returns the slide with the given index or null. |
-| `select(slide: IgxSlide, direction: Direction)`| void | Selects the slide and the direction to transition to. Emits `slideChanged` event. |
+| `get(index: number)` | IgxSlide or void | Returns the slide with the given index or null. |
+| `select(slide: IgxSlide, direction: Direction)`| void | Switches to the passed-in slide with a given direction. Emits `slideChanged` event. |
+| `select(index: number, direction: Direction)`| void | Switches to slide by index with a given direction. Emits `slideChanged` event. |
 
 ### Keyboard navigation
 
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts
@@ -143,15 +143,27 @@ describe('Carousel', () => {
 
             carousel.next();
             let currentSlide = carousel.get(carousel.current);
-
             fixture.detectChanges();
             expect(carousel.get(1)).toBe(currentSlide);
 
             currentSlide = carousel.get(0);
             carousel.prev();
-
             fixture.detectChanges();
             expect(carousel.get(0)).toBe(currentSlide);
+
+            carousel.select(1);
+            fixture.detectChanges();
+            expect(carousel.get(1)).toBe(carousel.get(carousel.current));
+
+            // select a negative index -> active slide remains the same
+            carousel.select(-1);
+            fixture.detectChanges();
+            expect(carousel.get(1)).toBe(carousel.get(carousel.current));
+
+            // select a non-existent index -> active slide remains the same
+            carousel.select(carousel.slides.length);
+            fixture.detectChanges();
+            expect(carousel.get(1)).toBe(carousel.get(carousel.current));
         });
 
         it('emit events', () => {
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
@@ -816,14 +816,29 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     }
 
     /**
-     * Kicks in a transition for a given slide with a given `direction`.
+     * Switches to the passed-in slide with a given `direction`.
      * ```typescript
-     * this.carousel.select(this.carousel.get(2), Direction.NEXT);
+     * const slide = this.carousel.get(2);
+     * this.carousel.select(slide, Direction.NEXT);
      * ```
      *
      * @memberOf IgxCarouselComponent
      */
-    public select(slide: IgxSlideComponent, direction: Direction = Direction.NONE) {
+    public select(slide: IgxSlideComponent, direction?: Direction): void;
+    /**
+     * Switches to slide by index with a given `direction`.
+     * ```typescript
+     * this.carousel.select(2, Direction.NEXT);
+     * ```
+     *
+     * @memberOf IgxCarouselComponent
+     */
+    public select(index: number, direction?: Direction): void;
+    public select(slideOrIndex: IgxSlideComponent | number, direction: Direction = Direction.NONE): void {
+        const slide = typeof slideOrIndex === 'number'
+            ? this.get(slideOrIndex)
+            : slideOrIndex;
+
         if (slide && slide !== this.currentItem) {
             slide.direction = direction;
             slide.active = true;
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
@@ -2,7 +2,7 @@ import { DebugElement } from '@angular/core';
 import { fakeAsync, TestBed, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent } from '../../test-utils/tooltip-components.spec';
+import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent } from '../../test-utils/tooltip-components.spec';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../services/public_api';
 import { IgxTooltipDirective } from './tooltip.directive';
@@ -621,6 +621,36 @@ describe('IgxTooltip', () => {
         }));
     });
 
+    describe('Multiple tooltips', () => {
+        let targetOne: IgxTooltipTargetDirective;
+
+        let tooltipOne: IgxTooltipDirective;
+        let tooltipTwo: IgxTooltipDirective;
+
+        beforeEach(waitForAsync(() => {
+            fix = TestBed.createComponent(IgxTooltipMultipleTooltipsComponent);
+            fix.detectChanges();
+            targetOne = fix.componentInstance.targetOne;
+            tooltipOne = fix.componentInstance.tooltipOne;
+            tooltipTwo = fix.componentInstance.tooltipTwo;
+        }));
+
+        it('should not add multiple document:touchstart event listeners when having multiple igxTooltip instances - #16100', fakeAsync(() => {
+            spyOn<any>(tooltipOne, 'onDocumentTouchStart').and.callThrough();
+            spyOn<any>(tooltipTwo, 'onDocumentTouchStart').and.callThrough();
+
+            touchElement(targetOne);
+            tick(500);
+
+            const dummyDiv = fix.debugElement.query(By.css('.dummyDiv'));
+            touchElement(dummyDiv);
+            flush();
+
+            expect(tooltipOne['onDocumentTouchStart']).toHaveBeenCalledTimes(1);
+            expect(tooltipTwo['onDocumentTouchStart']).not.toHaveBeenCalled();
+        }));
+    });
+
     describe('Tooltip integration', () => {
         beforeEach(waitForAsync(() => {
             fix = TestBed.createComponent(IgxTooltipWithToggleActionComponent);
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts
@@ -122,10 +122,10 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
         super(elementRef, cdr, overlayService, navigationService);
 
         this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
-        this.overlayService.opening.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        this.opening.pipe(takeUntil(this._destroy$)).subscribe(() => {
             this._document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
         });
-        this.overlayService.closed.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        this.closed.pipe(takeUntil(this._destroy$)).subscribe(() => {
             this._document.removeEventListener('touchstart', this.onDocumentTouchStart);
         });
     }
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -519,11 +519,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     /** @hidden @internal */
     @HostBinding('attr.aria-describedby')
     public get ariaDescribeBy() {
-        let describeBy = (this.gridID + '_' + this.column.field).replace('.', '_');
-        if (this.isInvalid) {
-            describeBy += ' ' + this.ariaErrorMessage;
-        }
-        return describeBy;
+        return this.isInvalid ? this.ariaErrorMessage : null;
     }
 
     /** @hidden @internal */
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
@@ -145,6 +145,65 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         }));
 
+        it('Should render a hidden row of the leaf column headers for accessibility purposes.', fakeAsync(() => {
+            fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
+            (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.firstGroupRepeats = 0;
+            (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.secondGroupRepeats = 0;
+            tick();
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            grid = fixture.componentInstance.grid;
+            const gridHeader = GridFunctions.getGridHeader(grid);
+
+            const groupHeaderEls = Array.from(gridHeader.nativeElement.querySelectorAll('.' + GRID_COL_GROUP_THEAD_TITLE_CLASS));
+            for (const header of groupHeaderEls) {
+                expect(header.getAttribute('aria-hidden')).toBe('true');
+            }
+
+            const columnHeaders = GridFunctions.getColumnHeaders(fixture);
+            for (const header of columnHeaders) {
+                expect(header.nativeNode.getAttribute('aria-hidden')).toBe('true');
+            }
+
+            const hiddenRow = gridHeader.nativeElement.querySelectorAll('[role="row"]')[1];
+            const horizontalVirtualization = grid.rowList.first.virtDirRow;
+            const chunkSize = horizontalVirtualization.state.chunkSize;
+
+            expect(hiddenRow.children.length).toBeLessThanOrEqual(chunkSize);
+            expect(grid.columns.length).toBeGreaterThan(chunkSize);
+
+            expect(hiddenRow.children[0].textContent).toBe('ID');
+            expect(hiddenRow.children[1].textContent).toBe('Company Name');
+            expect(hiddenRow.children[2].textContent).toBe('ContactName');
+            expect(hiddenRow.children[3].textContent).toBe('ContactTitle');
+            expect(hiddenRow.children[4].textContent).toBe('Country');
+            expect(hiddenRow.children[5].textContent).toBe('Region');
+            expect(hiddenRow.children[6].textContent).toBe('City');
+        }));
+
+        it('The hidden row of the leaf columns contains only headers of the rendered cells', fakeAsync(() => {
+            fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
+            tick();
+            fixture.detectChanges();
+
+            grid = fixture.componentInstance.grid;
+            const horizontalVirtualization = grid.rowList.first.virtDirRow;
+            const chunkSize = horizontalVirtualization.state.chunkSize;
+
+            tick();
+            fixture.detectChanges();
+
+            const gridHeader = GridFunctions.getGridHeader(grid);
+            const hiddenRow = gridHeader.nativeElement.querySelectorAll('[role="row"]')[1];
+
+            expect(hiddenRow.children.length).toBeLessThanOrEqual(chunkSize);
+            for (const ariaHeader of Array.from(hiddenRow.children)) {
+                expect(ariaHeader.textContent).toBe('ID');
+            }
+        }));
+
         it('Should render dynamic column group header correctly (#12165).', () => {
             fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
             (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.firstGroupRepeats = 1;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
@@ -577,8 +577,6 @@ describe('IgxGrid - Column Pinning #grid', () => {
 
                 GridSelectionFunctions.verifyRowHasCheckbox(row);
                 expect(GridFunctions.getRowDisplayContainer(fix, 0)).toBeDefined();
-                expect(row.children[2].getAttribute('aria-describedby')).toBe(grid.id + '_CompanyName');
-                expect(row.children[3].getAttribute('aria-describedby')).toBe(grid.id + '_ContactName');
 
                 // check scrollbar DOM
                 const scrBarStartSection = fix.debugElement.query(By.css(`${GRID_SCROLL_CLASS}-start`));
@@ -695,7 +693,6 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 for (let i = 0; i <= pinnedCols.length - 1; i++) {
                     const elem = row.children[i + 1];
                     expect(parseInt((elem as any).style.left, 10)).toBe(-330);
-                    expect(elem.getAttribute('aria-describedby')).toBe(grid.id + '_' + pinnedCols[i].field);
                 }
 
                 // check correct headers have left border
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
@@ -42,6 +42,7 @@
     }
     <div class="igx-grid-thead__title"
         role="columnheader"
+        [attr.aria-hidden]="ariaHidden"
         [attr.aria-label]="column.header || column.field"
         [attr.aria-expanded]="column.expanded"
         [attr.aria-selected]="column.selected"
@@ -97,6 +98,7 @@
     }
     <igx-grid-header
         role="columnheader"
+        [attr.aria-hidden]="ariaHidden"
         class="igx-grid-th--fw"
         [id]="grid.id + '_' + column.field"
         [ngClass]="column.headerClasses"
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts
@@ -158,6 +158,13 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         return Z_INDEX - this.grid.pinnedColumns.indexOf(this.column);
     }
 
+    /**
+     * @hidden
+     */
+    public get ariaHidden(): boolean {
+        return this.grid.hasColumnGroups && (this.column.hidden || this.grid.navigation.activeNode.row !== -1);
+    }
+
     /**
      * Gets whether the header group belongs to a column that is filtered.
      *
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html
@@ -106,6 +106,15 @@
         }
     </div>
 
+    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->
+    @if (grid.hasColumnGroups) {
+        <div role="row" style="width: 0; height: 0; position: absolute; top: -10000px;">
+            @for (column of visibleLeafColumns; track column.index) {
+                <div role="columnheader" [attr.aria-hidden]="isLeafHeaderAriaHidden">{{ column.header || column.field }}</div>
+            }
+        </div>
+    }
+
     <!-- Filter row area -->
     @if (grid.filteringService.isFilterRowVisible) {
         <igx-grid-filtering-row #filteringRow
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts
@@ -93,6 +93,26 @@ export class IgxGridHeaderRowComponent implements DoCheck {
         return this.groups.map(group => group.filter);
     }
 
+    /**
+     * Gets a list of all visible leaf columns in the grid.
+     *
+     * @hidden @internal
+     */
+    public get visibleLeafColumns(): ColumnType[] {
+        const row = this.grid.gridAPI.get_row_by_index(this.grid.rowList.first?.index || 0);
+        if (row && row.cells) {
+            return row.cells.map(cell => cell.column);
+        }
+    }
+
+    /**
+    * @hidden
+    * @internal
+    */
+    public get isLeafHeaderAriaHidden(): boolean {
+        return this.grid.navigation.activeNode.row === -1;
+    }
+
     /** The virtualized part of the header row containing the unpinned header groups. */
     @ViewChild('headerVirtualContainer', { read: IgxGridForOfDirective, static: true })
     public headerContainer: IgxGridForOfDirective<ColumnType, ColumnType[]>;
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
@@ -310,6 +310,13 @@
                 }
             }
         </div>
+
+        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->
+        <div role="row" style="width: 0; height: 0; position: absolute; top: -10000px;">
+            @for (column of visibleLeafColumns; track column.index) {
+                <div role="columnheader" [attr.aria-hidden]="isLeafHeaderAriaHidden">{{ column.header || column.field }}</div>
+            }
+        </div>
     </div>
 </div>
 <!-- Header thumb area -->
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts
diff --git a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
