diff --git a/spec/tests/carousel/carouselSpec.js b/spec/tests/carousel/carouselSpec.js index f430ab6f96..4e87226dfd 100644 --- a/spec/tests/carousel/carouselSpec.js +++ b/spec/tests/carousel/carouselSpec.js @@ -20,6 +20,10 @@ describe('Carousel', () => { afterEach(() => XunloadFixtures()); describe('carousel plugin', () => { + afterEach(() => { + M.Carousel.getInstance(document.querySelector('.carousel')).destroy(); + }); + it('No wrap next and prev should not overflow', (done) => { const noWrap = M.Carousel.init(document.querySelector('#slider-no-wrap'), { duration: 10, @@ -39,5 +43,19 @@ describe('Carousel', () => { }, 30); }, 50); }); + + it('should change index and focus its respective item on indicator click', (done) => { + const carousel = M.Carousel.init(document.querySelector('.carousel'), { + duration: 10, + indicators: true + }); + + document.querySelectorAll('.indicator-item')[1].click(); + setTimeout(() => { + expect(carousel.center).toEqual(1, 'carousel item was not visible after indicator interaction'); + done(); + }, 30); + }); + }); }); diff --git a/src/carousel.ts b/src/carousel.ts index afdffd2705..e4d49ec530 100644 --- a/src/carousel.ts +++ b/src/carousel.ts @@ -133,6 +133,7 @@ export class Carousel extends Component { if (this.showIndicators) { const indicator = document.createElement('li'); indicator.classList.add('indicator-item'); + indicator.tabIndex = 0; if (i === 0) { indicator.classList.add('active'); } @@ -211,6 +212,7 @@ export class Carousel extends Component { if (this.showIndicators && this._indicators) { this._indicators.querySelectorAll('.indicator-item').forEach((el) => { el.addEventListener('click', this._handleIndicatorClick); + el.addEventListener('keypress', this._handleIndicatorKeyPress); }); } // Resize @@ -352,6 +354,17 @@ export class Carousel extends Component { _handleIndicatorClick = (e: Event) => { e.stopPropagation(); + this._handleIndicatorInteraction(e); + } + + _handleIndicatorKeyPress = (e: KeyboardEvent) => { + e.stopPropagation(); + if (Utils.keys.ENTER.includes(e.key)) { + this._handleIndicatorInteraction(e); + } + } + + _handleIndicatorInteraction = (e: Event) => { const indicator = (e.target).closest('.indicator-item'); if (indicator) { const index = [...indicator.parentNode.children].indexOf(indicator);