From 4775948a3c7f8abc0b84db7d19a14b3649deaaf6 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Wed, 11 Dec 2024 07:55:47 +0100
Subject: [PATCH 1/3] accessibility(Carousel) implement keyboard accessibility
 on indicators

---
 src/carousel.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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<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 (e.keyCode === 13) {
+      this._handleIndicatorInteraction(e);
+    }
+  }
+
+  _handleIndicatorInteraction = (e: Event) => {
     const indicator = (<HTMLElement>e.target).closest('.indicator-item');
     if (indicator) {
       const index = [...indicator.parentNode.children].indexOf(indicator);

From a9653958fe7c548ac187475d9434ac24b60afb36 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Wed, 11 Dec 2024 08:16:08 +0100
Subject: [PATCH 2/3] enhancement(Carousel) implemented spec test on indicator
 click

---
 spec/tests/carousel/carouselSpec.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

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

From 3b0aee82854be5f57b0c9b623bfab912e9563c31 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 13 Dec 2024 23:53:18 +0100
Subject: [PATCH 3/3] refactor(Carousel) replace keyCode with key

---
 src/carousel.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/carousel.ts b/src/carousel.ts
index 99f2f7daea..e4d49ec530 100644
--- a/src/carousel.ts
+++ b/src/carousel.ts
@@ -359,7 +359,7 @@ export class Carousel extends Component<CarouselOptions> {
 
   _handleIndicatorKeyPress = (e: KeyboardEvent) => {
     e.stopPropagation();
-    if (e.keyCode === 13) {
+    if (Utils.keys.ENTER.includes(e.key)) {
       this._handleIndicatorInteraction(e);
     }
   }