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

diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html
index 063c52cd5bd4b9710f15ffd65b397b048030a627..f0895b0ed9c956700d2b8a95f6fd248ad39e09eb 100644 (file)
--- a/docs/_includes/components/alerts.html
+++ b/docs/_includes/components/alerts.html
@@ -36,13 +36,13 @@
   <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" 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>Warning!</strong> Better check yourself, you're not looking too good.
     </div>
   </div>
 {% highlight html %}
 <div class="alert alert-warning alert-dismissable" 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>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
 {% endhighlight %}

diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html
index a76704673b05dd7eeff391338d6109c942de8795..043dad9ff1bad00cbfe43ae94ea8d62ec3f7e27c 100644 (file)
--- a/docs/_includes/css/helpers.html
+++ b/docs/_includes/css/helpers.html
@@ -48,10 +48,10 @@
   <h3 id="helper-classes-close">Close icon</h3>
   <p>Use the generic close icon for dismissing content like modals and alerts.</p>
   <div class="bs-example">
-    <p><button type="button" class="close" aria-hidden="true">&times;</button></p>
+    <p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
   </div>
 {% highlight html %}
-<button type="button" class="close" aria-hidden="true">&times;</button>
+<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 {% endhighlight %}
 
 

diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html
index de2ae9b84d68a77a65ec1024a5207d3b16c4f77b..3513015335e2b411237f37981f0cdf223dbf1e1d 100644 (file)
--- 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 e99d319e7b1e00b179794eb2b1c22ffe3b709d34..c1cc6f055967826d4eaa86d2303c89047586ce43 100644 (file)
--- 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">