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

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index f208fb4219539a7db80af75171d6db11790bf8e4..4dced958631a12d61225e7ab6310b536321b0964 100644 (file)
--- 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,