0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00

Remove role="button" from CTA links in carousel example (#32789)

They're links, acting as links. Just because they're styled as buttons visually (as is often the case for "Call to action" (CTA) links) doesn't mean they need/get `role="button"`
This commit is contained in:
Patrick H. Lauke 2021-01-14 10:19:19 +00:00 committed by GitHub
parent 2ed7504783
commit 80aefd862c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -46,7 +46,7 @@ extra_css:
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Some representative placeholder content for the first slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
@ -56,7 +56,7 @@ extra_css:
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Some representative placeholder content for the second slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
@ -66,7 +66,7 @@ extra_css:
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Some representative placeholder content for the third slide of this carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
<p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
@ -94,19 +94,19 @@ extra_css:
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>Heading</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>Heading</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->