ARIA 1.1 Combobox Examples: Use for attribute on label element inst…

…ead of aria-labelledby on `input` element (pull #746)

Resolve issue #542 by making following changes to both pages containing aria 1.1 combo examples:
* Removing aria-labelledby from input
* Adding for attribute to label element to reference input
* Updating documentation table

examples/combobox/aria1.1pattern/grid-combo.html

@@ -53,7 +53,7 @@ <h1>ARIA 1.1 Combobox with Grid Popup Example</h1>
       <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">
-        <label id="ex1-label" class="combobox-label">
+        <label for="ex1-input" id="ex1-label" class="combobox-label">
           Fruits and vegetables
         </label>
         <div class="combobox-wrapper">
@@ -65,7 +65,6 @@ <h2 id="ex_label">Example</h2>
             <input type="text"
               aria-autocomplete="list"
               aria-controls="ex1-grid"
-              aria-labelledby="ex1-label"
               id="ex1-input">
           </div>
           <div
@@ -298,10 +297,15 @@ <h3 id="rps_label_textbox">Textbox</h3>
           <tr>
             <td></td>
             <th scope="row">
-              <code>aria-labelledby=<q>IDREF</q></code>
+              <code>id="string"</code>
             </th>
             <td><code>input[type="text"]</code></td>
-            <td>Provides a label for the textbox element of the combobox.</td>
+            <td>
+              <ul>
+                <li>Referenced by <code>for</code> attribute of <code>label</code> element to provide an accessible label.</li>
+                <li>Recommended labeling method for HTML input elements so clicking label focuses input.</li>
+              </ul>
+            </td>
           </tr>
           <tr>
             <td></td>

examples/combobox/aria1.1pattern/listbox-combo.html

@@ -52,7 +52,7 @@ <h2 id="ex_label">Examples</h2>
       <h3 id="ex1_label">Example 1: List Autocomplete with Manual Selection</h3>
       <div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
       <div id="ex1">
-        <label id="ex1-label" class="combobox-label">
+        <label for="ex1-input" id="ex1-label" class="combobox-label">
           Choice 1 Fruit or Vegetable
         </label>
         <div class="combobox-wrapper">
@@ -64,7 +64,6 @@ <h3 id="ex1_label">Example 1: List Autocomplete with Manual Selection</h3>
             <input type="text"
               aria-autocomplete="list"
               aria-controls="ex1-listbox"
-              aria-labelledby="ex1-label"
               id="ex1-input">
           </div>
           <ul
@@ -408,10 +407,15 @@ <h3 id="rps_label_textbox">Textbox</h3>
           <tr>
             <td></td>
             <th scope="row">
-              <code>aria-labelledby=<q>IDREF</q></code>
+              <code>id="string"</code>
             </th>
             <td><code>input[type="text"]</code></td>
-            <td>Provides a label for the textbox element of the combobox.</td>
+            <td>
+              <ul>
+                <li>Referenced by <code>for</code> attribute of <code>label</code> element to provide an accessible label.</li>
+                <li>Recommended labeling method for HTML input elements so clicking label focuses input.</li>
+              </ul>
+            </td>
           </tr>
           <tr>
             <td></td>