Labeled field updates

.storybook/styles/application.scss

@@ -48,10 +48,9 @@ $output-bourbon-deprecation-warnings: false;
 @import 'components/progress-circle';
 @import 'components/login';
 @import 'components/pagination';
-@import 'components/sidebar-content';
 @import 'components/radio';
 @import 'components/tabs';
+@import 'components/visually-hidden';
 
 // Page Styles
 @import 'pages/main';
-@import 'pages/styleguide';

.storybook/styles/components/_forms.scss

@@ -1,7 +1,7 @@
 /*-----------------------
 Fieldset
 -----------------------*/
-fieldset {
+.field-wrapper {
   display: inline-block;
   @include rem(margin-top, 15px);
   position: relative;
@@ -64,12 +64,17 @@ Input Icon
     @include rem(padding-left, 30px);
   }
 
-  i {
-    @include position(absolute, 1px null null 10px);
-    background-repeat: no-repeat;
-    background-size: 15px;
-    height: 20px;
-    width: 20px;
+  .input-wrapper {
+    position: relative;
+
+    i {
+      @include position(absolute, 3px null null 10px);
+      background-repeat: no-repeat;
+      background-size: 15px;
+      display: inline-block;
+      height: 20px;
+      width: 20px;
+    }
   }
 
   .mail-icon:after {
@@ -144,7 +149,7 @@ Radio
 /*-----------------------
 Checkbox
 -----------------------*/
-.checkbox {
+div.checkbox {
   @include rem(margin-top, 15px);
   width: auto;
 
@@ -404,29 +409,6 @@ Button Area
   width: 135px;
 }
 
-/*-----------------------
-Input Icon
------------------------*/
-.icon-label {
-  position: relative;
-  input {
-    @include rem(padding-left, 30px);
-  }
-
-  .input-wrapper {
-    position: relative;
-
-    i {
-      @include position(absolute, 3px null null 10px);
-      background-repeat: no-repeat;
-      background-size: 15px;
-      display: inline-block;
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
-
 /*-----------------------
 Custom Dropdown Select
 -----------------------*/
@@ -571,13 +553,8 @@ Custom Dropdown Select
     }
   }
 
-  fieldset.checkbox,
-  fieldset.CheckboxGroup {
-    width: 100% !important;
-
-    input {
-      border: 1px solid $white-med;
-    }
+  .checkbox {
+    width: 100%;
   }
 }
 

.storybook/styles/components/_visually-hidden.scss

@@ -0,0 +1,17 @@
+// Visually Hidden Element
+// https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+
+// In the rare case that this is applied to an interactive element, show the
+// element temporarily when it receives focus (for keyboard users)
+
+.visually-hidden:not(:focus):not(:active) {
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  padding: 0 !important;
+}