diff --git a/src/carousel.ts b/src/carousel.ts index afdffd2705..99f2f7daea 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 (e.keyCode === 13) { + this._handleIndicatorInteraction(e); + } + } + + _handleIndicatorInteraction = (e: Event) => { const indicator = (e.target).closest('.indicator-item'); if (indicator) { const index = [...indicator.parentNode.children].indexOf(indicator);