Commit 0add7700 authored by Kevin Suttle's avatar Kevin Suttle

Add role="button" to <a> buttons

These should really be <button> elements, but until that gets squared away, this will suffice.
parent c0b00f22
...@@ -2120,7 +2120,7 @@ body { padding-bottom: 70px; } ...@@ -2120,7 +2120,7 @@ body { padding-bottom: 70px; }
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -2130,7 +2130,7 @@ body { padding-bottom: 70px; } ...@@ -2130,7 +2130,7 @@ body { padding-bottom: 70px; }
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -2140,7 +2140,7 @@ body { padding-bottom: 70px; } ...@@ -2140,7 +2140,7 @@ body { padding-bottom: 70px; }
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -2154,7 +2154,7 @@ body { padding-bottom: 70px; } ...@@ -2154,7 +2154,7 @@ body { padding-bottom: 70px; }
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>...</p> <p>...</p>
<p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -2134,12 +2134,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2134,12 +2134,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Anchor element</h3> <h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p> <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-example"> <p class="bs-example">
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a> <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
</p> </p>
{% highlight html %} {% highlight html %}
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a> <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
{% endhighlight %} {% endhighlight %}
<p> <p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
......
...@@ -1020,7 +1020,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -1020,7 +1020,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h3>Live demo</h3> <h3>Live demo</h3>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a> <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button">Click to toggle popover</a>
</div> </div>
<h4>Four directions</h4> <h4>Four directions</h4>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment