From 949b81f51171550bcec0d92e771793999e69a389 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Sat, 3 May 2014 19:38:09 -0700
Subject: Improve accessibility of close buttons in modals & alerts

Adds textual caption to the close buttons. The "X" multiplication sign isn't very meaningful to screenreaders.

Credit: https://github.com/paypal/bootstrap-accessibility-plugin
Per:
    https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#alert
    https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#modal-dialog
---
 docs/_includes/js/alerts.html |  6 +++---
 docs/_includes/js/modal.html  | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'docs/_includes/js')

diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html
index de2ae9b84..351301533 100644
--- a/docs/_includes/js/alerts.html
+++ b/docs/_includes/js/alerts.html
@@ -5,14 +5,14 @@
   <p>Add dismiss functionality to all alert messages with this plugin.</p>
   <div class="bs-example">
     <div class="alert alert-warning fade in" role="alert">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></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" role="alert">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></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>
       <p>
@@ -29,7 +29,7 @@
 
   <h3>Markup</h3>
   <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
-  {% highlight html %}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>{% endhighlight %}
+  {% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>{% endhighlight %}
 
   <h3>Methods</h3>
 
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html
index e99d319e7..c1cc6f055 100644
--- a/docs/_includes/js/modal.html
+++ b/docs/_includes/js/modal.html
@@ -24,7 +24,7 @@
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             <h4 class="modal-title">Modal title</h4>
           </div>
           <div class="modal-body">
@@ -43,7 +43,7 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
         <h4 class="modal-title">Modal title</h4>
       </div>
       <div class="modal-body">
@@ -66,7 +66,7 @@
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
           <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
         </div>
         <div class="modal-body">
@@ -117,7 +117,7 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
       <div class="modal-body">
@@ -179,7 +179,7 @@
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
           <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
         </div>
         <div class="modal-body">
@@ -193,7 +193,7 @@
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
           <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
         </div>
         <div class="modal-body">
-- 
cgit v1.2.3