docs(fieldlabel): fix some example docs for form

- Fix incorrect field group usage in example markup for Form. Previously
  had a "for" attribute for an ID that didn't exist, and was using a
  label. But this was more of a fieldset usage and needed to use the
  aria attributes (reference Field group).
- Improves some titles and descriptions to be more clear about alignment

Author: jawinn

components/fieldlabel/metadata/form.yml

@@ -2,8 +2,8 @@ name: Form
 description: Form provides structure and spacing for your form fields.
 examples:
   - id: form-labels-left
-    name: Form (labels left)
-    description: Apply `.spectrum-FieldLabel--left` to each FieldLabel to get left labels.
+    name: Standard - left-aligned text
+    description: A two column layout with left-aligned label text. Apply `.spectrum-FieldLabel--left` to each Field label.
     markup: |
       <form class="spectrum-Form">
         <div class="spectrum-Form-item">
@@ -34,8 +34,8 @@ examples:
           </div>
         </div>
 
-        <div class="spectrum-Form-item">
-          <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Interests</label>
+        <div class="spectrum-Form-item" role="group" aria-labelledby="checkboxgroup-label-1">
+          <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" id="checkboxgroup-label-1">Interests</div>
           <div class="spectrum-Form-itemField">
             <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
               <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
@@ -84,8 +84,8 @@ examples:
         </div>
       </form>
   - id: form-labels-right
-    name: Form (labels right)
-    description: Apply `.spectrum-FieldLabel--right` to each FieldLabel to get right labels.
+    name: Right-aligned text
+    description: A two column layout with right-aligned label text. Apply `.spectrum-FieldLabel--right` to each Field label.
     markup: |
       <form class="spectrum-Form">
         <div class="spectrum-Form-item">
@@ -116,8 +116,8 @@ examples:
           </div>
         </div>
 
-        <div class="spectrum-Form-item">
-          <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Interests</label>
+        <div class="spectrum-Form-item" role="group" aria-labelledby="checkboxgroup-label-2">
+          <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" id="checkboxgroup-label-2">Interests</div>
           <div class="spectrum-Form-itemField">
             <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
               <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
@@ -166,8 +166,8 @@ examples:
         </div>
       </form>
   - id: form-labels-above
-    name: Form (labels above)
-    description: "For labels above, the layout changes completely, so you must apply `.spectrum-Form--labelsAbove` to the Form itself. You do not need to apply a specific class to the FieldLabel."
+    name: Labels above
+    description: "A stacked layout with the labels above the form fields. Apply the variant class `.spectrum-Form--labelsAbove` to the Form itself. You do not need to apply a specific class to the Field label."
     markup: |
       <form class="spectrum-Form spectrum-Form--labelsAbove">
         <div class="spectrum-Form-item">
@@ -199,9 +199,9 @@ examples:
         </div>
 
         <div class="spectrum-Form-item">
-          <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Interests</label>
+          <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" role="group" aria-labelledby="checkboxgroup-label-3">Interests</div>
           <div class="spectrum-Form-itemField">
-            <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
+            <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical" id="checkboxgroup-label-3">
               <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
                 <span class="spectrum-Checkbox-box">