Combobox Examples: Initial cut of ARIA 1.1 style with listbox and gri…

…d popups (pull #440) Issue #100 initial drop of the code for the listbox and grid popup examples. This includes only the js/css/html for the example itself, not the descriptive text for the example pages.
w3c · Sep 8, 2017 · 2bbebe9 · 2bbebe9
1 parent 7403702
commit 2bbebe9
Show file tree

Hide file tree

Showing 9 changed files with 968 additions and 29 deletions.
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>
@@ -45,18 +47,30 @@ <h2 id="ex_label">Example</h2>
       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>

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
+  );
+
+});