fix(carousel): arrow keys break animation if carousel sliding (#34307)

js/src/carousel.js

@@ -59,6 +59,11 @@ const ORDER_PREV = 'prev'
 const DIRECTION_LEFT = 'left'
 const DIRECTION_RIGHT = 'right'
 
+const KEY_TO_DIRECTION = {
+  [ARROW_LEFT_KEY]: DIRECTION_RIGHT,
+  [ARROW_RIGHT_KEY]: DIRECTION_LEFT
+}
+
 const EVENT_SLIDE = `slide${EVENT_KEY}`
 const EVENT_SLID = `slid${EVENT_KEY}`
 const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
@@ -134,9 +139,7 @@ class Carousel extends BaseComponent {
   // Public
 
   next() {
-    if (!this._isSliding) {
-      this._slide(ORDER_NEXT)
-    }
+    this._slide(ORDER_NEXT)
   }
 
   nextWhenVisible() {
@@ -148,9 +151,7 @@ class Carousel extends BaseComponent {
   }
 
   prev() {
-    if (!this._isSliding) {
-      this._slide(ORDER_PREV)
-    }
+    this._slide(ORDER_PREV)
   }
 
   pause(event) {
@@ -319,12 +320,10 @@ class Carousel extends BaseComponent {
       return
     }
 
-    if (event.key === ARROW_LEFT_KEY) {
+    const direction = KEY_TO_DIRECTION[event.key]
+    if (direction) {
       event.preventDefault()
-      this._slide(DIRECTION_RIGHT)
-    } else if (event.key === ARROW_RIGHT_KEY) {
-      event.preventDefault()
-      this._slide(DIRECTION_LEFT)
+      this._slide(direction)
     }
   }
 
@@ -408,6 +407,10 @@ class Carousel extends BaseComponent {
       return
     }
 
+    if (this._isSliding) {
+      return
+    }
+
     const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName)
     if (slideEvent.defaultPrevented) {
       return