Skip to content

refactor(carousel): Tab order of carousel items #17456

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rkaraivanov merged 4 commits into from
Jul 28, 2026
+36 −30
Merged

refactor(carousel): Tab order of carousel items #17456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
717e9d9
refactor(carousel): Tab order of carousel items
rkaraivanov Jul 23, 2026
5104a4a
Merge branch 'master' into rkaraivanov/carousel-focus-tab-order
kdinev Jul 27, 2026
0ec9acd
Potential fix for pull request finding
kdinev Jul 28, 2026
581dc8f
Merge branch 'master' into rkaraivanov/carousel-focus-tab-order
kdinev Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,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 the active slide indicator, navigation buttons, or the first focusable element in the active slide, whichever is available.

### General

- **Touch Gestures (HammerJS)** _(optional)_
Expand Down Expand Up @@ -119,7 +124,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`).
Expand Down Expand Up @@ -160,7 +165,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);
}
```
Expand Down Expand Up @@ -194,7 +199,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.

Expand Down Expand Up @@ -260,14 +265,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);
}
```
Expand All @@ -276,9 +281,9 @@ All notable changes for each version of this project will be documented in this

```html
<igx-grid-toolbar>
<igx-grid-toolbar-exporter
[exportPDF]="true"
[exportExcel]="true"
<igx-grid-toolbar-exporter
[exportPDF]="true"
[exportExcel]="true"
[exportCSV]="true">
</igx-grid-toolbar-exporter>
</igx-grid-toolbar>
Expand Down Expand Up @@ -415,12 +420,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.
Expand Down Expand Up @@ -465,7 +470,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`
Expand Down
35 changes: 18 additions & 17 deletions projects/igniteui-angular/carousel/src/carousel/carousel.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,24 @@
</igx-icon>
</ng-template>

@if (showIndicators) {
<div [ngClass]="indicatorsClass" [attr.role]="'tablist'" (keyup)="handleKeyUp($event)" (focusout)="handleFocusOut($event)" (click)="handleClick()" (keydown)="handleKeydown($event)">
@for (slide of slides; track slide) {
Comment on lines +19 to +21

Copilot AI Jul 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added three specs to carousel.component.spec.ts inside describe('Base Tests: ...') to lock in the expected tab order:

  1. should render indicators before navigation buttons in the DOM to preserve tab order — uses compareDocumentPosition to assert the indicators container precedes both the prev and next buttons in DOM order (indicators → prev → next).
  2. should have active indicator as first keyboard-focusable element when navigation is disabled — verifies the active indicator has tabindex="0", inactive ones have tabindex="-1", and the indicators container precedes the active slide when navigation buttons are absent.
  3. should have navigation buttons precede active slide when indicators are hidden — verifies nav buttons appear before the active slide in the DOM when indicators are hidden.

<div #indicators
class="igx-carousel-indicators__indicator"
(click)="select(slide)"
[id]="'tab-'+ slide.index + '-' + total"
[attr.role]="'tab'"
[attr.tabindex]="slide.active ? 0 : -1"
[attr.aria-label]="resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total"
[attr.aria-controls]="'panel-' + slide.index"
[attr.aria-selected]="slide.active">
<ng-container *ngTemplateOutlet="getIndicatorTemplate; context: {$implicit: slide};"></ng-container>
</div>
}
</div>
}

@if (navigation && slides.length) {
<button
igxButton
Expand All @@ -40,23 +58,6 @@
</button>
}

@if (showIndicators) {
<div [ngClass]="indicatorsClass" [attr.role]="'tablist'" (keyup)="handleKeyUp($event)" (focusout)="handleFocusOut($event)" (click)="handleClick()" (keydown)="handleKeydown($event)">
@for (slide of slides; track slide) {
<div #indicators
class="igx-carousel-indicators__indicator"
(click)="select(slide)"
[id]="'tab-'+ slide.index + '-' + total"
[attr.role]="'tab'"
[attr.tabindex]="slide.active ? 0 : -1"
[attr.aria-label]="resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total"
[attr.aria-controls]="'panel-' + slide.index"
[attr.aria-selected]="slide.active">
<ng-container *ngTemplateOutlet="getIndicatorTemplate; context: {$implicit: slide};"></ng-container>
</div>
}
</div>
}

@if (showIndicatorsLabel) {
<div [ngClass]="indicatorsClass" class="igx-carousel-label-indicator">
Expand Down
Loading