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

Open
rkaraivanov wants to merge 1 commit into
base: master
Choose a base branch
from
+36 −30
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 @@ -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.
Comment on lines +75 to +76

### General

- **Touch Gestures (HammerJS)** _(optional)_
Expand Down Expand Up @@ -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`).
Expand Down Expand Up @@ -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);
}
```
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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);
}
```
Expand All @@ -266,9 +271,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 @@ -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.
Expand Down Expand Up @@ -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`
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
<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