Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create updated tests for APG design pattern example: Editable Combobox With Both List and Inline Autocomplete #702

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Create updated tests for APG design pattern example: Editable Combobox With Both List and Inline Autocomplete #702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3bfb513
update timestamped example directory and references.csv
IsaDC Apr 26, 2022
cd7b101
Example: remove unneeded CSS/JS references and update page title
IsaDC Apr 26, 2022
2c5ebf1
Example: remove 'Related Links' nav and similar example links, as wel…
IsaDC Apr 26, 2022
8770944
Remove previous APG example
IsaDC Apr 26, 2022
5523770
Generate .html source files with scripts automatically
IsaDC Apr 26, 2022
2c535df
Fix css and js
IsaDC Apr 26, 2022
6216961
Restore JS file to original
IsaDC Apr 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions tests/combobox-autocomplete-both-updated/data/references.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
refId,value
author,James Scholes
authorEmail,[email protected]
title,Combobox with Both List and Inline Autocomplete Example
reference,reference/2020-12-11_16649/combobox-autocomplete-both.html
title,Combobox with Both List and Inline Autocomplete
reference,reference/2022-4-26_132729/combobox-autocomplete-both.html
designPattern,https://w3c.github.io/aria-practices/#combobox
example,https://w3c.github.io/aria-practices/examples/combobox/combobox-autocomplete-both.html
combobox,https://w3c.github.io/aria/#combobox
Expand Down
114 changes: 0 additions & 114 deletions ...mbobox-autocomplete-both-updated/reference/2020-12-11_16649/css/combobox-autocomplete.css
View file
Open in desktop

This file was deleted.

222 changes: 111 additions & 111 deletions ...-11_16649/combobox-autocomplete-both.html → ...26_132729/combobox-autocomplete-both.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,111 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Editable Combobox With Both List and Inline Autocomplete Example</title>

