Revert separate/unrelated change to CTA links

moved to separate PR
Merge branch 'main' into patrickhlauke-carousel
2021-01-13 23:46:46 +00:00 · 2021-01-13 23:20:05 +00:00 · 2021-01-10 14:40:17 +00:00 · 2021-01-07 10:23:30 +00:00 · 2021-01-07 10:22:28 +00:00 · 2021-01-07 10:13:16 +00:00
6 changed files with 75 additions and 49 deletions
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@ -1154,7 +1154,7 @@ describe('Carousel', () => {
      expect(Carousel.getInstance(carouselEl)).toBeDefined()
    })
-    it('should create carousel and go to the next slide on click', done => {
+    it('should create carousel and go to the next slide on click (with real button controls)', done => {
      fixtureEl.innerHTML = [
        '<div id="myCarousel" class="carousel slide">',
        '  <div class="carousel-inner">',
@ -1162,8 +1162,32 @@ describe('Carousel', () => {
        '    <div id="item2" class="carousel-item">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
-        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
+        '  <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></button>',
-        '  <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>',
+        '  <button id="next" class="carousel-control-next" data-bs-target="#myCarousel" type="button" data-bs-slide="next"></div>',
        '</div>'
      ].join('')
      const next = fixtureEl.querySelector('#next')
      const item2 = fixtureEl.querySelector('#item2')
      next.click()
      setTimeout(() => {
        expect(item2.classList.contains('active')).toEqual(true)
        done()
      }, 10)
    })
    it('should create carousel and go to the next slide on click (using links as controls)', done => {
      fixtureEl.innerHTML = [
        '<div id="myCarousel" class="carousel slide">',
        '  <div class="carousel-inner">',
        '    <div class="carousel-item active">item 1</div>',
        '    <div id="item2" class="carousel-item">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
        '  <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"></button>',
        '  <a id="next" class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"></div>',
        '</div>'
      ].join('')
@ -1209,8 +1233,8 @@ describe('Carousel', () => {
        '    <div class="carousel-item">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
-        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
+        '  <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></button>',
-        '  <div id="next" class="carousel-control-next" role="button" data-bs-slide="next"></div>',
+        '  <button id="next" class="carousel-control-next" type="button" data-bs-slide="next"></button>',
        '</div>'
      ].join('')
@ -1229,8 +1253,8 @@ describe('Carousel', () => {
        '    <div id="item2" class="carousel-item">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
-        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
+        '  <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></div>',
-        '  <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>',
+        '  <button id="next" class="carousel-control-next" data-bs-target="#myCarousel" type="button" data-bs-slide="next"></div>',
        '</div>'
      ].join('')
--- 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-bs-slide="prev">
+        <button class="carousel-control-prev" data-bs-target="#carousel-example-generic" type="button" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
-        </a>
+        </button>
-        <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-bs-slide="next">
+        <button class="carousel-control-next" data-bs-target="#carousel-example-generic" type="button" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
-        </a>
+        </button>
      </div>
    </div>
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@ -100,6 +100,8 @@
  width: $carousel-control-width;
  color: $carousel-control-color;
  text-align: center;
  background: none;
  border: 0;
  opacity: $carousel-control-opacity;
  @include transition($carousel-control-transition);
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.0/components/carousel.md
@ -22,7 +22,7 @@ Please be aware that nested carousels are not supported, and carousels are gener
 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-bs-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-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
 ### Slides only
@ -46,7 +46,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>` link elements–though in that case, you should also add `role="button"` attributes to the links.
 {{< example >}}
 <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
@ -61,14 +61,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-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"  data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
-  </a>
+  </button>
-  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"  data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
@ -94,14 +94,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-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"  data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
-  </a>
+  </button>
-  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"  data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
@ -139,14 +139,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-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"  data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
-  </a>
+  </button>
-  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"  data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
@ -167,14 +167,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-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"  data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
-  </a>
+  </button>
-  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade"  data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
@ -195,14 +195,14 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
      {{< 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-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"  data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
-  </a>
+  </button>
-  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"  data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
@ -223,14 +223,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-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
-  </a>
+  </button>
-  <a class="carousel-control-next" href="#carouselExampleControlsNoTouching" role="button" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
@ -268,14 +268,14 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
      </div>
    </div>
  </div>
-  <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"  data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
-  </a>
+  </button>
-  <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"  data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
-  </a>
+  </button>
 </div>
 {{< /example >}}
--- a/site/content/docs/5.0/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.0/examples/carousel-rtl/index.html
@ -74,14 +74,14 @@ extra_css:
        </div>
      </div>
    </div>
-    <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
+    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">السابق</span>
-    </a>
+    </button>
-    <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
+    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">التالى</span>
-    </a>
+    </button>
  </div>
--- a/site/content/docs/5.0/examples/carousel/index.html
+++ b/site/content/docs/5.0/examples/carousel/index.html
@ -73,14 +73,14 @@ extra_css:
        </div>
      </div>
    </div>
-    <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
+    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
-    </a>
+    </button>
-    <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
+    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
-    </a>
+    </button>
  </div>
Author	SHA1	Message	Date
Patrick H. Lauke	80f5812a97	Revert separate/unrelated change to CTA links moved to separate PR	2021-01-13 23:46:46 +00:00
Patrick H. Lauke	7e1855d23d	Merge branch 'main' into patrickhlauke-carousel	2021-01-13 23:20:05 +00:00
Patrick H. Lauke	a2447ba7c9	Merge branch 'main' into patrickhlauke-carousel	2021-01-10 14:40:17 +00:00
Patrick H. Lauke	1493ac0bf1	Merge branch 'patrickhlauke-carousel' of https://github.com/twbs/bootstrap into patrickhlauke-carousel	2021-01-07 10:23:30 +00:00
Patrick H. Lauke	c72d23b8b7	Clarify that controls can be button or link also adds code ticks to `id`	2021-01-07 10:22:28 +00:00
Patrick H. Lauke	eda76bb0a0	Merge branch 'main' into patrickhlauke-carousel	2021-01-07 10:13:16 +00:00
Patrick H. Lauke	13eb932bc4	Edit carousel examples - use buttons instead of links for prev/next - remove `role="button"` from links that are actually links	2021-01-07 09:54:07 +00:00
Patrick H. Lauke	7b718ca159	Merge branch 'main' into patrickhlauke-carousel	2021-01-05 20:48:45 +00:00
Patrick H. Lauke	d753f4a279	Use buttons for newly-merged extra carousel	2020-12-29 16:27:06 +00:00
Patrick H. Lauke	50ac915bf2	Merge branch 'main' into patrickhlauke-carousel	2020-12-29 16:03:14 +00:00
Patrick H. Lauke	b749662c7c	Merge branch 'main' into patrickhlauke-carousel	2020-12-29 13:40:22 +00:00
Patrick H. Lauke	9116ff272b	Merge branch 'main' into patrickhlauke-carousel	2020-12-28 17:58:08 +00:00
Patrick H. Lauke	f328d01d3a	Carousel: use buttons, not links, for prev/next - expand the styles to neutralise border/background - change docs page - add extra unit test to check that links or buttons work as controls - modify visual test to use buttons as well	2020-12-27 19:58:46 +00:00