w3c · mcking65 · Sep 21, 2017 · Aug 22, 2017 · Aug 22, 2017 · Sep 10, 2017
diff --git a/aria-practices.html b/aria-practices.html
diff --git a/examples/combobox/aria1.1pattern/css/combobox-1.1.css b/examples/combobox/aria1.1pattern/css/combobox-1.1.css
@@ -2,3 +2,89 @@
 	font-style: italic;
 	color: #366ED4;
 }
+
+.hidden {
+	display: none;
+}
+
+.combobox-wrapper {
+	display: inline-block;
+	position: relative;
+	font-size: 16px;
+}
+
+.combobox-label {
+	font-size: 14px;
+	font-weight: bold;
+	margin-right: 5px;
+}
+
+.listbox, .grid {
+	min-width: 230px;
+	background: white;
+	border: 1px solid #ccc;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: 1.7em;
+	z-index: 1;
+}
+
+.listbox .result {
+	cursor: default;
+	margin: 0;
+}
+
+.listbox .result:hover, .grid .result-row:hover {
+	background: rgb(139, 189, 225);
+}
+
+.listbox .focused, .grid .focused {
+	background: rgb(139, 189, 225);
+}
+
+.grid .focused-cell {
+	outline-style: dotted;
+	outline-color: green;
+}
+
+.combobox-wrapper input {
+	font-size: inherit;
+  border: 1px solid #aaa;
+	border-radius: 2px;
+  line-height: 1.5em;
+	padding-right: 30px;
+  width: 200px;
+}
+
+.combobox-dropdown {
+	position: absolute;
+	right: 0;
+	top: 0;
+	padding: 0 0 2px;
+	height: 1.5em;
+	border-radius: 0 2px 2px 0;
+	border: 1px solid #aaa;
+}
+
+.grid .result-row {
+	padding: 2px;
+	cursor: default;
+	margin: 0;
+}
+
+.grid .result-cell {
+	display: inline-block;
+	cursor: default;
+	margin: 0;
+	padding: 0 5px;
+}
+
+.grid .result-cell:last-child {
+	float: right;
+	font-size: 12px;
+	font-weight: 200;
+	color: #333;
+	line-height: 24px;
+}
diff --git a/examples/combobox/aria1.1pattern/grid-combo.html b/examples/combobox/aria1.1pattern/grid-combo.html
@@ -10,10 +10,12 @@
 <script src="../../js/examples.js"></script>
 <script src="../../js/highlight.pack.js"></script>
 <script src="../../js/app.js"></script>
+<script src="../../js/utils.js" type="text/javascript"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.1.css" rel="stylesheet">
-<script src="js/combobox-1.1.js" type="text/javascript"></script>
+<script src="js/grid-combobox.js" type="text/javascript"></script>
+<script src="js/grid-combo-example.js" type="text/javascript"></script>
 </head>
 <body>
   <main>
@@ -23,11 +25,9 @@ <h1>Example of ARIA 1.1 Combobox with Grid Popup</h1>
     This work is tracked by <a href="https://github.com/w3c/aria-practices/issues/100">issue 100</a>.
   </p>
   <p>
-    <!-- Provide an overview of the example where the first sentence provides a link to the section of aria-practices.html that describes the pattern this example implements. -->
-    Replace this paragraph with an overview of the example that is something like the following. The
-    below example section demonstrates a simple checkbox that implements the
-    <a href="../../#checkbox">design pattern for checkbox.</a>
-    This example uses ... summarize salient techniques )
+    The following example demonstrates an implementation of the 
+    <a href="../../../#combobox">combobox design pattern</a>
+    that uses the option to popup a grid containing suggested values.
   </p>
   <p>Similar examples include: </p>
   <ul>
@@ -38,25 +38,31 @@ <h1>Example of ARIA 1.1 Combobox with Grid Popup</h1>
   <section>
     <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>
-    <!--
-      Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
-      The sourceCode functions in the examples/js/examples.js render the HTML source to show it to the reader of the example page.
-      If you change the ID of this div, be sure to update the parameters of the sourceCode.add() function call, which is made following the div with id="sc1" where the HTML is render.
-      The div for the rendered HTML source is in the last section of the page.
-    -->
     <div id="ex1">
-      <!--  Replace content of this div with the example.  -->
-      <p>This is the place where the reader will experience the functioning example.</p>
-      <ul>
-        <li>The HTML in this section along with the javascript and CSS it uses demonstrate
-          the design pattern.</li>
-        <li>
-          When developing an example implementation for this guide, please follow the
-          <a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>
-          .
-        </li>
-        <!--  Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo.  -->
-      </ul>
+      <label id="ex1-label" class="combobox-label">
+        Fruits and vegetables
+      </label>
+      <div class="combobox-wrapper">
+        <div role="combobox"
+          aria-expanded="false"
+          aria-owns="ex1-grid"
+          aria-haspopup="grid"
+          id="ex1-combobox">
+          <input type="text"
+            aria-autocomplete="list"
+            aria-controls="ex1-grid"
+            aria-activedescendant=""
+            aria-labelledby="ex1-label"
+            id="ex1-input">
+        </div>
+        <div
+          aria-labelledby="ex1-label"
+          role="grid"
+          id="ex1-grid"
+          class="grid hidden">
+        </div>
+      </div>
+    </div>
     </div>
     <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>
