Skip to content

Commit

Permalink
ARIA 1.1 Combobox Pattern: First Draft with Two Examples (pull #463)
Browse files Browse the repository at this point in the history 
* For issue #31, first draft of the combobox design pattern.
* For issue #100,  first cut of code for ARIA 1.1 style combobox examples with listbox and grid popups. The example pages do not yet include any documentation; example code only.
  • Loading branch information
@mcking65
mcking65 authored Sep 21, 2017
1 parent fa70af2 commit a2af4b3
Show file tree
Hide file tree
Showing 10 changed files with 1,343 additions and 65 deletions.
365 changes: 359 additions & 6 deletions aria-practices.html
View file

Large diffs are not rendered by default.

86 changes: 86 additions & 0 deletions examples/combobox/aria1.1pattern/css/combobox-1.1.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
57 changes: 32 additions & 25 deletions examples/combobox/aria1.1pattern/grid-combo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Binary file added examples/combobox/aria1.1pattern/imgs/arrow_drop_down_grey_27x27.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions examples/combobox/aria1.1pattern/js/combobox-1.1.js
View file

This file was deleted.

96 changes: 96 additions & 0 deletions examples/combobox/aria1.1pattern/js/grid-combo-example.js
View file
Original file line number Diff line number Diff line change
@@ -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
);

});
Loading

0 comments on commit a2af4b3

Please sign in to comment.