From 9302fd4fd4a05a44de991416fea4b01443343595 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 16 Oct 2015 00:56:59 +0100
Subject: [PATCH 1/2] Remove redundant `.sr-only` text for Close buttons

Since `aria-label` is used, it's not necessary anymore.
---
 docs/components/alerts.md    | 2 --
 docs/components/modal.md     | 7 -------
 docs/components/utilities.md | 3 +--
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index fd01bdd52b..e27109768d 100644
--- 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 8bf7826745..caa974e23d 100644
--- 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 42d5bd50ff..a593f8ce2c 100644
--- 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 %}
 

From 68189e226921d0cfaec4922b723d030baa11a25c Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 16 Oct 2015 00:57:49 +0100
Subject: [PATCH 2/2] Add "keyboard users" to heading for `sr-only-focusable`

---
 docs/components/utilities.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index a593f8ce2c..727a55d04a 100644
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -251,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.