diff --git a/html-sketches/combobox/combobox-examples.html b/html-sketches/combobox/combobox-examples.html index de1ce77..830c7e4 100644 --- a/html-sketches/combobox/combobox-examples.html +++ b/html-sketches/combobox/combobox-examples.html @@ -80,10 +80,11 @@
select
boxSee Whatsock for a working example. This is the pattern I tried to follow.
+Note: Behaviour not prgrammed in.
combobox
widgetcombobox
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="" readonly> -<ul role="listbox" id="owned-solute-listbox"> +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> @@ -117,11 +118,13 @@Code for
combobox
widgetExample 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. 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.
+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 bothSolute 3+ onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox1-2" aria-labelledby="label-listbox1 listbox1-2">Drink mixCobalt (II) nitrateCobalt Chloride@@ -139,7 +142,7 @@Example 4: Listbox as an un-ordered list
Solute 4
+ onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox4-4" aria-labelledby="label-listbox4 listbox4-4" style="list-style:none;">
+- Drink mix
- Cobalt (II) nitrate
- Cobalt Chloride
@@ -152,6 +155,49 @@Solute 4
- Potassium dichromate
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 + +++
- Drink mix
+- Cobalt (II) nitrate
+- Cobalt Chloride
+- Potassium dichromate
+- Gold (III) chloride
+- Potassium chromate
+- Nickel (II) chloride
+- Copper sulfate
+- Potassium permanganate
+- Potassium dichromate
+