From 4277ba62d35438aab1f445769d6263cb6e2114d2 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Tue, 11 Feb 2014 13:15:40 -0800
Subject: [PATCH] add role="alert" to Alert examples, to improve accessibility

Per https://github.com/paypal/bootstrap-accessibility-plugin/blob/d8fcbcd3fe86f0cb47fda0ffe269b2c7a2131f07/README.md#alert
---
 docs/components.html           | 36 +++++++++++++++++-----------------
 docs/examples/rtl/index.html   |  8 ++++----
 docs/examples/theme/index.html |  8 ++++----
 docs/javascript.html           |  4 ++--
 4 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/docs/components.html b/docs/components.html
index 7b8b350881..b190cd42f0 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -2170,36 +2170,36 @@ body { padding-bottom: 70px; }
   </div>
 
   <div class="bs-example">
-    <div class="alert alert-success">
+    <div class="alert alert-success" role="alert">
       <strong>Well done!</strong> You successfully read this important alert message.
     </div>
-    <div class="alert alert-info">
+    <div class="alert alert-info" role="alert">
       <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
     </div>
-    <div class="alert alert-warning">
+    <div class="alert alert-warning" role="alert">
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
     </div>
-    <div class="alert alert-danger">
+    <div class="alert alert-danger" role="alert">
       <strong>Oh snap!</strong> Change a few things up and try submitting again.
     </div>
   </div>
 {% highlight html %}
-<div class="alert alert-success">...</div>
-<div class="alert alert-info">...</div>
-<div class="alert alert-warning">...</div>
-<div class="alert alert-danger">...</div>
+<div class="alert alert-success" role="alert">...</div>
+<div class="alert alert-info" role="alert">...</div>
+<div class="alert alert-warning" role="alert">...</div>
+<div class="alert alert-danger" role="alert">...</div>
 {% endhighlight %}
 
   <h2 id="alerts-dismissable">Dismissable alerts</h2>
   <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
   <div class="bs-example">
-    <div class="alert alert-warning alert-dismissable">
+    <div class="alert alert-warning alert-dismissable" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
     </div>
   </div>
 {% highlight html %}
-<div class="alert alert-warning alert-dismissable">
+<div class="alert alert-warning alert-dismissable" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
   <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
@@ -2213,30 +2213,30 @@ body { padding-bottom: 70px; }
   <h2 id="alerts-links">Links in alerts</h2>
   <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
   <div class="bs-example">
-    <div class="alert alert-success">
+    <div class="alert alert-success" role="alert">
       <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
     </div>
-    <div class="alert alert-info">
+    <div class="alert alert-info" role="alert">
       <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
     </div>
-    <div class="alert alert-warning">
+    <div class="alert alert-warning" role="alert">
       <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
     </div>
-    <div class="alert alert-danger">
+    <div class="alert alert-danger" role="alert">
       <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
     </div>
   </div>
 {% highlight html %}
-<div class="alert alert-success">
+<div class="alert alert-success" role="alert">
   <a href="#" class="alert-link">...</a>
 </div>
-<div class="alert alert-info">
+<div class="alert alert-info" role="alert">
   <a href="#" class="alert-link">...</a>
 </div>
-<div class="alert alert-warning">
+<div class="alert alert-warning" role="alert">
   <a href="#" class="alert-link">...</a>
 </div>
-<div class="alert alert-danger">
+<div class="alert alert-danger" role="alert">
   <a href="#" class="alert-link">...</a>
 </div>
 {% endhighlight %}
diff --git a/docs/examples/rtl/index.html b/docs/examples/rtl/index.html
index 5783ae68ff..8dcdb77284 100644
--- a/docs/examples/rtl/index.html
+++ b/docs/examples/rtl/index.html
@@ -214,16 +214,16 @@
       <div class="page-header">
         <h1>Alerts</h1>
       </div>
-      <div class="alert alert-success">
+      <div class="alert alert-success" role="alert">
         <strong>Well done!</strong> You successfully read this important alert message.
       </div>
-      <div class="alert alert-info">
+      <div class="alert alert-info" role="alert">
         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
       </div>
-      <div class="alert alert-warning">
+      <div class="alert alert-warning" role="alert">
         <strong>Warning!</strong> Best check yo self, you're not looking too good.
       </div>
-      <div class="alert alert-danger">
+      <div class="alert alert-danger" role="alert">
         <strong>Oh snap!</strong> Change a few things up and try submitting again.
       </div>
 
diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html
index 6e5dadf0d2..2d49cc764d 100644
--- a/docs/examples/theme/index.html
+++ b/docs/examples/theme/index.html
@@ -216,16 +216,16 @@
       <div class="page-header">
         <h1>Alerts</h1>
       </div>
-      <div class="alert alert-success">
+      <div class="alert alert-success" role="alert">
         <strong>Well done!</strong> You successfully read this important alert message.
       </div>
-      <div class="alert alert-info">
+      <div class="alert alert-info" role="alert">
         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
       </div>
-      <div class="alert alert-warning">
+      <div class="alert alert-warning" role="alert">
         <strong>Warning!</strong> Best check yo self, you're not looking too good.
       </div>
-      <div class="alert alert-danger">
+      <div class="alert alert-danger" role="alert">
         <strong>Oh snap!</strong> Change a few things up and try submitting again.
       </div>
 
diff --git a/docs/javascript.html b/docs/javascript.html
index 798ac1110f..fcfc12a736 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1393,14 +1393,14 @@ $('#myPopover').on('hidden.bs.popover', function () {
   <h2 id="alerts-examples">Example alerts</h2>
   <p>Add dismiss functionality to all alert messages with this plugin.</p>
   <div class="bs-example">
-    <div class="alert alert-warning fade in">
+    <div class="alert alert-warning fade in" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
       <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
     </div>
   </div><!-- /example -->
 
   <div class="bs-example">
-    <div class="alert alert-danger fade in">
+    <div class="alert alert-danger fade in" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
       <h4>Oh snap! You got an error!</h4>
       <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>