Skip to content

Commit e16b069

Browse files
patrickhlaukepatrickhlauke
authored
Manual backport of #32627 (#33165)
Carousel: use buttons, not links, for prev/next controls
1 parent 7365592 commit e16b069

File tree

5 files changed

+38
-35
lines changed

5 files changed

+38
-35
lines changed

‎.bundlewatch.config.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
},
1919
{
2020
"path": "./dist/css/bootstrap.css",
21-
"maxSize": "25.5 kB"
21+
"maxSize": "26 kB"
2222
},
2323
{
2424
"path": "./dist/css/bootstrap.min.css",

‎js/tests/visual/carousel.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ <h1>Carousel <small>Bootstrap Visual Test</small></h1>
3434
<img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide">
3535
</div>
3636
</div>
37-
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
37+
<button class="carousel-control-prev" data-target="#carousel-example-generic" type="button" data-slide="prev">
3838
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
3939
<span class="sr-only">Previous</span>
40-
</a>
41-
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
40+
</button>
41+
<button class="carousel-control-next" data-target="#carousel-example-generic" type="button" data-slide="next">
4242
<span class="carousel-control-next-icon" aria-hidden="true"></span>
4343
<span class="sr-only">Next</span>
44-
</a>
44+
</button>
4545
</div>
4646
</div>
4747

‎scss/_carousel.scss

+3
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,11 @@
9595
align-items: center; // 2. vertically center contents
9696
justify-content: center; // 3. horizontally center contents
9797
width: $carousel-control-width;
98+
padding: 0;
9899
color: $carousel-control-color;
99100
text-align: center;
101+
background: none;
102+
border: 0;
100103
opacity: $carousel-control-opacity;
101104
@include transition($carousel-control-transition);
102105

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

+26-26
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Lastly, if you're building our JavaScript from source, it [requires `util.js`]({
2424

2525
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
2626

27-
**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element.
27+
**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
2828

2929
### Slides only
3030

@@ -48,7 +48,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
4848

4949
### With controls
5050

51-
Adding in the previous and next controls:
51+
Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.
5252

5353
{{< example >}}
5454
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
@@ -63,14 +63,14 @@ Adding in the previous and next controls:
6363
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
6464
</div>
6565
</div>
66-
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
66+
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
6767
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
6868
<span class="sr-only">Previous</span>
69-
</a>
70-
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
69+
</button>
70+
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
7171
<span class="carousel-control-next-icon" aria-hidden="true"></span>
7272
<span class="sr-only">Next</span>
73-
</a>
73+
</button>
7474
</div>
7575
{{< /example >}}
7676

@@ -96,14 +96,14 @@ You can also add the indicators to the carousel, alongside the controls, too.
9696
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
9797
</div>
9898
</div>
99-
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
99+
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
100100
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
101101
<span class="sr-only">Previous</span>
102-
</a>
103-
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
102+
</button>
103+
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
104104
<span class="carousel-control-next-icon" aria-hidden="true"></span>
105105
<span class="sr-only">Next</span>
106-
</a>
106+
</button>
107107
</div>
108108
{{< /example >}}
109109

@@ -141,14 +141,14 @@ Add captions to your slides easily with the `.carousel-caption` element within a
141141
</div>
142142
</div>
143143
</div>
144-
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
144+
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
145145
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
146146
<span class="sr-only">Previous</span>
147-
</a>
148-
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
147+
</button>
148+
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
149149
<span class="carousel-control-next-icon" aria-hidden="true"></span>
150150
<span class="sr-only">Next</span>
151-
</a>
151+
</button>
152152
</div>
153153
{{< /example >}}
154154

@@ -169,14 +169,14 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
169169
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
170170
</div>
171171
</div>
172-
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
172+
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
173173
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
174174
<span class="sr-only">Previous</span>
175-
</a>
176-
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
175+
</button>
176+
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
177177
<span class="carousel-control-next-icon" aria-hidden="true"></span>
178178
<span class="sr-only">Next</span>
179-
</a>
179+
</button>
180180
</div>
181181
{{< /example >}}
182182

@@ -197,14 +197,14 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
197197
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
198198
</div>
199199
</div>
200-
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
200+
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
201201
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
202202
<span class="sr-only">Previous</span>
203-
</a>
204-
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
203+
</button>
204+
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
205205
<span class="carousel-control-next-icon" aria-hidden="true"></span>
206206
<span class="sr-only">Next</span>
207-
</a>
207+
</button>
208208
</div>
209209
{{< /example >}}
210210

@@ -225,14 +225,14 @@ Carousels support swiping left/right on touchscreen devices to move between slid
225225
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
226226
</div>
227227
</div>
228-
<a class="carousel-control-prev" href="#carouselExampleControlsNoTouching" role="button" data-slide="prev">
228+
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
229229
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
230230
<span class="sr-only">Previous</span>
231-
</a>
232-
<a class="carousel-control-next" href="#carouselExampleControlsNoTouching" role="button" data-slide="next">
231+
</button>
232+
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
233233
<span class="carousel-control-next-icon" aria-hidden="true"></span>
234234
<span class="sr-only">Next</span>
235-
</a>
235+
</button>
236236
</div>
237237
{{< /example >}}
238238

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,14 @@ <h1>One more for good measure.</h1>
7171
</div>
7272
</div>
7373
</div>
74-
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
74+
<button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
7575
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
7676
<span class="sr-only">Previous</span>
77-
</a>
78-
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
77+
</button>
78+
<button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
7979
<span class="carousel-control-next-icon" aria-hidden="true"></span>
8080
<span class="sr-only">Next</span>
81-
</a>
81+
</button>
8282
</div>
8383

8484

0 commit comments

Comments
 (0)