Manual backport of #32627 (#33165)

Carousel: use buttons, not links, for prev/next controls

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index ad3421f9db9b4e8b97d4e5add31bf12de96fb1e1..e8b71ee3d992ece2066340892c7312d4c27019d7 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "25.5 kB"
+      "maxSize": "26 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",

diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 1907acf80c918c6742746e315293990c2db6e70b..61434872171bf27eeaed02b56d70b47dfd4765ff 100644 (file)
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -34,14 +34,14 @@
             <img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide">
           </div>
         </div>
-        <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
+        <button class="carousel-control-prev" data-target="#carousel-example-generic" type="button" data-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
-        </a>
-        <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
+        </button>
+        <button class="carousel-control-next" data-target="#carousel-example-generic" type="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
-        </a>
+        </button>
       </div>
     </div>
 

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index db30bed8b9e093251df1b50271ea53905951421c..28f1e17d147a74937a29c6f6241cfbb3b6db9af2 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -95,8 +95,11 @@
   align-items: center; // 2. vertically center contents
   justify-content: center; // 3. horizontally center contents
   width: $carousel-control-width;
+  padding: 0;
   color: $carousel-control-color;
   text-align: center;
+  background: none;
+  border: 0;
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
 

diff --git a/site/content/docs/4.6/components/carousel.md b/site/content/docs/4.6/components/carousel.md
index b8fac60d38b413053d7772419de1f85dac65bd49..4026ad4482f5bcedd8e748a2993f6ad241ac95ea 100644 (file)
--- a/site/content/docs/4.6/components/carousel.md
+++ b/site/content/docs/4.6/components/carousel.md
@@ -24,7 +24,7 @@ Lastly, if you're building our JavaScript from source, it [requires `util.js`]({
 
 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.
 
-**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.
+**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.
 
 ### Slides only
 
@@ -48,7 +48,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
 
 ### With controls
 
-Adding in the previous and next controls:
+Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.
 
 {{< example >}}
 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
@@ -63,14 +63,14 @@ Adding in the previous and next controls:
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+ <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls"  data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+  </button>
+  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls"  data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
 
@@ -96,14 +96,14 @@ You can also add the indicators to the carousel, alongside the controls, too.
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"  data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+  </button>
+  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"  data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
 
@@ -141,14 +141,14 @@ Add captions to your slides easily with the `.carousel-caption` element within a
       </div>
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
+  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions"  data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
+  </button>
+  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions"  data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
 
@@ -169,14 +169,14 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
+  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade"  data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
+  </button>
+  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade"  data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
 
@@ -197,14 +197,14 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
+  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval"  data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
+  </button>
+  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval"  data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
 
@@ -225,14 +225,14 @@ Carousels support swiping left/right on touchscreen devices to move between slid
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleControlsNoTouching" role="button" data-slide="prev">
+  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#carouselExampleControlsNoTouching" role="button" data-slide="next">
+  </button>
+  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
 

diff --git a/site/content/docs/4.6/examples/carousel/index.html b/site/content/docs/4.6/examples/carousel/index.html
index 96f71f772964589417058b3fa22aa24fb06da4ad..7882855fdc7534e9e317f49a96745b8e056d8f95 100644 (file)
--- a/site/content/docs/4.6/examples/carousel/index.html
+++ b/site/content/docs/4.6/examples/carousel/index.html
@@ -71,14 +71,14 @@ extra_css:
         </div>
       </div>
     </div>
-    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
+    <button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
-    </a>
-    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
+    </button>
+    <button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
-    </a>
+    </button>
   </div>