From: Gaël Poupard <ffoodd@users.noreply.github.com>
Date: Fri, 10 Mar 2017 15:57:38 +0000 (+0100)
Subject: Update element-invisible mixin
X-Git-Tag: v6.4.0-rc1~91^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9864%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 f5c2e80eb..60585ca69 100644
--- 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,