mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00
Code Activity

Carousel: use buttons, not links, for prev/next controls (#32627)

Browse Source 
* 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
- use buttons instead of links for prev/next
- remove `role="button"` from links that are actually links

* Clarify that controls can be button or link

* Update site/content/docs/5.0/components/carousel.md

Co-authored-by: Mark Otto <markd.otto@gmail.com>

* Explicitly set padding to 0 to prevent dipping/moving on active in Firefox

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Patrick H. Lauke
2021-01-27 15:31:16 +00:00
committed by GitHub
parent 61391c4ee2
commit 3aa3fda730
6 changed files with 76 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/examples/carousel-rtl/index.html
+4 -4
View File
@@ -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>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
</button>
<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>
site/content/docs/5.0/examples/carousel/index.html
+4 -4
View File
@@ -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>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
</button>
<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>