Update element-invisible mixin

Trying to make it bulletproof. I also linked [a detailed post on Hugo Giraudel's blog](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/), but to sum it up:
* improve the reset part with `border` and  `padding`;
* add `clip-path` as a progressive enhancement for [deprecated `clip` property](https://www.w3.org/TR/css-masking-1/#clip-property) with @ryuran's [shortest notation](https://twitter.com/ryuran78/status/778943389819604992);
* use `white-space` to prevent vocalization inconsistency on some screen readers: see [J. Renée Beach's post](https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.vcd5xlpgg) about this.

You'll find [my test case on codepen](http://codepen.io/ffoodd/pen/gwKZyq?editors=1100#). Hope it'll help — and let me know if there is any issue with this :)

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index f5c2e80eb8ad5e49d90f8cb848a1baaa09dc64ed..60585ca693a702edf0eb214303df84a8956a52e8 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -182,12 +182,17 @@
 
 /// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
 /// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
+/// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 @mixin element-invisible {
   position: absolute !important;
   width: 1px;
   height: 1px;
+  padding: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
 }
 
 /// Reverses the CSS output created by the `element-invisible()` mixin.
@@ -197,6 +202,8 @@
   height: auto;
   overflow: visible;
   clip: auto;
+  white-space: normal;
+  clip-path: none;
 }
 
 /// Vertically centers the element inside of its first non-static parent,