Make carousel indicators actual buttons

1 files changed, 12 insertions, 8 deletions

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 06a391419f..9fd8aae3db 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -90,6 +90,7 @@ const SELECTOR_ITEM = '.carousel-item'
 const SELECTOR_ITEM_IMG = '.carousel-item img'
 const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev'
 const SELECTOR_INDICATORS = '.carousel-indicators'
+const SELECTOR_INDICATOR = '[data-bs-target]'
 const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
 const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
 
@@ -405,18 +406,21 @@ class Carousel extends BaseComponent {
 
   _setActiveIndicatorElement(element) {
     if (this._indicatorsElement) {
-      const indicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
+      const activeIndicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
 
-      for (let i = 0; i < indicators.length; i++) {
-        indicators[i].classList.remove(CLASS_NAME_ACTIVE)
+      for (let i = 0; i < activeIndicators.length; i++) {
+        activeIndicators[i].classList.remove(CLASS_NAME_ACTIVE)
+        activeIndicators[i].removeAttribute('aria-current')
       }
 
-      const nextIndicator = this._indicatorsElement.children[
-        this._getItemIndex(element)
-      ]
+      const indicators = SelectorEngine.find(SELECTOR_INDICATOR, this._indicatorsElement)
 
-      if (nextIndicator) {
-        nextIndicator.classList.add(CLASS_NAME_ACTIVE)
+      for (let i = 0; i < indicators.length; i++) {
+        if (Number.parseInt(indicators[i].getAttribute('data-bs-slide-to'), 10) === this._getItemIndex(element)) {
+          indicators[i].classList.add(CLASS_NAME_ACTIVE)
+          indicators[i].setAttribute('aria-current', 'true')
+          break
+        }
       }
     }
   }