Skip to content

Commit 28ced79

Browse files
RivaIvanovaRivaIvanova
committed
chore(carousel): remove deprecated keyboardSupport
1 parent 58936f8 commit 28ced79

File tree

8 files changed

+59
-105
lines changed

8 files changed

+59
-105
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@ All notable changes for each version of this project will be documented in this
55
## 19.1.0
66
### General
77
- `IgxCarousel`
8+
- Removed deprecated property `keyboardSupport`.
89
- **Behavioral Changes** - the `maximumIndicatorsCount` input property now defaults to `10`.
910
- **Deprecation** - `CarouselIndicatorsOrientation` enum members `top` and `bottom` have been deprecated and will be removed in a future version. Use `start` and `end` instead.
11+
- `IgxSlide`
12+
- **Deprecation** - `tabIndex` has been deprecated and will be removed in a future version.
1013

1114
## 19.0.0
1215
### General

‎projects/igniteui-angular/migrations/update-19_1_0/changes/inputs.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"$schema": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "keyboardSupport",
6+
"remove": true,
7+
"owner": {
8+
"selector": "igx-carousel",
9+
"type": "component"
10+
}
11+
}
12+
]
13+
}

‎projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,24 @@ describe(`Update to ${version}`, () => {
3636
);
3737
});
3838
});
39+
40+
it('should remove igx-caroursel property `keyboardSupport` in template', async () => {
41+
appTree.create(`/testSrc/appPrefix/component/test.component.html`,
42+
`
43+
<igx-carousel [keyboardSupport]="true"></igx-carousel>
44+
<igx-carousel [keyboardSupport]="false"></igx-carousel>
45+
<igx-carousel [keyboardSupport]="myProp"></igx-carousel>
46+
`
47+
);
48+
49+
const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
50+
51+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
52+
`
53+
<igx-carousel></igx-carousel>
54+
<igx-carousel></igx-carousel>
55+
<igx-carousel></igx-carousel>
56+
`
57+
);
58+
});
3959
});

