diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/src/carousel.js | 20 | ||||
| -rw-r--r-- | js/tests/integration/index.html | 10 | ||||
| -rw-r--r-- | js/tests/unit/carousel.spec.js | 14 | ||||
| -rw-r--r-- | js/tests/visual/carousel.html | 10 |
4 files changed, 31 insertions, 23 deletions
diff --git a/js/src/carousel.js b/js/src/carousel.js index 06a391419..9fd8aae3d 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 + } } } } diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 9855d5d34..4c71bad91 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -20,11 +20,11 @@ </button> <div id="carouselExampleIndicators" class="carousel slide mt-2" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"></li> - <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active"></li> - <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active" aria-current="true" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item"> diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index 6c98f20d1..0571ac9af 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -659,11 +659,11 @@ describe('Carousel', () => { it('should update indicators if present', done => { fixtureEl.innerHTML = [ '<div id="myCarousel" class="carousel slide">', - ' <ol class="carousel-indicators">', - ' <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>', - ' <li id="secondIndicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>', - ' <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>', - ' </ol>', + ' <div class="carousel-indicators">', + ' <button type="button" id="firstIndicator" data-bs-target="myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>', + ' <button type="button" id="secondIndicator" data-bs-target="myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>', + ' <button type="button" data-bs-target="myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>', + ' </div>', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', ' <div class="carousel-item" data-bs-interval="7">item 2</div>', @@ -673,11 +673,15 @@ describe('Carousel', () => { ].join('') const carouselEl = fixtureEl.querySelector('#myCarousel') + const firstIndicator = fixtureEl.querySelector('#firstIndicator') const secondIndicator = fixtureEl.querySelector('#secondIndicator') const carousel = new Carousel(carouselEl) carouselEl.addEventListener('slid.bs.carousel', () => { + expect(firstIndicator.classList.contains('active')).toEqual(false) + expect(firstIndicator.hasAttribute('aria-current')).toEqual(false) expect(secondIndicator.classList.contains('active')).toEqual(true) + expect(secondIndicator.getAttribute('aria-current')).toEqual('true') done() }) diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index 4658752e1..6b1618124 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -18,11 +18,11 @@ <p>The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> <div id="carousel-example-generic" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carousel-example-generic" data-bs-slide-to="1"></li> - <li data-bs-target="#carousel-example-generic" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://i.imgur.com/iEZgY7Y.jpg" alt="First slide"> |