nfreear/listbox-group.test.html

## listbox-group.test.html
<!doctype html> <title> listbox-group test </title>

<meta charset="utf-8">
<style>
  body {
    line-height: 1.5;
    margin: 1rem auto;
    max-width: 30rem;
  }

  * {
    outline-offset: .2rem;
  }

  label,
  button,
  input {
    display: block;
  }

  button,
  input,
  td {
    padding: .2rem 2rem;
  }

  .visuallyHidden {
    background-color: #eee;
    border: 1px dotted gray;
    color: teal;
    padding: 0 .5rem;
  }

  [ role = grid ],
  [ role = listbox ] {
    border: 1px solid #bbb;
  }

  ul,
  [ role = group ] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  [ role = option ] {
    padding: .2rem 2rem;
  }

  [ role = presentation ] {
    background: #ddd;
    padding: .2rem;
  }
</style>

<h1> listbox-group test </h1>
<p> Note: navigate the listboxes using the Left/Right arrows, not Up/Down. </p>

<!--
<my-keyboard-control
  aria-label="Test A"
  Z-data-role="listbox"
  X-grid-selector = "[ role = listbox ]"
  X-cell-selector = "[ role = option ]" >
-->
<my-keyboard-control aria-label="Test A">
  <h2> Test A </h2>

<label id="ex">Filter by</label>
<button id="currentOption" aria-expanded="true" aria-labelledby="ex currentOption">Assigned to me</button>

<label id="int">Select a team member</label>
<input aria-labelledby="ex int" type="search" role="combobox"
  aria-activedescendant="01" aria-autocomplete="list"
  aria-controls="results" value="Assigned to me">

<ul id="results" role="listbox" aria-label="Select a team member">
  <li id="01" role="option" aria-selected="true" tabindex="0">Assigned to me <span class="visuallyHidden">Current default</span></li>
  <li id="02" role="option">Whole team</li>
  <li>
    <span id="group1">Assigned to …</span>
    <ul role="group" aria-labelledby="group1">
      <li id="03" role="option">Jo Bloggs</li>
      <li id="04" role="option">John Doe</li>
    </ul>
  </li>
  <li> …
</ul>

</my-keyboard-control>


<hr>


<my-keyboard-control aria-label="Test B" data-role="listbox">
  <h2> Test B </h2>

<div id="results" role="listbox" aria-label="Select a team member">
  <ul role="group" aria-labelledby="group1">
    <li id="group1" role="presentation">Assigned to …</li>
    <li id="01" role="option" aria-selected="true" tabindex="0">Me <span class="visuallyHidden">Current default</span></li>
    <li id="02" role="option">Whole team</li>
  </ul>
  <ul role="group" aria-labelledby="group2">
    <li id="group2" role="presentation">Assigned to individual …</li>
    <li id="04" role="option">Jo Bloggs</li>
    <li id="05" role="option">John Doe</li>
  </ul>
</div>

</my-keyboard-control>


<hr>


<my-keyboard-control >
  <h2> Test C — Grid </h2>

  <table role="grid">
    <tr> <td tabindex="0"> A </td> <td> B </td> </tr>
    <tr> <td> C </td> <td> D </td> </tr>
  </table>

</my-keyboard-control>


<!--<script type="module" src="../index.js"></script> -->

<script type="module">
  import customImport from 'https://nfreear.github.io/elements/custom.js';

  await customImport('my-keyboard-control');
</script>


<pre>


NDF, 11-Jan-2023.

* https://codepen.io/nfreear/pen/bGjWjmB

</pre>
	<!doctype html> <title> listbox-group test </title>

	<meta charset="utf-8">
	<style>
	body {
	line-height: 1.5;
	margin: 1rem auto;
	max-width: 30rem;
	}

	* {
	outline-offset: .2rem;
	}

	label,
	button,
	input {
	display: block;
	}

	button,
	input,
	td {
	padding: .2rem 2rem;
	}

	.visuallyHidden {
	background-color: #eee;
	border: 1px dotted gray;
	color: teal;
	padding: 0 .5rem;
	}

	[ role = grid ],
	[ role = listbox ] {
	border: 1px solid #bbb;
	}

	ul,
	[ role = group ] {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	[ role = option ] {
	padding: .2rem 2rem;
	}

	[ role = presentation ] {
	background: #ddd;
	padding: .2rem;
	}
	</style>

	<h1> listbox-group test </h1>
	<p> Note: navigate the listboxes using the Left/Right arrows, not Up/Down. </p>

	<!--
	<my-keyboard-control
	aria-label="Test A"
	Z-data-role="listbox"
	X-grid-selector = "[ role = listbox ]"
	X-cell-selector = "[ role = option ]" >
	-->
	<my-keyboard-control aria-label="Test A">
	<h2> Test A </h2>

	<label id="ex">Filter by</label>
	<button id="currentOption" aria-expanded="true" aria-labelledby="ex currentOption">Assigned to me</button>

	<label id="int">Select a team member</label>
	<input aria-labelledby="ex int" type="search" role="combobox"
	aria-activedescendant="01" aria-autocomplete="list"
	aria-controls="results" value="Assigned to me">

	<ul id="results" role="listbox" aria-label="Select a team member">
	<li id="01" role="option" aria-selected="true" tabindex="0">Assigned to me <span class="visuallyHidden">Current default</span></li>
	<li id="02" role="option">Whole team</li>
	<li>
	<span id="group1">Assigned to …</span>
	<ul role="group" aria-labelledby="group1">
	<li id="03" role="option">Jo Bloggs</li>
	<li id="04" role="option">John Doe</li>
	</ul>
	</li>
	<li> …
	</ul>

	</my-keyboard-control>


	<hr>


	<my-keyboard-control aria-label="Test B" data-role="listbox">
	<h2> Test B </h2>

	<div id="results" role="listbox" aria-label="Select a team member">
	<ul role="group" aria-labelledby="group1">
	<li id="group1" role="presentation">Assigned to …</li>
	<li id="01" role="option" aria-selected="true" tabindex="0">Me <span class="visuallyHidden">Current default</span></li>
	<li id="02" role="option">Whole team</li>
	</ul>
	<ul role="group" aria-labelledby="group2">
	<li id="group2" role="presentation">Assigned to individual …</li>
	<li id="04" role="option">Jo Bloggs</li>
	<li id="05" role="option">John Doe</li>
	</ul>
	</div>

	</my-keyboard-control>


	<hr>


	<my-keyboard-control >
	<h2> Test C — Grid </h2>

	<table role="grid">
	<tr> <td tabindex="0"> A </td> <td> B </td> </tr>
	<tr> <td> C </td> <td> D </td> </tr>
	</table>

	</my-keyboard-control>


	<!--<script type="module" src="../index.js"></script> -->

	<script type="module">
	import customImport from 'https://nfreear.github.io/elements/custom.js';

	await customImport('my-keyboard-control');
	</script>


	<pre>


	NDF, 11-Jan-2023.

	* https://codepen.io/nfreear/pen/bGjWjmB

	</pre>