<!-- js and css for this example. -->
<link rel="stylesheet" href="css/combobox-autocomplete.css">
<script type="text/javascript" src="js/combobox-autocomplete.js"></script>
</head>
<body>
<main>
<h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
<p>
The below combobox for choosing the name of a US state or territory demonstrates the
<a href="https://w3c.github.io/aria-practices/#combobox">design pattern for combobox.</a>
The design pattern describes four types of autocomplete behavior.
This example illustrates the autocomplete behavior referred to in the pattern as list with inline completion.
If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories,
a listbox popup appears containing the matching names, and the first match is automatically selected.
In addition, the portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the textbox.
The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.
Note that this implementation enables users to input the name of a state or territory, but it does not prevent input of any other arbitrary value.
</p>
<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
<div id="ex1">
<label for="cb1-input">State</label>
<div class="combobox combobox-list">
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
aria-expanded="false" aria-controls="cb1-listbox">
<button type="button" id="cb1-button" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon class="outline" points="1,4 17,4 9,15"></polygon>
<polygon class="arrow" points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="cb1-listbox" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
<li id="lb1-ak" role="option">Alaska</li>
<li id="lb1-as" role="option">American Samoa</li>
<li id="lb1-az" role="option">Arizona</li>
<li id="lb1-ar" role="option">Arkansas</li>
<li id="lb1-ca" role="option">California</li>
<li id="lb1-co" role="option">Colorado</li>
<li id="lb1-ct" role="option">Connecticut</li>
<li id="lb1-de" role="option">Delaware</li>
<li id="lb1-dc" role="option">District of Columbia</li>
<li id="lb1-fl" role="option">Florida</li>
<li id="lb1-ga" role="option">Georgia</li>
<li id="lb1-gm" role="option">Guam</li>
<li id="lb1-hi" role="option">Hawaii</li>
<li id="lb1-id" role="option">Idaho</li>
<li id="lb1-il" role="option">Illinois</li>
<li id="lb1-in" role="option">Indiana</li>
<li id="lb1-ia" role="option">Iowa</li>
<li id="lb1-ks" role="option">Kansas</li>
<li id="lb1-ky" role="option">Kentucky</li>
<li id="lb1-la" role="option">Louisiana</li>
<li id="lb1-me" role="option">Maine</li>
<li id="lb1-md" role="option">Maryland</li>
<li id="lb1-ma" role="option">Massachusetts</li>
<li id="lb1-mi" role="option">Michigan</li>
<li id="lb1-mn" role="option">Minnesota</li>
<li id="lb1-ms" role="option">Mississippi</li>
<li id="lb1-mo" role="option">Missouri</li>
<li id="lb1-mt" role="option">Montana</li>
<li id="lb1-ne" role="option">Nebraska</li>
<li id="lb1-nv" role="option">Nevada</li>
<li id="lb1-nh" role="option">New Hampshire</li>
<li id="lb1-nj" role="option">New Jersey</li>
<li id="lb1-nm" role="option">New Mexico</li>
<li id="lb1-ny" role="option">New York</li>
<li id="lb1-nc" role="option">North Carolina</li>
<li id="lb1-nd" role="option">North Dakota</li>
<li id="lb1-mp" role="option">Northern Marianas Islands</li>
<li id="lb1-oh" role="option">Ohio</li>
<li id="lb1-ok" role="option">Oklahoma</li>
<li id="lb1-or" role="option">Oregon</li>
<li id="lb1-pa" role="option">Pennsylvania</li>
<li id="lb1-pr" role="option">Puerto Rico</li>
<li id="lb1-ri" role="option">Rhode Island</li>
<li id="lb1-sc" role="option">South Carolina</li>
<li id="lb1-sd" role="option">South Dakota</li>
<li id="lb1-tn" role="option">Tennessee</li>
<li id="lb1-tx" role="option">Texas</li>
<li id="lb1-ut" role="option">Utah</li>
<li id="lb1-ve" role="option">Vermont</li>
<li id="lb1-va" role="option">Virginia</li>
<li id="lb1-vi" role="option">Virgin Islands</li>
<li id="lb1-wa" role="option">Washington</li>
<li id="lb1-wv" role="option">West Virginia</li>
<li id="lb1-wi" role="option">Wisconsin</li>
<li id="lb1-wy" role="option">Wyoming</li>
</ul>
</div>
</div>
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Editable Combobox With Both List and Inline Autocomplete Example</title>
<!-- js and css for this example. -->
<link rel="stylesheet" href="css/combobox-autocomplete.css">
<script type="text/javascript" src="js/combobox-autocomplete.js"></script>
</head>
<body>
<main>
<h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
<p>
The below combobox for choosing the name of a US state or territory demonstrates the
<a href="https://w3c.github.io/aria-practices/#combobox">design pattern for combobox.</a>
The design pattern describes four types of autocomplete behavior.
This example illustrates the autocomplete behavior referred to in the pattern as list with inline completion.
If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories,
a listbox popup appears containing the matching names, and the first match is automatically selected.
In addition, the portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the textbox.
The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.
Note that this implementation enables users to input the name of a state or territory, but it does not prevent input of any other arbitrary value.
</p>
<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
<div id="ex1">
<label for="cb1-input">State</label>
<div class="combobox combobox-list">
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
aria-expanded="false" aria-controls="cb1-listbox">
<button type="button" id="cb1-button" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon class="outline" points="1,4 17,4 9,15"></polygon>
<polygon class="arrow" points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="cb1-listbox" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
<li id="lb1-ak" role="option">Alaska</li>
<li id="lb1-as" role="option">American Samoa</li>
<li id="lb1-az" role="option">Arizona</li>
<li id="lb1-ar" role="option">Arkansas</li>
<li id="lb1-ca" role="option">California</li>
<li id="lb1-co" role="option">Colorado</li>
<li id="lb1-ct" role="option">Connecticut</li>
<li id="lb1-de" role="option">Delaware</li>
<li id="lb1-dc" role="option">District of Columbia</li>
<li id="lb1-fl" role="option">Florida</li>
<li id="lb1-ga" role="option">Georgia</li>
<li id="lb1-gm" role="option">Guam</li>
<li id="lb1-hi" role="option">Hawaii</li>
<li id="lb1-id" role="option">Idaho</li>
<li id="lb1-il" role="option">Illinois</li>
<li id="lb1-in" role="option">Indiana</li>
<li id="lb1-ia" role="option">Iowa</li>
<li id="lb1-ks" role="option">Kansas</li>
<li id="lb1-ky" role="option">Kentucky</li>
<li id="lb1-la" role="option">Louisiana</li>
<li id="lb1-me" role="option">Maine</li>
<li id="lb1-md" role="option">Maryland</li>
<li id="lb1-ma" role="option">Massachusetts</li>
<li id="lb1-mi" role="option">Michigan</li>
<li id="lb1-mn" role="option">Minnesota</li>
<li id="lb1-ms" role="option">Mississippi</li>
<li id="lb1-mo" role="option">Missouri</li>
<li id="lb1-mt" role="option">Montana</li>
<li id="lb1-ne" role="option">Nebraska</li>
<li id="lb1-nv" role="option">Nevada</li>
<li id="lb1-nh" role="option">New Hampshire</li>
<li id="lb1-nj" role="option">New Jersey</li>
<li id="lb1-nm" role="option">New Mexico</li>
<li id="lb1-ny" role="option">New York</li>
<li id="lb1-nc" role="option">North Carolina</li>
<li id="lb1-nd" role="option">North Dakota</li>
<li id="lb1-mp" role="option">Northern Marianas Islands</li>
<li id="lb1-oh" role="option">Ohio</li>
<li id="lb1-ok" role="option">Oklahoma</li>
<li id="lb1-or" role="option">Oregon</li>
<li id="lb1-pa" role="option">Pennsylvania</li>
<li id="lb1-pr" role="option">Puerto Rico</li>
<li id="lb1-ri" role="option">Rhode Island</li>
<li id="lb1-sc" role="option">South Carolina</li>
<li id="lb1-sd" role="option">South Dakota</li>
<li id="lb1-tn" role="option">Tennessee</li>
<li id="lb1-tx" role="option">Texas</li>
<li id="lb1-ut" role="option">Utah</li>
<li id="lb1-ve" role="option">Vermont</li>
<li id="lb1-va" role="option">Virginia</li>
<li id="lb1-vi" role="option">Virgin Islands</li>
<li id="lb1-wa" role="option">Washington</li>
<li id="lb1-wv" role="option">West Virginia</li>
<li id="lb1-wi" role="option">Wisconsin</li>
<li id="lb1-wy" role="option">Wyoming</li>
</ul>
</div>
</div>
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
</main>
</body>
</html>
2 changes: 1 addition & 1 deletion ...complete-both.moveFocusAfterCombobox.html → ...complete-both.moveFocusAfterCombobox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8">
<title>Editable Combobox With Both List and Inline Autocomplete Example</title>

<!-- js and css for this example. -->
Expand Down
2 changes: 1 addition & 1 deletion ...cusAfterComboboxAndSetValueToAlabama.html → ...cusAfterComboboxAndSetValueToAlabama.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8">
<title>Editable Combobox With Both List and Inline Autocomplete Example</title>

<!-- js and css for this example. -->
Expand Down
2 changes: 1 addition & 1 deletion ...omplete-both.moveFocusBeforeCombobox.html → ...omplete-both.moveFocusBeforeCombobox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8">
<title>Editable Combobox With Both List and Inline Autocomplete Example</title>

<!-- js and css for this example. -->
Expand Down
2 changes: 1 addition & 1 deletion ...usBeforeComboboxAndSetValueToAlabama.html → ...usBeforeComboboxAndSetValueToAlabama.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8">
<title>Editable Combobox With Both List and Inline Autocomplete Example</title>

<!-- js and css for this example. -->
Expand Down
2 changes: 1 addition & 1 deletion ...ete-both.moveFocusToAlabamaInListbox.html → ...ete-both.moveFocusToAlabamaInListbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8">
<title>Editable Combobox With Both List and Inline Autocomplete Example</title>

<!-- js and css for this example. -->
Expand Down
Loading