Merge pull request #547 from gselderslaghs/carousel-accessibility

accessibility(Carousel) indicators not accessible by keyboard interaction

Author: wuda-io

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);
+    });
+
   });
 });

src/carousel.ts

@@ -133,6 +133,7 @@ export class Carousel extends Component<CarouselOptions> {
       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<CarouselOptions> {
     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<CarouselOptions> {
 
   _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 = (<HTMLElement>e.target).closest('.indicator-item');
     if (indicator) {
       const index = [...indicator.parentNode.children].indexOf(indicator);