From 2085c142679563189dbc34ec6bf4b00e32b8f615 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <ffoodd@users.noreply.github.com>
Date: Mon, 20 Mar 2017 00:05:45 +0100
Subject: [PATCH] Update _screen-reader.scss (#22154)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update _screen-reader.scss

Small improvements that could be important:
* `clip` [is deprecated](https://www.w3.org/TR/css-masking-1/#clip-property). Adding `clip-path` as progressive enhancement; the shorter notation came from @ryuran 's [suggestion](https://twitter.com/ryuran78/status/778943389819604992);
* [J. Renée Beach warned about single pixel with interfering with screen readers vocalisation](https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.vcd5xlpgg) solved with `white-space`.

See [the detailed post on Hugo Giraudel's blog](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/).

Also kinda related to issue #20732 :)

Please let me know if you find any trouble with this technique. Thanks a lot!

* Reorder declarations

To pass Hound.
Didn't think `clip` and `clip-path` would be considered as unrelated…

* Trailing spaces

* Last trailing space?

* Remove margin: -1px
---
 scss/mixins/_screen-reader.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
index c208583249..a5fa51c5c8 100644
--- a/scss/mixins/_screen-reader.scss
+++ b/scss/mixins/_screen-reader.scss
@@ -1,15 +1,17 @@
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content
+// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
-  margin: -1px;
   overflow: hidden;
   clip: rect(0,0,0,0);
+  white-space: nowrap;
+  clip-path: inset(50%);
   border: 0;
 }
 
@@ -25,8 +27,9 @@
     position: static;
     width: auto;
     height: auto;
-    margin: 0;
     overflow: visible;
     clip: auto;
+    white-space: normal;
+    clip-path: none;
   }
 }