add show-on-focus utility

Author: broccolini

packages/primer-utilities/lib/visibility-display.scss

@@ -81,7 +81,6 @@
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content/
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -93,3 +92,20 @@
   word-wrap: normal;
   border: 0;
 }
+
+// Only display content on focus
+.show-on-focus {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+
+  &:focus {
+    z-index: 20;
+    width: auto;
+    height: auto;
+    clip: auto;
+  }
+}