From 7051341df39277b227bf63ed18d6b00172977895 Mon Sep 17 00:00:00 2001
From: Nicolas Coden <nicolas@ncoden.fr>
Date: Wed, 10 Jan 2018 23:31:58 +0100
Subject: [PATCH] fix: enforce `show-for-sr` and other visibility classes with
 important

Please read: https://github.com/zurb/foundation-sites/issues/10850#issuecomment-356741458

Closes: https://github.com/zurb/foundation-sites/issues/10850
---
 scss/util/_mixins.scss | 47 ++++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index f208fb421..4dced9586 100644
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -207,27 +207,38 @@
 /// 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);
-  white-space: nowrap;
-  clip-path: inset(50%);
-  border: 0;
+///
+/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties
+@mixin element-invisible(
+  $enforce: true
+) {
+  $important: if($enforce, '!important', null);
+
+  position: absolute #{$important};
+  width: 1px #{$important};
+  height: 1px #{$important};
+  padding: 0 #{$important};
+  overflow: hidden #{$important};
+  clip: rect(0,0,0,0) #{$important};
+  white-space: nowrap #{$important};
+  clip-path: inset(50%) #{$important};
+  border: 0 #{$important};
 }
 
 /// Reverses the CSS output created by the `element-invisible()` mixin.
-@mixin element-invisible-off {
-  position: static !important;
-  width: auto;
-  height: auto;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-  clip-path: none;
+/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties
+@mixin element-invisible-off(
+  $enforce: true
+) {
+  $important: if($enforce, '!important', null);
+
+  position: static #{$important};
+  width: auto #{$important};
+  height: auto #{$important};
+  overflow: visible #{$important};
+  clip: auto #{$important};
+  white-space: normal #{$important};
+  clip-path: none #{$important};
 }
 
 /// Vertically centers the element inside of its first non-static parent,
-- 
2.47.2