deprecate(carousel): keyboardSupport

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

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"
+            }
+        }
+    ]
+}

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`,
+        `
+        <igx-carousel [keyboardSupport]="true"></igx-carousel>
+        <igx-carousel [keyboardSupport]="false"></igx-carousel>
+        <igx-carousel [keyboardSupport]="myProp"></igx-carousel>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-carousel></igx-carousel>
+        <igx-carousel></igx-carousel>
+        <igx-carousel></igx-carousel>
+        `
+        );
+    });
 });

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

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<any>;
-    slideAdded: EventEmitter<any>;
-    slideRemoved: EventEmitter<any>;
-    carouselPaused: EventEmitter<any>;
-    carouselPlaying: EventEmitter<any>;
-    next(): void;
-    prev(): void;
-    play(): void;
-    stop(): void
-}
-
-/** @hidden */
-export const IGX_CAROUSEL_COMPONENT = /*@__PURE__*/new InjectionToken<ICarouselComponentBase>('IgxCarouselToken');
-
 /** @hidden */
 export interface IgxSlideComponentBase {
     direction: Direction;

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();

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
-     * <igx-carousel [keyboardSupport]="true"></igx-carousel>
-     * ```
-     *
-     * @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();
 

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<boolean>();
 
-    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.