apex4x
Version:
The Comprehensive ARIA Development Suite
453 lines (450 loc) • 20.8 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
ARIA Comboboxes (Simulated, Readonly) - 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="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm"
>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="index.htm" aria-current="page">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 sim--readonly">
<h1 class="pageTitle">
ARIA Combobox <small>(Simulated, Readonly)</small>
</h1>
<h2>Some random page with a language selector</h2>
<form id="frm" class="clearfix">
<span
title="Choose language"
id="langBtnId"
class="aria-combobox button"
>
<span id="langChild">
<!--
Selected values will be dynamically inserted here.
-->
</span>
<sup></sup>
</span>
<p><button class="btn--set--alert">Test saved value</button></p>
<select name="language" id="languagesId" style="display: none">
<option value="Acholi">Acholi</option>
<option value="Afrikaans">Afrikaans</option>
<option value="Akan">Akan</option>
<option value="Albanian">Albanian</option>
<option value="Amharic">Amharic</option>
<option value="Arabic">Arabic</option>
<option value="Aramaic">Aramaic</option>
<option value="Armenian">Armenian</option>
<option value="Bambara">Bambara</option>
<option value="Bantu">Bantu</option>
<option value="Bari">Bari</option>
<option value="Basque">Basque</option>
<option value="Behdini">Behdini</option>
<option value="Belarusan">Belarusan</option>
<option value="Bemba">Bemba</option>
<option value="Bengali">Bengali</option>
<option value="Berber">Berber</option>
<option value="Bikol">Bikol</option>
<option value="Bosnian">Bosnian</option>
<option value="Bulgarian">Bulgarian</option>
<option value="Cambodian (Khmer)">Cambodian (Khmer)</option>
<option value="Cantonese">Cantonese</option>
<option value="Cape Verdean">Cape Verdean</option>
<option value="Catalan">Catalan</option>
<option value="Cebuano">Cebuano</option>
<option value="Chaldean">Chaldean</option>
<option value="Chamorro">Chamorro</option>
<option value="Chichewa">Chichewa</option>
<option value="Chimwiini">Chimwiini</option>
<option value="Chiu Chow">Chiu Chow</option>
<option value="Chuukese">Chuukese</option>
<option value="Cree">Cree</option>
<option value="Croatian Czech">Croatian Czech</option>
<option value="Danish">Danish</option>
<option value="Dari">Dari</option>
<option value="Dinka">Dinka</option>
<option value="Dula">Dula</option>
<option value="Dutch">Dutch</option>
<option selected value="English">English</option>
<option value="Estonian">Estonian</option>
<option value="Ewe">Ewe</option>
<option value="Fante">Fante</option>
<option value="Farsi">Farsi</option>
<option value="Fiji Hindi">Fiji Hindi</option>
<option value="Finnish">Finnish</option>
<option value="Flemish">Flemish</option>
<option value="Foochow">Foochow</option>
<option value="French">French</option>
<option value="French Creole">French Creole</option>
<option value="Fukienese">Fukienese</option>
<option value="Fulani">Fulani</option>
<option value="Fulfulde">Fulfulde</option>
<option value="Ga">Ga</option>
<option value="Galician">Galician</option>
<option value="Georgian">Georgian</option>
<option value="German">German</option>
<option value="Greek">Greek</option>
<option value="Guarani">Guarani</option>
<option value="Guizhou">Guizhou</option>
<option value="Gujarati">Gujarati</option>
<option value="Haitian Creole">Haitian Creole</option>
<option value="Hakha">Hakha</option>
<option value="Hakka">Hakka</option>
<option value="Hamery">Hamery</option>
<option value="Hausa">Hausa</option>
<option value="Hebrew Hindi">Hebrew Hindi</option>
<option value="Hindko">Hindko</option>
<option value="Hmong">Hmong</option>
<option value="Hokkien">Hokkien</option>
<option value="Huizhou">Huizhou</option>
<option value="Hunanese">Hunanese</option>
<option value="Hungarian">Hungarian</option>
<option value="Ibanag">Ibanag</option>
<option value="Ibo">Ibo</option>
<option value="Icelandic">Icelandic</option>
<option value="Ilocano">Ilocano</option>
<option value="Ilonggo">Ilonggo</option>
<option value="Indonesian">Indonesian</option>
<option value="Inupiaq">Inupiaq</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Javanese">Javanese</option>
<option value="Jola">Jola</option>
<option value="Kachi">Kachi</option>
<option value="Kannada">Kannada</option>
<option value="Karen">Karen</option>
<option value="Karon">Karon</option>
<option value="Kashmiri">Kashmiri</option>
<option value="Kayah">Kayah</option>
<option value="Kazakh">Kazakh</option>
<option value="Kinyarwanda">Kinyarwanda</option>
<option value="Kirghiz">Kirghiz</option>
<option value="Kirundi">Kirundi</option>
<option value="Korean">Korean</option>
<option value="Krahn">Krahn</option>
<option value="Kribati">Kribati</option>
<option value="Kunama">Kunama</option>
<option value="Kurdish">Kurdish</option>
<option value="Kurmanji">Kurmanji</option>
<option value="Lahu">Lahu</option>
<option value="Laotian">Laotian</option>
<option value="Latvian">Latvian</option>
<option value="Liberian">Liberian</option>
<option value="Lingala">Lingala</option>
<option value="Lithuanian">Lithuanian</option>
<option value="Luo">Luo</option>
<option value="Luxembourgeois">Luxembourgeois</option>
<option value="Maay Maay">Maay Maay</option>
<option value="Macedonian">Macedonian</option>
<option value="Maharathi">Maharathi</option>
<option value="Malay">Malay</option>
<option value="Malayalam">Malayalam</option>
<option value="Maltese">Maltese</option>
<option value="Mam">Mam</option>
<option value="Mandarin">Mandarin</option>
<option value="Mandingo">Mandingo</option>
<option value="Maninka">Maninka</option>
<option value="Marathi">Marathi</option>
<option value="Marshallese">Marshallese</option>
<option value="Mien">Mien</option>
<option value="Mina">Mina</option>
<option value="Mixteco">Mixteco</option>
<option value="Moldavian">Moldavian</option>
<option value="Mongolian">Mongolian</option>
<option value="Montenegrin">Montenegrin</option>
<option value="Motlockese">Motlockese</option>
<option value="Myanmar">Myanmar</option>
<option value="Navajo">Navajo</option>
<option value="Neopolitan">Neopolitan</option>
<option value="Nepali">Nepali</option>
<option value="Nigerian Pidgin">Nigerian Pidgin</option>
<option value="Norwegian">Norwegian</option>
<option value="Nuer">Nuer</option>
<option value="Nyanja">Nyanja</option>
<option value="Ojibway">Ojibway</option>
<option value="Oromo">Oromo</option>
<option value="Pampangan">Pampangan</option>
<option value="Pangasinan">Pangasinan</option>
<option value="Papago">Papago</option>
<option value="Papiamento">Papiamento</option>
<option value="Pashto">Pashto</option>
<option value="Patois">Patois</option>
<option value="Pidgin Creole">Pidgin Creole</option>
<option value="Polish">Polish</option>
<option value="Portuguese">Portuguese</option>
<option value="Punjabi">Punjabi</option>
<option value="Quechua">Quechua</option>
<option value="Romanian">Romanian</option>
<option value="Romansch">Romansch</option>
<option value="Russian">Russian</option>
<option value="Samoan">Samoan</option>
<option value="Serahule">Serahule</option>
<option value="Serbian">Serbian</option>
<option value="Serbo Croatian">Serbo Croatian</option>
<option value="Shanghainese">Shanghainese</option>
<option value="Shona">Shona</option>
<option value="Sierra Leone Creole">
Sierra Leone Creole
</option>
<option value="Sindhi">Sindhi</option>
<option value="Sinhalese">Sinhalese</option>
<option value="Slovak">Slovak</option>
<option value="Slovene">Slovene</option>
<option value="Somali">Somali</option>
<option value="Sorani">Sorani</option>
<option value="Sousu">Sousu</option>
<option value="Spanish">Spanish</option>
<option value="Sudanese">Sudanese</option>
<option value="Swahili">Swahili</option>
<option value="Swedish">Swedish</option>
<option value="Tagalog">Tagalog</option>
<option value="Taiwanese">Taiwanese</option>
<option value="Tajik">Tajik</option>
<option value="Tamil">Tamil</option>
<option value="Telegu">Telegu</option>
<option value="Temne">Temne</option>
<option value="Thai">Thai</option>
<option value="Tibetan">Tibetan</option>
<option value="Tigrinya">Tigrinya</option>
<option value="Toishanese">Toishanese</option>
<option value="Tonga">Tonga</option>
<option value="Tongan">Tongan</option>
<option value="Turkish">Turkish</option>
<option value="Twi">Twi</option>
<option value="Tzotzil">Tzotzil</option>
<option value="Ukrainian">Ukrainian</option>
<option value="Urdu">Urdu</option>
<option value="Uyghur">Uyghur</option>
<option value="Uzbek">Uzbek</option>
<option value="Vietnamese">Vietnamese</option>
<option value="Visayan">Visayan</option>
<option value="West African Creole">
West African Creole
</option>
<option value="Wolof">Wolof</option>
<option value="Xhosa">Xhosa</option>
<option value="Yapese">Yapese</option>
<option value="Yemen">Yemen</option>
<option value="Yiddish">Yiddish</option>
<option value="Yoruba">Yoruba</option>
<option value="Yucatecan">Yucatecan</option>
<option value="Yupik">Yupik</option>
<option value="Zulu">Zulu</option>
</select>
</form>
<div class="note">
<p>
The Language field is a readonly ARIA Combobox widget that
uses simulated button markup.
</p>
</div>
</div>
<div class="keyboard flex-item">
<h2>
The simulated combobox is optimized for screen reader and
keyboard only users:
</h2>
<ul>
<li>Click the Language button to open the combobox control.</li>
<li>
Within the combobox, 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 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>
</body>
<script
async
src="https://api.whatsock.com/accdc-updates.js?4x=template"
></script>
</html>