Add role="button" to <a> buttons

These should really be <button> elements, but until that gets squared away, this will suffice.

3 files changed, 9 insertions, 9 deletions

diff --git a/components.html b/components.html
index 8298a00b6..839e14290 100644
--- a/components.html
+++ b/components.html
@@ -2120,7 +2120,7 @@ body { padding-bottom: 70px; }
             <div class="caption">
               <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><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>
@@ -2130,7 +2130,7 @@ body { padding-bottom: 70px; }
             <div class="caption">
               <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><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>
@@ -2140,7 +2140,7 @@ body { padding-bottom: 70px; }
             <div class="caption">
               <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><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>
@@ -2154,7 +2154,7 @@ body { padding-bottom: 70px; }
       <div class="caption">
         <h3>Thumbnail label</h3>
         <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>
diff --git a/css.html b/css.html
index c0169d574..a45c71a80 100644
--- a/css.html
+++ b/css.html
@@ -2134,12 +2134,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3>Anchor element</h3>
     <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
     <p class="bs-example">
-      <a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
-      <a href="#" class="btn btn-default btn-lg disabled">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" role="button">Link</a>
     </p>
 {% highlight html %}
-<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
-<a href="#" class="btn btn-default btn-lg disabled">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" role="button">Link</a>
 {% endhighlight %}
     <p>
       We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
diff --git a/javascript.html b/javascript.html
index 347c2c1c5..1d41f71a5 100644
--- a/javascript.html
+++ b/javascript.html
@@ -1020,7 +1020,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
 
     <h3>Live demo</h3>
     <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>
 
     <h4>Four directions</h4>