From 717e9d90adee9a8a3941c4d7fba8295033f61072 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Thu, 23 Jul 2026 18:28:33 +0300 Subject: [PATCH] refactor(carousel): Tab order of carousel items Changed the default tab order of the component, focus now flows starting with its indicator container, navigation buttons, or the first focusable element in the active slide, whichever is available. --- CHANGELOG.md | 31 +++++++++------- .../src/carousel/carousel.component.html | 35 ++++++++++--------- 2 files changed, 36 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 844cb74855d..cf8f3ab51a7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -70,6 +70,11 @@ All notable changes for each version of this project will be documented in this - `IgxInputGroupComponent`, `IgxSelectComponent`, `IgxDatePickerComponent`, `IgxDateRangePickerComponent`, `IgxTimePickerComponent` - The default `type` has changed from `line` to `box`. The `ng update` migration automatically adds `type="line"` to existing instances that do not already have an explicit `type` binding to preserve their appearance. +### Behavioral Changes + +- `IgxCarouselComponent` + - Changed the default tab order of the component, focus now flows starting with its indicator container, navigation buttons, or the first focusable element in the active slide, whichever is available. + ### General - **Touch Gestures (HammerJS)** _(optional)_ @@ -109,7 +114,7 @@ All notable changes for each version of this project will be documented in this - `IgxOverlayService` - **Deprecation** - The `outlet` property in `OverlaySettings`, `IgxOverlayOutletDirective`, and `igxToggleOutlet` input on `IgxToggleActionDirective` are deprecated and will be removed in a future version. As overlay service now integrates the HTML Popover API and prefers rendering content in place / in the top layer, significantly reducing the need for outlet containers, new code should rely on the default in-place / top-layer rendering behavior instead of custom outlet containers. - + - **AI-Assisted Development - Copilot Skill: Generate from Image Design** - Added a new `igniteui-angular-generate-from-image-design` Copilot Skill that teaches AI coding assistants/agents (e.g., GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to implement Angular application views directly from design images (screenshots, mockups, wireframes). - The skill provides a structured workflow covering image analysis, component discovery via MCP tools (`list_components`, `get_doc`), theme generation (`create_palette`, `create_theme`, `create_component_theme`), layout implementation, and visual refinement (`set_size`, `set_spacing`, `set_roundness`). @@ -150,7 +155,7 @@ All notable changes for each version of this project will be documented in this data: NOTO_SANS_BOLD // Optional: Base64-encoded bold TTF font data } }; - + this.pdfExporter.export(this.grid, options); } ``` @@ -184,7 +189,7 @@ All notable changes for each version of this project will be documented in this - **Theming & Styling** - Theming & Styling (includes MCP server setup for live theming tools) - These skills are automatically discovered when placed in the agent's skills path ( e.g. `.claude/skills`) and this release ships with an optional migration to add those to your project. For more information, see the [README](README.md#ai-assisted-development). -- Added `IgxGridLiteComponent` wrapper around the `igc-grid-lite` Web Component _(in Developer Preview)_ +- Added `IgxGridLiteComponent` wrapper around the `igc-grid-lite` Web Component _(in Developer Preview)_ Available from the `igniteui-angular/grids/lite` entry point. The wrapper component adds Angular-friendly API with similar inputs, including two-way bindable `sortingExpressions` and `filteringExpressions`, Angular template-based cell and header rendering with declarative templates via the `igxGridLiteCell` and `igxGridLiteHeader` directives. @@ -250,14 +255,14 @@ All notable changes for each version of this project will be documented in this import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular'; constructor(private pdfExporter: IgxPdfExporterService) {} - + exportToPdf() { const options = new IgxPdfExporterOptions('MyGridExport'); options.pageOrientation = 'landscape'; // 'portrait' or 'landscape' (default: 'landscape') options.pageSize = 'a4'; // 'a3', 'a4', 'a5', 'letter', 'legal', etc. options.fontSize = 10; options.showTableBorders = true; - + this.pdfExporter.export(this.grid, options); } ``` @@ -266,9 +271,9 @@ All notable changes for each version of this project will be documented in this ```html - @@ -405,12 +410,12 @@ See the [Angular Package Format documentation](https://angular.io/guide/angular- - `igxCalendarSubheader` - Added new properties: - - `usePredefinedRanges` - Whether to render built-in predefined ranges + - `usePredefinedRanges` - Whether to render built-in predefined ranges - `customRanges` - Allows the user to provide custom ranges rendered as chips - - `resourceStrings` - Allows the user to provide set of resource strings - + - `resourceStrings` - Allows the user to provide set of resource strings + - **Behavioral Changes** - - Added cancel button to the dialog, allowing the user to cancel the selection. + - Added cancel button to the dialog, allowing the user to cancel the selection. - The calendar is displayed with header in `dialog` mode by default. - The picker remains open when typing (in two-inputs and `dropdown` mode). - The calendar selection is updated with the typed value. @@ -455,7 +460,7 @@ See the [Angular Package Format documentation](https://angular.io/guide/angular- - **Groupby improvements** - Refactored grouping algorithm from recursive to iterative. - Optimized grouping operations. - + ## 20.0.6 ### General - `IgxSimpleCombo` diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel.component.html b/projects/igniteui-angular/carousel/src/carousel/carousel.component.html index d79dc110577..c85fa44d1ae 100644 --- a/projects/igniteui-angular/carousel/src/carousel/carousel.component.html +++ b/projects/igniteui-angular/carousel/src/carousel/carousel.component.html @@ -16,6 +16,24 @@ +@if (showIndicators) { +
+ @for (slide of slides; track slide) { +
+ +
+ } +
+} + @if (navigation && slides.length) {