‎projects/igniteui-angular/src/lib/carousel/README.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
1515
| `navigation` | boolean | Controls should the carousel render the left/right navigation buttons. Defaults to `true`. |
1616
| `indicators` | boolean | Controls should the carousel render the indicators. Defaults to `true`. |
1717
| `vertical` | boolean | Controls should the carousel be rendered in vertical alignment. Defaults to `false`. |
18-
| `keyboardSupport` | boolean | Controls should the keyboard navigation should be supported. Defaults to `false`. |
1918
| `gesturesSupport` | boolean | Controls should the gestures should be supported. Defaults to `true`. |
2019
| `maximumIndicatorsCount` | number | The number of visible indicators. Defaults to `10`. |
2120
| `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
3938
| `select(slide: IgxSlide, direction: Direction)`| void | Selects the slide and the direction to transition to. Emits `slideChanged` event. |
4039

4140
### Keyboard navigation
42-
Keyboard navigation will be enabled when the **IgxCarousel** component is focused and `keyboardSupport` property is set to `true`:
43-
- Arrow keys will navigate through the slides.
44-
- `Home` will focus the first slide inside the carousel view.
45-
- `End` will focus the last slide inside the carousel view.
41+
42+
- Navigation buttons
43+
- `Space`/`Enter` key - navigates to the next/previous slide.
44+
- Indicators
45+
- `ArrowLeft` key - navigates to the previous (next in Right-to-Left mode) slide.
46+
- `ArrowRight` key - navigates to the next (previous in Right-to-Left mode) slide.
47+
- `Home` key - navigates to the first (last in Right-to-Left mode) slide.
48+
- `End` key - navigates to the last (first in Right-to-Left mode) slide.
4649

4750
### Templates
4851
The **IgxCarousel** supports templating indicators and navigation buttons

‎projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts‎

Lines changed: 13 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -233,37 +233,41 @@ describe('Carousel', () => {
233233
it('keyboard navigation test', () => {
234234
spyOn(carousel.slideChanged, 'emit');
235235
carousel.pause = true;
236-
carousel.keyboardSupport = true;
236+
const indicators = HelperTestFunctions.getIndicatorsContainer(fixture);
237+
238+
indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
239+
fixture.detectChanges();
240+
expect(indicators.classList).toContain('igx-carousel-indicators--focused');
237241

238-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
242+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
239243
fixture.detectChanges();
240244
HelperTestFunctions.verifyActiveSlide(carousel, 1);
241245

242-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
246+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
243247
fixture.detectChanges();
244248
HelperTestFunctions.verifyActiveSlide(carousel, 2);
245249

246-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
250+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
247251
fixture.detectChanges();
248252
HelperTestFunctions.verifyActiveSlide(carousel, 3);
249253

250-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
254+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
251255
fixture.detectChanges();
252256
HelperTestFunctions.verifyActiveSlide(carousel, 0);
253257

254-
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true);
258+
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true);
255259
fixture.detectChanges();
256260
HelperTestFunctions.verifyActiveSlide(carousel, 3);
257261

258-
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true);
262+
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true);
259263
fixture.detectChanges();
260264
HelperTestFunctions.verifyActiveSlide(carousel, 2);
261265

262-
UIInteractions.triggerKeyDownEvtUponElem('Home', carousel.nativeElement, true);
266+
UIInteractions.triggerKeyDownEvtUponElem('Home', indicators, true);
263267
fixture.detectChanges();
264268
HelperTestFunctions.verifyActiveSlide(carousel, 0);
265269

266-
UIInteractions.triggerKeyDownEvtUponElem('End', carousel.nativeElement, true);
270+
UIInteractions.triggerKeyDownEvtUponElem('End', indicators, true);
267271
fixture.detectChanges();
268272
HelperTestFunctions.verifyActiveSlide(carousel, 3);
269273

@@ -402,39 +406,6 @@ describe('Carousel', () => {
402406
expect(indicatorsContainer).toBeDefined();
403407
});
404408

405-
it('keyboardSupport changes support for keyboard navigation', () => {
406-
expect(carousel.keyboardSupport).toBe(false);
407-
carousel.select(carousel.get(1));
408-
fixture.detectChanges();
409-
410-
spyOn(carousel.slideChanged, 'emit');
411-
412-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
413-
fixture.detectChanges();
414-
HelperTestFunctions.verifyActiveSlide(carousel, 1);
415-
416-
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true);
417-
fixture.detectChanges();
418-
HelperTestFunctions.verifyActiveSlide(carousel, 1);
419-
420-
UIInteractions.triggerKeyDownEvtUponElem('End', carousel.nativeElement, true);
421-
fixture.detectChanges();
422-
HelperTestFunctions.verifyActiveSlide(carousel, 1);
423-
424-
UIInteractions.triggerKeyDownEvtUponElem('Home', carousel.nativeElement, true);
425-
fixture.detectChanges();
426-
HelperTestFunctions.verifyActiveSlide(carousel, 1);
427-
428-
expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(0);
429-
carousel.keyboardSupport = true;
430-
fixture.detectChanges();
431-
432-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
433-
fixture.detectChanges();
434-
HelperTestFunctions.verifyActiveSlide(carousel, 2);
435-
expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(1);
436-
});
437-
438409
it('should stop/play on mouse enter/leave ', () => {
439410
carousel.interval = 1000;
440411
carousel.play();

‎projects/igniteui-angular/src/lib/carousel/carousel.component.ts‎

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -205,18 +205,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
205205
*/
206206
@Input({ transform: booleanAttribute }) public override vertical = false;
207207

208-
/**
209-
* Controls whether the carousel should support keyboard navigation.
210-
* Default value is `false`.
211-
* ```html
212-
* <igx-carousel [keyboardSupport]="true"></igx-carousel>
213-
* ```
214-
*
215-
* @memberOf IgxCarouselComponent
216-
* @deprecated in version 18.2.0.
217-
*/
218-
@Input({ transform: booleanAttribute }) public keyboardSupport = false;
219-
220208
/**
221209
* Controls whether the carousel should support gestures.
222210
* Default value is `true`.
@@ -590,27 +578,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
590578
this.differ = this.iterableDiffers.find([]).create(null);
591579
}
592580

593-
594-
/** @hidden */
595-
@HostListener('keydown.arrowright', ['$event'])
596-
public onKeydownArrowRight(event) {
597-
if (this.keyboardSupport) {
598-
event.preventDefault();
599-
this.next();
600-
this.focusElement();
601-
}
602-
}
603-
604-
/** @hidden */
605-
@HostListener('keydown.arrowleft', ['$event'])
606-
public onKeydownArrowLeft(event) {
607-
if (this.keyboardSupport) {
608-
event.preventDefault();
609-
this.prev();
610-
this.focusElement();
611-
}
612-
}
613-
614581
/** @hidden */
615582
@HostListener('tap', ['$event'])
616583
public onTap(event) {
@@ -627,26 +594,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
627594
}
628595
}
629596

630-
/** @hidden */
631-
@HostListener('keydown.home', ['$event'])
632-
public onKeydownHome(event) {
633-
if (this.keyboardSupport && this.slides.length > 0) {
634-
event.preventDefault();
635-
this.slides.first.active = true;
636-
this.focusElement();
637-
}
638-
}
639-
640-
/** @hidden */
641-
@HostListener('keydown.end', ['$event'])
642-
public onKeydownEnd(event) {
643-
if (this.keyboardSupport && this.slides.length > 0) {
644-
event.preventDefault();
645-
this.slides.last.active = true;
646-
this.focusElement();
647-
}
648-
}
649-
650597
/** @hidden */
651598
@HostListener('mouseenter')
652599
public onMouseEnter() {
@@ -800,9 +747,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
800747

801748
/** @hidden */
802749
public handleKeydown(event: KeyboardEvent): void {
803-
if (this.keyboardSupport) {
804-
return;
805-
}
806750
const { key } = event;
807751
const slides = this.slides.toArray();
808752

‎projects/igniteui-angular/src/lib/carousel/slide.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,11 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
5555
* ```
5656
*
5757
* @memberof IgxSlideComponent
58+
* @deprecated in version 19.1.0.
5859
*/
5960
@HostBinding('attr.tabindex')
6061
public get tabIndex() {
61-
return this.active && this.carousel.keyboardSupport ? 0 : null;
62+
return this.active ? 0 : null;
6263
}
6364

6465
/**

‎src/app/carousel/carousel.sample.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ <h4 class="sample-title">Desktop</h4>
55

66
<igx-switch [(ngModel)]="car.navigation">navigation</igx-switch>
77
<igx-switch [(ngModel)]="car.indicators">indicators</igx-switch>
8-
<igx-switch [(ngModel)]="car.keyboardSupport">keyboardSupport</igx-switch>
98
<igx-switch [(ngModel)]="car.gesturesSupport">gesturesSupport</igx-switch>
109
<igx-switch [(ngModel)]="loop">loop</igx-switch>
1110
<igx-switch [(ngModel)]="pause">pause</igx-switch>

0 commit comments

Comments
 (0)