Add hide-visually mixin

Hides an element visually while still allowing the content
to be accessible to assistive technology, e.g. screen readers

core/_bourbon.scss

@@ -36,6 +36,7 @@
 @import "bourbon/addons/font-face";
 @import "bourbon/addons/font-stacks";
 @import "bourbon/addons/hide-text";
+@import "bourbon/addons/hide-visually";
 @import "bourbon/addons/margin";
 @import "bourbon/addons/modular-scale";
 @import "bourbon/addons/padding";

core/bourbon/addons/_hide-visually.scss

@@ -0,0 +1,65 @@
+@charset "UTF-8";
+
+/// Hides an element visually while still allowing the content to be accessible
+/// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
+/// the affects of the hiding, which is handy for showing the element on focus,
+/// for example.
+///
+/// @link http://goo.gl/Vf1TGn
+///
+/// @argument {string} $toggle [hide]
+///   Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`
+///
+/// @example scss
+///   .element {
+///     @include hide-visually;
+///
+///     &:active,
+///     &:focus {
+///       @include hide-visually(unhide);
+///     }
+///   }
+///
+/// @example css
+///   .element {
+///     border: 0;
+///     clip: rect(1px, 1px, 1px, 1px);
+///     clip-path: circle(1% at 1% 1%);
+///     height: 1px;
+///     overflow: hidden;
+///     padding: 0;
+///     position: absolute;
+///     width: 1px;
+///   }
+///
+///   .hide-visually:active,
+///   .hide-visually:focus {
+///     clip: auto;
+///     clip-path: none;
+///     height: auto;
+///     overflow: visible;
+///     position: static;
+///     width: auto;
+///   }
+///
+/// @since 5.0.0
+
+@mixin hide-visually($toggle: hide) {
+  @if $toggle == "hide" {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: circle(1% at 1% 1%);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  } @elseif $toggle == "unhide" {
+    clip: auto;
+    clip-path: none;
+    height: auto;
+    overflow: visible;
+    position: static;
+    width: auto;
+  }
+}

spec/bourbon/addons/hide_visually_spec.rb

@@ -0,0 +1,35 @@
+require "spec_helper"
+
+describe "hide-visually" do
+  before(:all) do
+    ParserSupport.parse_file("addons/hide-visually")
+  end
+
+  context "called on element" do
+    it "adds properties to hide the element" do
+      ruleset = "border: 0; " +
+                "clip: rect(1px, 1px, 1px, 1px); " +
+                "clip-path: circle(1% at 1% 1%); " +
+                "height: 1px; " +
+                "overflow: hidden; " +
+                "padding: 0; " +
+                "position: absolute; " +
+                "width: 1px;"
+
+      expect(".hide-visually").to have_ruleset(ruleset)
+    end
+  end
+
+  context "called with unhide argument" do
+    it "adds properties to reverse the hiding of the element" do
+      ruleset = "clip: auto; " +
+                "clip-path: none; " +
+                "height: auto; " +
+                "overflow: visible; " +
+                "position: static; " +
+                "width: auto;"
+
+      expect(".hide-visually--unhide").to have_ruleset(ruleset)
+    end
+  end
+end

spec/fixtures/addons/hide-visually.scss

@@ -0,0 +1,9 @@
+@import "setup";
+
+.hide-visually {
+  @include hide-visually;
+}
+
+.hide-visually--unhide {
+  @include hide-visually(unhide);
+}