Merge pull request #17945 from patrickhlauke/docs-redundant-sr

Remove redundant `<span class="sr-only">...</span>` for close buttons

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 %}
 

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>

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 %}
 
@@ -252,7 +251,7 @@ The `.invisible` class can be used to toggle only the visibility of an element,
 }
 {% endhighlight %}
 
-## Screen readers
+## Screen readers and keyboard users
 
 Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.