Remove redundant `.sr-only` text for Close buttons

Since `aria-label` is used, it's not necessary anymore.

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index fd01bdd52b429a7616a6c41bbd1478c7074317f7..e27109768dc4c5385419716980e9ae3d3b6cbb24 100644 (file)
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -64,7 +64,6 @@ You can see this in action with a live demo:
 <div class="alert alert-warning alert-dismissible fade in" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
-    <span class="sr-only">Close</span>
   </button>
   <strong>Holy guacamole!</strong> You should check in on some of those fields below.
 </div>
@@ -85,7 +84,6 @@ Or with `data` attributes on a button **within the alert**, as demonstrated abov
 {% highlight html %}
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
   <span aria-hidden="true">&times;</span>
-  <span class="sr-only">Close</span>
 </button>
 {% endhighlight %}
 

diff --git a/docs/components/modal.md b/docs/components/modal.md
index 8bf78267459f8b654edd84ef450ccc7a05710f74..caa974e23dde026d8852a88e56537b01de67866c 100644 (file)
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -48,7 +48,6 @@ A rendered modal with header, body, and set of actions in the footer.
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
-            <span class="sr-only">Close</span>
           </button>
           <h4 class="modal-title">Modal title</h4>
         </div>
@@ -71,7 +70,6 @@ A rendered modal with header, body, and set of actions in the footer.
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
-          <span class="sr-only">Close</span>
         </button>
         <h4 class="modal-title">Modal title</h4>
       </div>
@@ -98,7 +96,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
-          <span class="sr-only">Close</span>
         </button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
@@ -153,7 +150,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
-          <span class="sr-only">Close</span>
         </button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
@@ -223,7 +219,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
-          <span class="sr-only">Close</span>
         </button>
         <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
       </div>
@@ -241,7 +236,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
-          <span class="sr-only">Close</span>
         </button>
         <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
       </div>
@@ -329,7 +323,6 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
-            <span class="sr-only">Close</span>
           </button>
           <h4 class="modal-title" id="exampleModalLabel">New message</h4>
         </div>

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 42d5bd50fff5c7629fa348cde7a79cdbcd4b2957..a593f8ce2c3bf12e3b6d51e91d6bcca2c1011647 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -149,12 +149,11 @@ Ensure that any meaning conveyed through color is also conveyed in a format that
 
 ## Close icon
 
-Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`.
+Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.
 
 {% example html %}
 <button type="button" class="close" aria-label="Close">
   <span aria-hidden="true">&times;</span>
-  <span class="sr-only">Close</span>
 </button>
 {% endexample %}