Combobox

Example 1: HTML select and option elements

Working select box

The select element is identified as having pop-up menu, and the popped-up menu (i.e., the box of options) cannot be positioned off screen.

Working Hidden select box

Code for hidden select box

With the size attribute, the box of options stays open, seems to behave like it has the ARIA role listbox, and can be successfully positioned off screen.

<label for="solute-options">Hidden solutes:</label>
<select id="solute-options" name="solute-options" size="10">
  <option value="1">Drink mix</option>
  <option value="2">Cobalt (II) nitrate</option>
  <option value="3">Cobalt Chloride</option>
  <option value="4">Potassium dichromate</option>
  <option value="5">Gold (III) chloride</option>
  <option value="6">Potassium chromate</option>
  <option value="7">Nickel (II) chloride</option>
  <option value="8">Copper sulfate</option>
  <option value="9">Potassium permanganate</option>
  <option value="10">Potassium dichromate</option>
</select>

Example 2: ARIA 1.0 Design Pattern

See Whatsock for a working example. This is the pattern I tried to follow.

Note: Behaviour not prgrammed in.

Non-working combobox widget

Code for combobox widget

<input id="solute-comboxbox" tabindex="0" aria-label="Solute" type="text" 
role="combobox" aria-expanded="false" aria-autocomplete="list" 
aria-controls="owned-solute-listbox" aria-activedescendent="solute-option-02" readonly>
<ul role="listbox" id="owned-solute-listbox" aria-labelledby="solute2-comboxbox solute-option-01">
  <li role="option" id="solute-option-01">Drink mix</li>
  <li role="option" id="solute-option-02">Cobalt (II) nitrate</li>
  <li role="option" id="solute-option-03">Cobalt Chloride</li>
  <li role="option" id="solute-option-04">Potassium dichromate</li>
  <li role="option" id="solute-option-05">Gold (III) chloride</li>
  <li role="option" id="solute-option-06">Potassium chromate</li>
  <li role="option" id="solute-option-07">Nickel (II) chloride</li>
  <li role="option" id="solute-option-08">Copper sulfate</li>
  <li role="option" id="solute-option-09">Potassium permanganate</li>
  <li role="option" id="solute-option-10">Potassium dichromate</li>
</ul>

Example 3: Listbox Design Pattern

Code from MDN Listbox Example. This example as-is does not read out the label, "Solute 3", as the listbox's label on focus. The listbox always seems to be annouced upon leaving the listbox, but not always upon entering it. The full Keyboard design pattern is not programmed in, either.

Note: Added second aria-labelledby and now both

Solute 3
Drink mix
Cobalt (II) nitrate
Cobalt Chloride
Potassium dichromate
Gold (III) chloride
Potassium chromate
Nickel (II) chloride
Copper sulfate
Potassium permanganate
Potassium dichromate

Example 4: Listbox as an un-ordered list

Same code from MDN Listbox Example, but using in this example, I'm using a heading and list structure. This example as-is does not read out the h3 heading "Solute 4" as the label for the listbox. The listbox always seems to be annouced upon leaving the listbox, but not always upon entering it. The full Keyboard design pattern is not programmed in here, either.

Solute 4

Code for Example 4 listbox widget

	<h3 id="label-listbox4">Solute 4</h3>descendent="" readonly>
	
	<ul role="listbox" tabindex="0" id="listbox4" 
	    onclick="return listItemClick(event);" 
	    onkeydown="return listItemKeyEvent(event);" 
	    onkeypress="return listItemKeyEvent(event);" 
	    onfocus="this.className='focus';" onblur="this.className='blur';"
	    aria-activedescendant="listbox4-4" 
	    aria-labelledby="label-listbox4 listbox4-4" 
	    style="list-style:none;">
	  <li role="option" id="listbox4-1">Drink mix</li>
	  <li role="option" id="listbox4-2">Cobalt (II) nitrate</li>
	  <li role="option" id="listbox4-3">Cobalt Chloride</li>
	  <li role="option" id="listbox4-4" class="selected" aria-selected="true">Potassium dichromate</li>
	  <li role="option" id="listbox4-5">Gold (III) chloride</li>
	  <li role="option" id="listbox4-6">Potassium chromate</li>
	  <li role="option" id="listbox4-7">Nickel (II) chloride</li>
	  <li role="option" id="listbox4-8">Copper sulfate</li>
	  <li role="option" id="listbox4-9">Potassium permanganate</li>
	  <li role="option" id="listbox4-10">Potassium dichromate</li>
	</ul>

Example 5: Button with dynamic inner content & Listbox as an un-ordered list

Adpated from collapsible listbox example

Solute