diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ad66822d2c..d3dc820aa9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,8 +5,11 @@ All notable changes for each version of this project will be documented in this ## 19.1.0 ### General - `IgxCarousel` + - Removed deprecated property `keyboardSupport`. - **Behavioral Changes** - the `maximumIndicatorsCount` input property now defaults to `10`. - **Deprecation** - `CarouselIndicatorsOrientation` enum members `top` and `bottom` have been deprecated and will be removed in a future version. Use `start` and `end` instead. +- `IgxSlide` + - **Deprecation** - `tabIndex` has been deprecated and will be removed in a future version. ## 19.0.0 ### General diff --git a/projects/igniteui-angular/migrations/update-19_1_0/changes/inputs.json b/projects/igniteui-angular/migrations/update-19_1_0/changes/inputs.json new file mode 100644 index 00000000000..31964fb2d2d --- /dev/null +++ b/projects/igniteui-angular/migrations/update-19_1_0/changes/inputs.json @@ -0,0 +1,13 @@ +{ + "$schema": "../../common/schema/binding.schema.json", + "changes": [ + { + "name": "keyboardSupport", + "remove": true, + "owner": { + "selector": "igx-carousel", + "type": "component" + } + } + ] +} diff --git a/projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts index 6704075ffa0..fb44d6d7ec7 100644 --- a/projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts +++ b/projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts @@ -36,4 +36,24 @@ describe(`Update to ${version}`, () => { ); }); }); + + it('should remove igx-caroursel property `keyboardSupport` in template', async () => { + appTree.create(`/testSrc/appPrefix/component/test.component.html`, + ` + + + + ` + ); + + const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree); + + expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual( + ` + + + + ` + ); + }); }); diff --git a/projects/igniteui-angular/src/lib/carousel/README.md b/projects/igniteui-angular/src/lib/carousel/README.md index a1696e9baf4..78c2938ec58 100644 --- a/projects/igniteui-angular/src/lib/carousel/README.md +++ b/projects/igniteui-angular/src/lib/carousel/README.md @@ -15,7 +15,6 @@ A walkthrough of how to get started can be found [here](https://www.infragistics | `navigation` | boolean | Controls should the carousel render the left/right navigation buttons. Defaults to `true`. | | `indicators` | boolean | Controls should the carousel render the indicators. Defaults to `true`. | | `vertical` | boolean | Controls should the carousel be rendered in vertical alignment. Defaults to `false`. | -| `keyboardSupport` | boolean | Controls should the keyboard navigation should be supported. Defaults to `false`. | | `gesturesSupport` | boolean | Controls should the gestures should be supported. Defaults to `true`. | | `maximumIndicatorsCount` | number | The number of visible indicators. Defaults to `10`. | | `indicatorsOrientation` | CarouselIndicatorsOrientation | Controls the orientation of the indicators. Defaults to `end`. | @@ -39,10 +38,14 @@ A walkthrough of how to get started can be found [here](https://www.infragistics | `select(slide: IgxSlide, direction: Direction)`| void | Selects the slide and the direction to transition to. Emits `slideChanged` event. | ### Keyboard navigation -Keyboard navigation will be enabled when the **IgxCarousel** component is focused and `keyboardSupport` property is set to `true`: -- Arrow keys will navigate through the slides. -- `Home` will focus the first slide inside the carousel view. -- `End` will focus the last slide inside the carousel view. + +- Navigation buttons + - `Space`/`Enter` key - navigates to the next/previous slide. +- Indicators + - `ArrowLeft` key - navigates to the previous (next in Right-to-Left mode) slide. + - `ArrowRight` key - navigates to the next (previous in Right-to-Left mode) slide. + - `Home` key - navigates to the first (last in Right-to-Left mode) slide. + - `End` key - navigates to the last (first in Right-to-Left mode) slide. ### Templates The **IgxCarousel** supports templating indicators and navigation buttons diff --git a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts index d4b9349c7ca..b441651292f 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts @@ -1,9 +1,9 @@ import { AnimationReferenceMetadata, useAnimation } from '@angular/animations'; -import { ChangeDetectorRef, EventEmitter, Inject, InjectionToken } from '@angular/core'; +import { ChangeDetectorRef, EventEmitter, Inject } from '@angular/core'; import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; import { AnimationPlayer, AnimationService } from '../services/animation/animation'; import { fadeIn, slideInLeft } from 'igniteui-angular/animations'; -import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums'; +import { CarouselAnimationType } from './enums'; export enum Direction { NONE, NEXT, PREV } @@ -12,37 +12,6 @@ export interface CarouselAnimationSettings { leaveAnimation: AnimationReferenceMetadata; } -export interface ICarouselComponentBase { - id: string; - role: string; - cssClass: string; - loop: boolean; - pause: boolean; - navigation: boolean; - indicators: boolean; - vertical: boolean; - keyboardSupport: boolean; - gesturesSupport: boolean; - maximumIndicatorsCount: number; - indicatorsOrientation: CarouselIndicatorsOrientation; - animationType: CarouselAnimationType; - total: number; - current: number; - interval: number; - slideChanged: EventEmitter; - slideAdded: EventEmitter; - slideRemoved: EventEmitter; - carouselPaused: EventEmitter; - carouselPlaying: EventEmitter; - next(): void; - prev(): void; - play(): void; - stop(): void -} - -/** @hidden */ -export const IGX_CAROUSEL_COMPONENT = /*@__PURE__*/new InjectionToken('IgxCarouselToken'); - /** @hidden */ export interface IgxSlideComponentBase { direction: Direction; diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts index f0fa7cca10a..e18943ecc81 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts @@ -233,37 +233,41 @@ describe('Carousel', () => { it('keyboard navigation test', () => { spyOn(carousel.slideChanged, 'emit'); carousel.pause = true; - carousel.keyboardSupport = true; + const indicators = HelperTestFunctions.getIndicatorsContainer(fixture); + + indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' })); + fixture.detectChanges(); + expect(indicators.classList).toContain('igx-carousel-indicators--focused'); - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 1); - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 2); - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 3); - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 0); - UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true); + UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 3); - UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true); + UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 2); - UIInteractions.triggerKeyDownEvtUponElem('Home', carousel.nativeElement, true); + UIInteractions.triggerKeyDownEvtUponElem('Home', indicators, true); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 0); - UIInteractions.triggerKeyDownEvtUponElem('End', carousel.nativeElement, true); + UIInteractions.triggerKeyDownEvtUponElem('End', indicators, true); fixture.detectChanges(); HelperTestFunctions.verifyActiveSlide(carousel, 3); @@ -402,39 +406,6 @@ describe('Carousel', () => { expect(indicatorsContainer).toBeDefined(); }); - it('keyboardSupport changes support for keyboard navigation', () => { - expect(carousel.keyboardSupport).toBe(false); - carousel.select(carousel.get(1)); - fixture.detectChanges(); - - spyOn(carousel.slideChanged, 'emit'); - - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); - fixture.detectChanges(); - HelperTestFunctions.verifyActiveSlide(carousel, 1); - - UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true); - fixture.detectChanges(); - HelperTestFunctions.verifyActiveSlide(carousel, 1); - - UIInteractions.triggerKeyDownEvtUponElem('End', carousel.nativeElement, true); - fixture.detectChanges(); - HelperTestFunctions.verifyActiveSlide(carousel, 1); - - UIInteractions.triggerKeyDownEvtUponElem('Home', carousel.nativeElement, true); - fixture.detectChanges(); - HelperTestFunctions.verifyActiveSlide(carousel, 1); - - expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(0); - carousel.keyboardSupport = true; - fixture.detectChanges(); - - UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true); - fixture.detectChanges(); - HelperTestFunctions.verifyActiveSlide(carousel, 2); - expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(1); - }); - it('should stop/play on mouse enter/leave ', () => { carousel.interval = 1000; carousel.play(); diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 50f472a4a00..0943b458e61 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -30,7 +30,7 @@ import { CarouselResourceStringsEN, ICarouselResourceStrings } from '../core/i18 import { first, IBaseEventArgs, last, PlatformUtil } from '../core/utils'; import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; import { AnimationService } from '../services/animation/animation'; -import { Direction, ICarouselComponentBase, IGX_CAROUSEL_COMPONENT, IgxCarouselComponentBase } from './carousel-base'; +import { Direction, IgxCarouselComponentBase } from './carousel-base'; import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives'; import { IgxSlideComponent } from './slide.component'; import { IgxIconComponent } from '../icon/icon.component'; @@ -75,8 +75,7 @@ export class CarouselHammerConfig extends HammerGestureConfig { { provide: HAMMER_GESTURE_CONFIG, useClass: CarouselHammerConfig - }, - { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent } + } ], selector: 'igx-carousel', templateUrl: 'carousel.component.html', @@ -88,7 +87,7 @@ export class CarouselHammerConfig extends HammerGestureConfig { imports: [IgxButtonDirective, IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet] }) -export class IgxCarouselComponent extends IgxCarouselComponentBase implements ICarouselComponentBase, OnDestroy, AfterContentInit { +export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit { /** * Sets the `id` of the carousel. @@ -206,18 +205,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements IC */ @Input({ transform: booleanAttribute }) public override vertical = false; - /** - * Controls whether the carousel should support keyboard navigation. - * Default value is `false`. - * ```html - * - * ``` - * - * @memberOf IgxCarouselComponent - * @deprecated in version 18.2.0. - */ - @Input({ transform: booleanAttribute }) public keyboardSupport = false; - /** * Controls whether the carousel should support gestures. * Default value is `true`. @@ -591,27 +578,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements IC this.differ = this.iterableDiffers.find([]).create(null); } - - /** @hidden */ - @HostListener('keydown.arrowright', ['$event']) - public onKeydownArrowRight(event) { - if (this.keyboardSupport) { - event.preventDefault(); - this.next(); - this.focusElement(); - } - } - - /** @hidden */ - @HostListener('keydown.arrowleft', ['$event']) - public onKeydownArrowLeft(event) { - if (this.keyboardSupport) { - event.preventDefault(); - this.prev(); - this.focusElement(); - } - } - /** @hidden */ @HostListener('tap', ['$event']) public onTap(event) { @@ -628,26 +594,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements IC } } - /** @hidden */ - @HostListener('keydown.home', ['$event']) - public onKeydownHome(event) { - if (this.keyboardSupport && this.slides.length > 0) { - event.preventDefault(); - this.slides.first.active = true; - this.focusElement(); - } - } - - /** @hidden */ - @HostListener('keydown.end', ['$event']) - public onKeydownEnd(event) { - if (this.keyboardSupport && this.slides.length > 0) { - event.preventDefault(); - this.slides.last.active = true; - this.focusElement(); - } - } - /** @hidden */ @HostListener('mouseenter') public onMouseEnter() { @@ -801,9 +747,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements IC /** @hidden */ public handleKeydown(event: KeyboardEvent): void { - if (this.keyboardSupport) { - return; - } const { key } = event; const slides = this.slides.toArray(); diff --git a/projects/igniteui-angular/src/lib/carousel/slide.component.ts b/projects/igniteui-angular/src/lib/carousel/slide.component.ts index 3b56e927593..0e753787e3f 100644 --- a/projects/igniteui-angular/src/lib/carousel/slide.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/slide.component.ts @@ -1,6 +1,6 @@ import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute, Inject } from '@angular/core'; import { Subject } from 'rxjs'; -import { Direction, ICarouselComponentBase, IGX_CAROUSEL_COMPONENT, IgxSlideComponentBase } from './carousel-base'; +import { Direction, IgxSlideComponentBase } from './carousel-base'; /** * A slide component that usually holds an image and/or a caption text. @@ -54,10 +54,11 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli * ``` * * @memberof IgxSlideComponent + * @deprecated in version 19.1.0. */ @HostBinding('attr.tabindex') public get tabIndex() { - return this.active && this.carousel.keyboardSupport ? 0 : null; + return this.active ? 0 : null; } /** @@ -129,10 +130,7 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli private _active = false; private _destroy$ = new Subject(); - constructor( - private elementRef: ElementRef, - @Inject(IGX_CAROUSEL_COMPONENT) private carousel: ICarouselComponentBase - ) { } + constructor(private elementRef: ElementRef) { } /** * Returns a reference to the carousel element in the DOM.