apex4x
Version:
The Comprehensive ARIA Development Suite
381 lines (378 loc) • 15.8 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
ARIA Comboboxes (Native Inputs, Editable with Word Match) - Apex 4X
Technical Style Guide
</title>
<meta name="description" content="Scalable ARIA Components" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
type="text/css"
href="../../_common/css/components-style.css"
/>
<link rel="stylesheet" type="text/css" href="css/combobox.css" />
<script src="/4X/4X.js"></script>
<script src="js/setup.js"></script>
</head>
<body>
<div class="bypass">
<ul class="list-unstyled">
<li>
<a
class="skip--link"
href="javascript:void(0);"
onclick="document.getElementById('main').focus();"
>
Skip to Main Content
</a>
</li>
</ul>
</div>
<div class="outer-wrapper">
<header class="header flex-container">
<div class="logo flex-item">
<a href="https://whatsock.com">
<img
alt="WhatSock : Changing the world one step at a time"
src="../../_common/img/whatsock.svg"
/></a>
</div>
<div class="site-name flex-item">
<strong>Apex 4X</strong> Technical Style Guide
</div>
</header>
<div class="wrapper">
<div class="left-aside">
<nav>
<p>
<a href="/Tutorials/Beginner-Introduction.htm"
>Beginner Tutorial</a
>
</p>
<h2>Template Examples</h2>
<ul>
<li><a href="../../index.htm">Back to Components</a></li>
<li><a href="../index.htm">Back to Parent Widget</a></li>
<li>
<a
href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
>Native Inputs, Editable and Readonly</a
>
</li>
<li>
<a
href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
>Native Inputs, Editable with Substring Match</a
>
</li>
<li>
<a href="index.htm" aria-current="page"
>Native Inputs, Editable with Word Match</a
>
</li>
<li>
<a
href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm"
>Native Inputs, Multiselect Editable with Substring Match</a
>
</li>
<li>
<a href="../Simulated,%20Readonly/index.htm"
>Simulated, Readonly</a
>
</li>
<li>
<a href="../Simulated,%20Readonly%20Multiselect/index.htm"
>Simulated, Readonly Multiselect</a
>
</li>
</ul>
</nav>
</div>
<main id="main" class="main" tabindex="-1">
<div class="demo-block flex-container">
<div class="component flex-item">
<h1 class="pageTitle">
ARIA Combobox
<small>(Native Inputs, Editable with Word Match)</small>
</h1>
<div class="form--container wordmatch">
<form method="post" action="#">
<fieldset>
<legend>Search for hardware devices</legend>
<p class="select--container--wordmatch">
<label for="hardwareEdit">Hardware</label>
<input
type="text"
name="hardware"
id="hardwareEdit"
class="aria-combobox"
/>
</p>
<p>
<input type="submit" id="hardwareBtn" value="Submit" />
</p>
<p id="autoSuggest">
<!--
Suggested items will be inserted here as a static container.
-->
</p>
</fieldset>
</form>
</div>
<div class="note">
<p>
The Hardware field is an editable ARIA Combobox widget that
uses a native Input element.
<br />
Word matches are used to render suggestions.
<br />
Type "modem", "printer", "video card", or other strings to
match.
</p>
</div>
</div>
<div class="keyboard flex-item">
<h2>
The native input combobox is optimized for screen reader and
keyboard only users:
</h2>
<ul>
<li>
Set focus to the State or Country fields to open the combobox
control.
</li>
<li>
Within a combobox that is not readonly, first type into the
field, then press the <kbd class="down">Down</kbd> arrow to
navigate into the dropdown and use the
<kbd class="up">Up</kbd> and
<kbd class="down">Down</kbd> arrow keys to navigate available
options.
</li>
<li>
Press any other letter or number, or the
<kbd class="left">Left</kbd> or
<kbd class="right">Right</kbd> arrow keys to then move focus
back into the Input for editing.
</li>
<li>
Within a combobox that is readonly, press the
<kbd class="down">Down</kbd> arrow or click the trigger icon
to open the dropdown.
</li>
<li>
Press any letter or number within a readonly field to jump to
an option starting with that character or digit.
</li>
<li>
Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to
close the dropdown and save the selection.
</li>
<li>
To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or
<kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.
</li>
<li>
Sighted mouse users can click the desired option to save the
selection and close the dropdown.
</li>
</ul>
</div>
</div>
</main>
</div>
<footer class="footer">
<div class="flex-container-row">
<div class="flex-item">
<h2>License</h2>
<p>
Apex 4X including all template design patterns is distributed
under the terms of the Open Source Initiative OSI - MIT License,
and may be freely used for any purpose within any web technology.
</p>
</div>
<div class="flex-item">
<h2>Resources</h2>
<ul>
<li>
<a target="ext" href="https://github.com/WhatSock/apex"
>Apex 4X on GitHub</a
>
</li>
<li>
<a
target="ext"
href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
>Visual ARIA Bookmarklet</a
>
</li>
<li>
<a
target="ext"
href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
>Visual ARIA Chrome Extension</a
>
</li>
<li>
<a
target="ext"
href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
>Visual ARIA Firefox Extension</a
>
</li>
<li>
<a target="ext" href="https://github.com/AccDC/visual-aria"
>Visual ARIA on GitHub</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/matrices/"
>ARIA Role Conformance Matrices</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/"
>Accessibility Tree Training Guide</a
>
</li>
</ul>
</div>
<div class="flex-item">
<h2>Acknowledgements</h2>
<ul class="list--horizontal">
<li>
Author and developer:
<a target="ext" href="https://www.linkedin.com/in/bgaraventa"
>Bryan Garaventa</a
>
</li>
<li>
Website designer:
<a target="ext" href="https://gericci.me/">Angela Ricci</a>
</li>
<li>
Style and markup editor:
<a
target="ext"
href="https://www.linkedin.com/in/laurence-lewis-77520365/"
>Laurence Lewis</a
>
</li>
</ul>
</div>
</div>
</footer>
</div>
<select name="hardware-select" id="devicesId" style="display: none">
<option value="ATI video card">ATI video card</option>
<option value="Alliance Promotion video cards">
Alliance Promotion video cards
</option>
<option value="Aztech CD drives">Aztech CD drives</option>
<option value="Boca modem">Boca modem</option>
<option value="Boca video card">Boca video card</option>
<option value="BTC CD Drives">BTC CD Drives</option>
<option value="Canon printer">Canon printer</option>
<option value="Chips video card">Chips video card</option>
<option value="Cirrus Logic video card">Cirrus Logic video card</option>
<option value="Citizen printer">Citizen printer</option>
<option value="Creative CD Drives">Creative CD Drives</option>
<option value="Creative modem">Creative modem</option>
<option value="Creative sound card">Creative sound card</option>
<option value="COM port">COM port</option>
<option value="Conner hard drive">Conner hard drive</option>
<option value="Diamond video card">Diamond video card</option>
<option value="Dip switches">Dip switches</option>
<option value="Epson printer">Epson printer</option>
<option value="Epson scanner">Epson scanner</option>
<option value="Floppy drive">Floppy drive</option>
<option value="Fujitsu hard drive">Fujitsu hard drive</option>
<option value="Funai CD Drives">Funai CD Drives</option>
<option value="Goldstar CD Drives">Goldstar CD Drives</option>
<option value="Hard drive">Hard drive</option>
<option value="Heat sink">Heat sink</option>
<option value="Hercules video card">Hercules video card</option>
<option value="Hewlett Packard CD-ROM">Hewlett Packard CD-ROM</option>
<option value="Hewlett Packard Printer">Hewlett Packard Printer</option>
<option value="Hewlett Packard scanner">Hewlett Packard scanner</option>
<option value="Infrared port">Infrared port</option>
<option value="Intel OverDrive processor">
Intel OverDrive processor
</option>
<option value="Intel Pentium processor">Intel Pentium processor</option>
<option value="IntelliMouse">IntelliMouse</option>
<option value="Iomega Jaz drive">Iomega Jaz drive</option>
<option value="Jaz drive">Jaz drive</option>
<option value="Lexmark printer">Lexmark printer</option>
<option value="LG Electronics CD drives">LG Electronics CD drives</option>
<option value="LITE-ON CD drives">LITE-ON CD drives</option>
<option value="Matrox video card">Matrox video card</option>
<option value="Maxtor hard drive">Maxtor hard drive</option>
<option value="Mitsumi CD drives">Mitsumi CD drives</option>
<option value="Mustek scanner">Mustek scanner</option>
<option value="NEC CD-ROM">NEC CD-ROM</option>
<option value="NEC floppy drive">NEC floppy drive</option>
<option value="NEC hard drive">NEC hard drive</option>
<option value="NEC monitor">NEC monitor</option>
<option value="NEC printers">NEC printers</option>
<option value="Network card">Network card</option>
<option value="NICad batteries">NICad batteries</option>
<option value="NiMH batteries">NiMH batteries</option>
<option value="Number Nine video card">Number Nine video card</option>
<option value="Oak Technologies video card">
Oak Technologies video card
</option>
<option value="Okidata printer">Okidata printer</option>
<option value="Packard Bell drawer scanner">
Packard Bell drawer scanner
</option>
<option value="Packard Bell printer">Packard Bell printer</option>
<option value="Packard Bell sound card">Packard Bell sound card</option>
<option value="Paradise video card">Paradise video card</option>
<option value="Parallel port">Parallel port</option>
<option value="Palm Pilot">Palm Pilot</option>
<option value="Panasonic CD drives">Panasonic CD drives</option>
<option value="Panasonic printers">Panasonic printers</option>
<option value="PCMCIA and PC Card">PCMCIA and PC Card</option>
<option value="Pioneer CD drives">Pioneer CD drives</option>
<option value="Plextor CD drives">Plextor CD drives</option>
<option value="Power supply">Power supply</option>
<option value="Power management">Power management</option>
<option value="Quantum hard drive">Quantum hard drive</option>
<option value="Riser board">Riser board</option>
<option value="S3 video card">S3 video card</option>
<option value="Serial port">Serial port</option>
<option value="SIS video card">SIS video card</option>
<option value="Sony CD-ROM">Sony CD-ROM</option>
<option value="Star printer">Star printer</option>
<option value="Surge suppressor">Surge suppressor</option>
<option value="Tandy printer">Tandy printer</option>
<option value="Tape drive">Tape drive</option>
<option value="Tektronix printers">Tektronix printers</option>
<option value="Texas Instruments printers">
Texas Instruments printers
</option>
<option value="Top drawer scanner">Top drawer scanner</option>
<option value="Toshiba CD-ROM">Toshiba CD-ROM</option>
<option value="Toshiba printers">Toshiba printers</option>
<option value="Video card">Video card</option>
<option value="Western digital hard drive">
Western digital hard drive
</option>
<option value="Western digital video card">
Western digital video card
</option>
<option value="Worm drive">Worm drive</option>
<option value="Xircom network cards">Xircom network cards</option>
<option value="Zip drive">Zip drive</option>
</select>
</body>
<script
async
src="https://api.whatsock.com/accdc-updates.js?4x=template"
></script>
</html>