Labeled field updates (#595)

* Allows LabeledField to accept optional as prop and updates Checkbox+Radio Group

* Uses css to visually hide label if set to false for Checkbox+Radio Groups to preserve html semantics

* Displays required indicator and hint if provided

* Updates dropdown-checkbox-group to match the same semantics as regular checkbox-group

* Remove dropdown-checkbox-group component

* Add Dropdown in storybook

* Remove unused css files

* Update styling

* Define checkbox group container outside of component

* Remove test suite re: missing legend

* Set group role on labeled field and simplify classname logic

* Move dropdown test suite into checkbox-group test file

* Update comment

* Update version

* Update helper comment

* Undo defining variable outside

* use prepare for yarn run build

* update comments

* explicitly set true on useDropdown

* update select component to use fieldset and legend

* update tests to use test id for labeled field component

* undo updates in select

* rename prop

* use option.value for key

* update test

* add dropdown checkboxgroup tests

* add test units for updated legend

* rename prop rename

* update proptype

* add migration guide

* use shorthand assignment

* add & update migration guide

* use describe

* conditionally set field-wrapper class name and remove data-testid

* add visually hidden class assertion

* replace example in test to use grouped elements

* update param sentence

* be explicit with allowed proptypes for wrapper element

* fix typo

* use markup for components

* pass in is-active conditional classname on higher level

* update dropdown select so the labels populate

* Add a section about dropdown selection changes  in migration guide

* Update comments

* wrap tests under describe

* Use the correct labels for dropdown test

* Pass in id for checkbox label that matches input id

* Use labels for safe guard check

---------

Co-authored-by: Ji Hye Park <jihyepark@Jis-MacBook-Pro.local>
Co-authored-by: Ji Hye Park <jihyepark@jis-macbook-pro.attlocal.net>
Co-authored-by: Ji Hye Park <jihyepark@Jis-MacBook-Pro.AN-700-AP-I-AC>
Co-authored-by: Conor <conor@launchpadlab.com>

Author: 5 people

.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
+Fieldsets and Field Wrappers
 -----------------------*/
-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 {
@@ -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/_sidebar-content.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;
+}

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

@@ -29,6 +29,7 @@ Documentation and usage info can be found in [docs.md](docs.md).
 - [v7.0.0](migration-guides/v7.0.0.md)
 - [v8.0.0](migration-guides/v8.0.0.md)
 - [v9.0.0](migration-guides/v9.0.0.md)
+- [v10.0.0](migration-guides/v10.0.0.md)
 
 ## Contribution