@@ -190,7 +196,8 @@ <h2 id="sc1_label">HTML Source Code</h2>
   </main>
   <nav>
     <!--  Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example.  -->
-    <a href="../../#pattern_ID">EXAMPLE_NAME Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
+    <a href="../../#pattern_ID">EXAMPLE_NAME Design Pattern </a>
+    <a href="../../../#combobox">Combobox Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
   </nav>
 </body>
 </html>
diff --git a/examples/combobox/aria1.1pattern/imgs/arrow_drop_down_grey_27x27.png b/examples/combobox/aria1.1pattern/imgs/arrow_drop_down_grey_27x27.png
diff --git a/examples/combobox/aria1.1pattern/js/combobox-1.1.js b/examples/combobox/aria1.1pattern/js/combobox-1.1.js
diff --git a/examples/combobox/aria1.1pattern/js/grid-combo-example.js b/examples/combobox/aria1.1pattern/js/grid-combo-example.js
@@ -0,0 +1,96 @@
+/**
+ * ARIA Combobox Examples
+ */
+
+var FRUITS_AND_VEGGIES = [
+  ['Apple', 'Fruit'],
+  ['Artichoke', 'Vegetable'],
+  ['Asparagus', 'Vegetable'],
+  ['Banana', 'Fruit'],
+  ['Beets', 'Vegetable'],
+  ['Bell pepper', 'Vegetable'],
+  ['Broccoli', 'Vegetable'],
+  ['Brussels sprout', 'Vegetable'],
+  ['Cabbage', 'Vegetable'],
+  ['Carrot', 'Vegetable'],
+  ['Cauliflower', 'Vegetable'],
+  ['Celery', 'Vegetable'],
+  ['Chard', 'Vegetable'],
+  ['Chicory', 'Vegetable'],
+  ['Corn', 'Vegetable'],
+  ['Cucumber', 'Vegetable'],
+  ['Daikon', 'Vegetable'],
+  ['Date', 'Fruit'],
+  ['Edamame', 'Vegetable'],
+  ['Eggplant', 'Vegetable'],
+  ['Elderberry', 'Fruit'],
+  ['Fennel', 'Vegetable'],
+  ['Fig', 'Fruit'],
+  ['Garlic', 'Vegetable'],
+  ['Grape', 'Fruit'],
+  ['Honeydew melon', 'Fruit'],
+  ['Iceberg lettuce', 'Vegetable'],
+  ['Jerusalem artichoke', 'Vegetable'],
+  ['Kale', 'Vegetable'],
+  ['Kiwi', 'Fruit'],
+  ['Leek', 'Vegetable'],
+  ['Lemon', 'Fruit'],
+  ['Mango', 'Fruit'],
+  ['Mangosteen', 'Fruit'],
+  ['Melon', 'Fruit'],
+  ['Mushroom', 'Fungus'],
+  ['Nectarine', 'Fruit'],
+  ['Okra', 'Vegetable'],
+  ['Olive', 'Vegetable'],
+  ['Onion', 'Vegetable'],
+  ['Orange', 'Fruit'],
+  ['Parship', 'Vegetable'],
+  ['Pea', 'Vegetable'],
+  ['Pear', 'Fruit'],
+  ['Pineapple', 'Fruit'],
+  ['Potato', 'Vegetable'],
+  ['Pumpkin', 'Fruit'],
+  ['Quince', 'Fruit'],
+  ['Radish', 'Vegetable'],
+  ['Rhubarb', 'Vegetable'],
+  ['Shallot', 'Vegetable'],
+  ['Spinach', 'Vegetable'],
+  ['Squash', 'Vegetable'],
+  ['Strawberry', 'Fruit'],
+  ['Sweet potato', 'Vegetable'],
+  ['Tomato', 'Fruit'],
+  ['Turnip', 'Vegetable'],
+  ['Ugli fruit', 'Fruit'],
+  ['Victoria plum', 'Fruit'],
+  ['Watercress', 'Vegetable'],
+  ['Watermelon', 'Fruit'],
+  ['Yam', 'Vegetable'],
+  ['Zucchini', 'Vegetable']
+];
+
+function searchVeggies (searchString) {
+  var results = [];
+
+  for (var i = 0; i < FRUITS_AND_VEGGIES.length; i++) {
+    var veggie = FRUITS_AND_VEGGIES[i][0].toLowerCase();
+    if (veggie.indexOf(searchString.toLowerCase()) === 0) {
+      results.push(FRUITS_AND_VEGGIES[i]);
+    }
+  }
+
+  return results;
+}
+
+/**
+ * @function onload
+ * @desc Initialize the combobox examples once the page has loaded
+ */
+window.addEventListener('load', function () {
+  var ex1Combobox = new aria.GridCombobox(
+    document.getElementById('ex1-combobox'),
+    document.getElementById('ex1-input'),
+    document.getElementById('ex1-grid'),
+    searchVeggies
+  );
+
+});