Two-State Checkbox Example: Add missing group label (pull request 694)

Closes #604 by:
1.  added a `div` around the list of checkboxes with role group and aria-labelledby pointing to the heading that labels the group of checkboxes.
2. Updating the roles, states, and properties documentation to include the group and aria-labelledby.

examples/checkbox/checkbox-1/checkbox-1.html

@@ -22,7 +22,7 @@
       <li><a href="https://github.com/w3c/aria-practices/projects/9">Related Issues</a></li>
       <li><a href="../../../#checkbox">Design Pattern</a></li>
     </ul>
-  </nav>  
+  </nav>
   <main>
     <h1>Checkbox Example (Two State)</h1>
     <p>This example implements the  <a href="../../../#checkbox">Checkbox Design Pattern</a> for a two state checkbox using <code>div</code> elements.</p>
@@ -37,8 +37,8 @@ <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
 
       <div  id="ex1">
-        <h3>Sandwich Condiments</h3>
-        <div>
+        <h3 id="id-group-label">Sandwich Condiments</h3>
+        <div role="group" aria-labelledby="id-group-label">
           <ul class="checkboxes">
             <li><div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div></li>
             <li><div role="checkbox" aria-checked="true"  tabindex= "0">Tomato</div></li>
@@ -100,6 +100,36 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           </tr>
         </thead>
         <tbody>
+            <tr>
+              <th scope="row"></th>
+              <td></td>
+              <td><code>h3</code></td>
+              <td>
+                <ul>
+                  <li>Provides a grouping label for the group of checkboxes.</li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row"><code>group</code></th>
+              <td></td>
+              <td><code>div</code></td>
+              <td>
+                <ul>
+                  <li>Identifies the <code>div</code> element as a <code>group</code> container for the checkboxes.</li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row"</th>
+              <td><code>aria-labelledby</code></td>
+              <td><code>div</code></td>
+              <td>
+                <ul>
+                  <li>The <code>aria-labelledby</code> attribute references the <code>id</code> attribute of the <code>h3</code> element to define the accessible name for the group of checkboxes.</li>
+                </ul>
+              </td>
+            </tr>
             <tr>
               <th scope="row"><code>checkbox</code></th>
               <td></td>