html-sketches/combobox/combobox.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Combobox Examples</title>
  <!-- Styles or Style Sheets -->
  <style>
	  
  </style>

</head>
<body>
	<h1>Combobox</h1>
<p>Combined <code>span</code> &amp; <code>button</code> elements provide the accessible name for the <code>listbox</code> &amp; the selected item within the <code>listbox</code>. The <code>listbox</code> is an un-ordered list with each list item having <code>role="option"</code>.</p>

<p>Design pattern adpated from: <a href="https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html">collapsible listbox example</a></p>
	
	<div tabindex="-1" id="container-for-labels">
	<span id="listbox-static-label">Solute</span>
	  <button id="listbox-option-dynamic-label" tabindex="0" aria-haspopup="listbox" aria-labelledby="listbox-static-label listbox-option-dynamic-label">Drink Mix</button>
	</div>
	<ul role="listbox" tabindex="0" id="listbox" aria-activedescendant="option-1" aria-labelledby="listbox-static-label" style="list-style:none;">
	  <li role="option" id="option-1" class="selected" aria-selected="true">Drink mix</li>
	  <li role="option" id="option-2">Cobalt (II) nitrate</li>
	  <li role="option" id="option-3">Cobalt Chloride</li>
	  <li role="option" id="option-4">Potassium dichromate</li>
	  <li role="option" id="option-5">Gold (III) chloride</li>
	  <li role="option" id="option-6">Potassium chromate</li>
	  <li role="option" id="option-7">Nickel (II) chloride</li>
	  <li role="option" id="option-8">Copper sulfate</li>
	  <li role="option" id="option-9">Potassium permanganate</li>
	  <li role="option" id="option-10">Potassium dichromate</li>
	</ul>
	
</body>
<!-- JavaScript -->
  
</html>		