Skip to content

Commit f3de29f

Browse files
patrickhlaukeXhmikosR
patrickhlauke
authored and
XhmikosR
committed
Make carousel indicators actual buttons
1 parent 51ca9a9 commit f3de29f

File tree

9 files changed

+70
-59
lines changed

9 files changed

+70
-59
lines changed

‎js/src/carousel.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ const SELECTOR_ITEM = '.carousel-item'
9090
const SELECTOR_ITEM_IMG = '.carousel-item img'
9191
const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev'
9292
const SELECTOR_INDICATORS = '.carousel-indicators'
93+
const SELECTOR_INDICATOR = '[data-bs-target]'
9394
const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
9495
const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
9596

@@ -405,18 +406,21 @@ class Carousel extends BaseComponent {
405406

406407
_setActiveIndicatorElement(element) {
407408
if (this._indicatorsElement) {
408-
const indicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
409+
const activeIndicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
409410

410-
for (let i = 0; i < indicators.length; i++) {
411-
indicators[i].classList.remove(CLASS_NAME_ACTIVE)
411+
for (let i = 0; i < activeIndicators.length; i++) {
412+
activeIndicators[i].classList.remove(CLASS_NAME_ACTIVE)
413+
activeIndicators[i].removeAttribute('aria-current')
412414
}
413415

414-
const nextIndicator = this._indicatorsElement.children[
415-
this._getItemIndex(element)
416-
]
416+
const indicators = SelectorEngine.find(SELECTOR_INDICATOR, this._indicatorsElement)
417417

418-
if (nextIndicator) {
419-
nextIndicator.classList.add(CLASS_NAME_ACTIVE)
418+
for (let i = 0; i < indicators.length; i++) {
419+
if (Number.parseInt(indicators[i].getAttribute('data-bs-slide-to'), 10) === this._getItemIndex(element)) {
420+
indicators[i].classList.add(CLASS_NAME_ACTIVE)
421+
indicators[i].setAttribute('aria-current', 'true')
422+
break
423+
}
420424
}
421425
}
422426
}

‎js/tests/integration/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ <h1>Hello, world!</h1>
2020
</button>
2121

2222
<div id="carouselExampleIndicators" class="carousel slide mt-2" data-bs-ride="carousel">
23-
<ol class="carousel-indicators">
24-
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"></li>
25-
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active"></li>
26-
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
27-
</ol>
23+
<div class="carousel-indicators">
24+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button>
25+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active" aria-current="true" aria-label="Slide 2"></button>
26+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
27+
</div>
2828

2929
<div class="carousel-inner">
3030
<div class="carousel-item">

‎js/tests/unit/carousel.spec.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -659,11 +659,11 @@ describe('Carousel', () => {
659659
it('should update indicators if present', done => {
660660
fixtureEl.innerHTML = [
661661
'<div id="myCarousel" class="carousel slide">',
662-
' <ol class="carousel-indicators">',
663-
' <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>',
664-
' <li id="secondIndicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>',
665-
' <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>',
666-
' </ol>',
662+
' <div class="carousel-indicators">',
663+
' <button type="button" id="firstIndicator" data-bs-target="myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>',
664+
' <button type="button" id="secondIndicator" data-bs-target="myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>',
665+
' <button type="button" data-bs-target="myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>',
666+
' </div>',
667667
' <div class="carousel-inner">',
668668
' <div class="carousel-item active">item 1</div>',
669669
' <div class="carousel-item" data-bs-interval="7">item 2</div>',
@@ -673,11 +673,15 @@ describe('Carousel', () => {
673673
].join('')
674674

675675
const carouselEl = fixtureEl.querySelector('#myCarousel')
676+
const firstIndicator = fixtureEl.querySelector('#firstIndicator')
676677
const secondIndicator = fixtureEl.querySelector('#secondIndicator')
677678
const carousel = new Carousel(carouselEl)
678679

679680
carouselEl.addEventListener('slid.bs.carousel', () => {
681+
expect(firstIndicator.classList.contains('active')).toEqual(false)
682+
expect(firstIndicator.hasAttribute('aria-current')).toEqual(false)
680683
expect(secondIndicator.classList.contains('active')).toEqual(true)
684+
expect(secondIndicator.getAttribute('aria-current')).toEqual('true')
681685
done()
682686
})
683687

‎js/tests/visual/carousel.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ <h1>Carousel <small>Bootstrap Visual Test</small></h1>
1818
<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>
1919

2020
<div id="carousel-example-generic" class="carousel slide" data-bs-ride="carousel">
21-
<ol class="carousel-indicators">
22-
<li data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active"></li>
23-
<li data-bs-target="#carousel-example-generic" data-bs-slide-to="1"></li>
24-
<li data-bs-target="#carousel-example-generic" data-bs-slide-to="2"></li>
25-
</ol>
21+
<div class="carousel-indicators">
22+
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
23+
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="1" aria-label="Slide 2"></button>
24+
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="2" aria-label="Slide 3"></button>
25+
</div>
2626
<div class="carousel-inner">
2727
<div class="carousel-item active">
2828
<img src="https://i.imgur.com/iEZgY7Y.jpg" alt="First slide">

‎scss/_carousel.scss

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,10 @@
150150
background-image: escape-svg($carousel-control-next-icon-bg);
151151
}
152152

153-
// Optional indicator pips
153+
// Optional indicator pips/controls
154154
//
155-
// Add an ordered list with the following class and add a list item for each
156-
// slide your carousel holds.
155+
// Add an container (such as a list) with the following class and add an item (ideally a focusable control,
156+
// like a button) with data-bs-target for each slide your carousel holds.
157157

158158
.carousel-indicators {
159159
position: absolute;
@@ -163,23 +163,26 @@
163163
z-index: 2;
164164
display: flex;
165165
justify-content: center;
166-
padding-left: 0; // override <ol> default
166+
padding: 0;
167167
// Use the .carousel-control's width as margin so we don't overlay those
168168
margin-right: $carousel-control-width;
169+
margin-bottom: 1rem;
169170
margin-left: $carousel-control-width;
170171
list-style: none;
171172

172-
li {
173+
[data-bs-target] {
173174
box-sizing: content-box;
174175
flex: 0 1 auto;
175176
width: $carousel-indicator-width;
176177
height: $carousel-indicator-height;
178+
padding: 0;
177179
margin-right: $carousel-indicator-spacer;
178180
margin-left: $carousel-indicator-spacer;
179181
text-indent: -999px;
180182
cursor: pointer;
181183
background-color: $carousel-indicator-active-bg;
182184
background-clip: padding-box;
185+
border: 0;
183186
// Use transparent borders to increase the hit area by 10px on top and bottom.
184187
border-top: $carousel-indicator-hit-area-height solid transparent;
185188
border-bottom: $carousel-indicator-hit-area-height solid transparent;
@@ -216,7 +219,7 @@
216219
filter: $carousel-dark-control-icon-filter;
217220
}
218221

219-
.carousel-indicators li {
222+
.carousel-indicators [data-bs-target] {
220223
background-color: $carousel-dark-indicator-active-bg;
221224
}
222225

‎site/content/docs/5.0/components/carousel.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
7878

7979
{{< example >}}
8080
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
81-
<ol class="carousel-indicators">
82-
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
83-
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
84-
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
85-
</ol>
81+
<div class="carousel-indicators">
82+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
83+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
84+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
85+
</div>
8686
<div class="carousel-inner">
8787
<div class="carousel-item active">
8888
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
@@ -111,11 +111,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
111111

112112
{{< example >}}
113113
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
114-
<ol class="carousel-indicators">
115-
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
116-
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
117-
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
118-
</ol>
114+
<div class="carousel-indicators">
115+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
116+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
117+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
118+
</div>
119119
<div class="carousel-inner">
120120
<div class="carousel-item active">
121121
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
@@ -240,11 +240,11 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
240240

241241
{{< example >}}
242242
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
243-
<ol class="carousel-indicators">
244-
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
245-
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
246-
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
247-
</ol>
243+
<div class="carousel-indicators">
244+
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
245+
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
246+
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
247+
</div>
248248
<div class="carousel-inner">
249249
<div class="carousel-item active" data-bs-interval="10000">
250250
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#aaa" background="#f5f5f5" text="First slide" >}}

‎site/content/docs/5.0/examples/carousel-rtl/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@
3737
<main>
3838

3939
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
40-
<ol class="carousel-indicators">
41-
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
42-
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
43-
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
44-
</ol>
40+
<div class="carousel-indicators">
41+
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
42+
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
43+
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
44+
</div>
4545
<div class="carousel-inner">
4646
<div class="carousel-item active">
4747
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}

‎site/content/docs/5.0/examples/carousel/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@
3636
<main>
3737

3838
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
39-
<ol class="carousel-indicators">
40-
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
41-
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
42-
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
43-
</ol>
39+
<div class="carousel-indicators">
40+
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
41+
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
42+
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
43+
</div>
4444
<div class="carousel-inner">
4545
<div class="carousel-item active">
4646
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}

‎site/content/docs/5.0/examples/cheatsheet-rtl/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -862,11 +862,11 @@ <h3>شرائح عرض</h3>
862862
<div>
863863
{{< example show_markup="false" >}}
864864
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
865-
<ol class="carousel-indicators">
866-
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
867-
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
868-
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
869-
</ol>
865+
<div class="carousel-indicators">
866+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
867+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
868+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
869+
</div>
870870
<div class="carousel-inner">
871871
<div class="carousel-item active">
872872
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}}

0 commit comments

Comments
 (0)