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

Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more #1276

Merged
merged 47 commits into from
Feb 14, 2020
Merged

Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more #1276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
f9f0199
updated combox code to use single prototype
jongund Nov 21, 2019
3663dea
updated escape key behavior
jongund Nov 22, 2019
db05fa5
removed unused files
jongund Nov 22, 2019
7937a03
fixing regression issues for escape key
jongund Nov 22, 2019
d9464c8
updated tests for single and double escape key tests
jongund Nov 22, 2019
903f6d3
fixed focus bug on enter and removed use of keycode property
jongund Nov 29, 2019
60e8955
fixed bug in opening list and improved property names for visual focu…
jongund Dec 2, 2019
2468850
fixed bug in opening list with alt key pressed
jongund Dec 2, 2019
98b0967
fixed bug with enter key not updating aria-expanded
jongund Dec 2, 2019
5235675
fixed bugs in down arrow
jongund Dec 3, 2019
245d30e
added documentation and tests for ALT Down Arrow feature
jongund Dec 3, 2019
565a0c1
fixed some styling bugs
jongund Dec 4, 2019
98f6d55
using only one SVG image to show listbox state
jongund Dec 4, 2019
4b8524f
updated CSS for styling listbox focus
jongund Dec 4, 2019
2abf21c
fixed scrolling issue in listbox
jongund Dec 4, 2019
670bb24
adjusted position of svg image button
jongund Dec 5, 2019
6a41816
fixed onlcik bug not selecting options for list and none options
jongund Jan 21, 2020
f6d6b32
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
jongund Jan 22, 2020
faedb8c
updated combobox test for autocomplete, list and none
jongund Jan 22, 2020
11bdddd
fixed bug with onclick behavior and documented option filtering as us…
jongund Jan 22, 2020
0d352f4
updated documentation abou filtering of options
jongund Jan 22, 2020
8f303a1
Typo: character -> characters
carmacleod Jan 22, 2020
22575ec
Typo: character -> characters
carmacleod Jan 22, 2020
710f769
fixed option filter bug with autocomplete=none
jongund Jan 22, 2020
08150b9
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
jongund Jan 23, 2020
ad47b9d
improved description of when listbox opens
jongund Jan 23, 2020
4a00ac8
use lowercase "the" in sentence
carmacleod Jan 23, 2020
c373245
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
jongund Jan 24, 2020
9bccd49
Minor editorial revision to alt+down in textbox keyboard table
mcking65 Jan 28, 2020
ef94e2f
udpated test file to check for aria-selected on option when listbox o…
jongund Jan 28, 2020
58dd2a0
fixed aria-selected tests
jongund Jan 28, 2020
8edcb40
add tests for aria-selected to key down tests
jongund Jan 28, 2020
8577088
Final fixes for combobox tests
Jan 28, 2020
03ee3f2
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
mcking65 Feb 5, 2020
965a45c
Add aria-hidden=false and focusable=false to svg in button
zcorpan Feb 13, 2020
ad2d9ef
Use fewer descendant combinators in selectors
zcorpan Feb 13, 2020
2125c15
Call function instead of setting a property on elements
zcorpan Feb 13, 2020
511a707
Don't call setValue() when hitting backspace, to avoid moving the cur…
zcorpan Feb 13, 2020
4e42a82
Remove superfluous isPrintableCharacter() call
zcorpan Feb 13, 2020
7554162
Remove unsused variable textContent
zcorpan Feb 13, 2020
9614aff
Declare option outside for loop. Also use null instead of false
zcorpan Feb 13, 2020
28f0ebd
Set scrollTop once
zcorpan Feb 13, 2020
5be02da
Declare index variable in the if block
zcorpan Feb 13, 2020
2a5719e
Move isPrintableCharacter to ComboboxAutocomplete.prototype
zcorpan Feb 13, 2020
baf2bed
Add information about the id attribute for all combobox examples; fix…
zcorpan Feb 13, 2020
ff804c1
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
mcking65 Feb 14, 2020
9066a96
Fixed documentation of escape key for the listbox
mcking65 Feb 14, 2020
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
53 changes: 32 additions & 21 deletions examples/combobox/combobox-autocomplete-both.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@
<script type="text/javascript" src="../js/app.js"></script>

<!-- js and css for this example. -->
<link rel="stylesheet" href="css/combobox.css">
<script type="text/javascript" src="js/combobox-list.js"></script>
<script type="text/javascript" src="js/listbox.js"></script>
<script type="text/javascript" src="js/listboxOption.js"></script>
<link rel="stylesheet" href="css/combobox-autocomplete.css">
<script type="text/javascript" src="js/combobox-autocomplete.js"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand Down Expand Up @@ -54,7 +52,13 @@ <h2 id="ex_label">Example</h2>
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
aria-expanded="false" aria-controls="lb1">
<button type="button" id="cb1-button" aria-label="Open" tabindex="-1">&#9660;</button>
<button type="button" id="cb1-button" aria-label="Open" tabindex="-1">
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="lb1" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
Expand Down Expand Up @@ -145,6 +149,12 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</ul>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<td>
Opens the listbox without moving focus or changing selection.
</td>
</tr>
<tr data-test-id="textbox-key-up-arrow">
<th><kbd>Up Arrow</kbd></th>
<td>
Expand All @@ -168,8 +178,8 @@ <h3 id="kbd_label_textbox">Textbox</h3>
<th><kbd>Escape</kbd></th>
<td>
<ul>
<li>Clears the textbox.</li>
<li>If the listbox is displayed, closes it.</li>
<li>If the listbox is not displayed, clears the textbox.</li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -213,7 +223,6 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<th><kbd>Escape</kbd></th>
<td>
<ul>
<li>Clears the textbox.</li>
<li>Closes the listbox.</li>
<li>Sets visual focus on the textbox.</li>
</ul>
Expand Down Expand Up @@ -261,6 +270,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<ul>
<li>Moves visual focus to the textbox.</li>
<li>Types the character in the textbox.</li>
<li>Options in the listbox are filtered based on characters in the textbox.</li>
spectranaut marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</td>
</tr>
Expand Down Expand Up @@ -326,6 +336,19 @@ <h3 id="rps_label_textbox">Textbox</h3>
<td><code>input[type="text"]</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
<tr data-test-id="combobox-id">
<td></td>
<th scope="row">
<code>id="string"</code>
</th>
<td><code>input[type="text"]</code></td>
<td>
<ul>
<li>Referenced by <code>for</code> attribute of <code>label</code> element to provide an accessible name.</li>
<li>Recommended naming method for HTML input elements because clicking label focuses input.</li>
</ul>
</td>
</tr>
<tr data-test-id="combobox-aria-activedescendant">
<td></td>
<th scope="row">
Expand Down Expand Up @@ -410,23 +433,11 @@ <h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/combobox.css" type="text/css">combobox.css</a>
</li>
<li>
CSS:
<a href="css/listbox.css" type="text/css">listbox.css</a>
</li>
<li>
Javascript:
<a href="js/combobox-list.js" type="text/javascript">combobox-list.js</a>
</li>
<li>
Javascript:
<a href="js/listbox.js" type="text/javascript">listbox.js</a>
<a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
</li>
<li>
Javascript:
<a href="js/listboxOption.js" type="text/javascript">listboxOption.js</a>
<a href="js/combobox-autocomplete.js" type="text/javascript">combobox-autocomplete.js</a>
</li>
</ul>
</section>
Expand Down
56 changes: 34 additions & 22 deletions examples/combobox/combobox-autocomplete-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@
<script src="../js/app.js"></script>

<!-- js and css for this example. -->
<link href="css/combobox.css" rel="stylesheet">
<script src="js/combobox-list.js" type="text/javascript"></script>
<script src="js/listbox.js" type="text/javascript"></script>
<script src="js/listboxOption.js" type="text/javascript"></script>
<link href="css/combobox-autocomplete.css" rel="stylesheet">
<script src="js/combobox-autocomplete.js" type="text/javascript"></script>

</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand Down Expand Up @@ -54,7 +53,13 @@ <h2 id="ex_label">Example</h2>
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="list"
aria-expanded="false" aria-controls="cb1-listbox">
<button id="cb1-button" tabindex="-1" aria-label="Open">&#9660;</button>
<button id="cb1-button" tabindex="-1" aria-label="Open">
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon 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>
Expand Down Expand Up @@ -145,6 +150,12 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</ul>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<td>
Opens the listbox without moving focus or changing selection.
</td>
</tr>
<tr data-test-id="textbox-key-up-arrow">
<th><kbd>Up Arrow</kbd></th>
<td>
Expand All @@ -163,9 +174,9 @@ <h3 id="kbd_label_textbox">Textbox</h3>
<th><kbd>Escape</kbd></th>
<td>
<ul>
<li>Clears the textbox.</li>
<li>If the listbox is displayed, closes it.</li>
</ul>
<li>If the listbox is not displayed, clears the textbox.</li>
</ul>
</td>
</tr>
<tr data-test-id="standard-single-line-editing-keys">
Expand Down Expand Up @@ -208,7 +219,6 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<th><kbd>Escape</kbd></th>
<td>
<ul>
<li>Clears the textbox.</li>
<li>Closes the listbox.</li>
<li>Sets visual focus on the textbox.</li>
</ul>
Expand Down Expand Up @@ -256,6 +266,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<ul>
<li>Moves visual focus to the textbox.</li>
<li>Types the character in the textbox.</li>
<li>Options in the listbox are filtered based on characters in the textbox.</li>
spectranaut marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</td>
</tr>
Expand Down Expand Up @@ -321,6 +332,19 @@ <h3 id="rps_label_textbox">Textbox</h3>
<td><code>input[type="text"]</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
<tr data-test-id="combobox-id">
<td></td>
<th scope="row">
<code>id="string"</code>
</th>
<td><code>input[type="text"]</code></td>
<td>
<ul>
<li>Referenced by <code>for</code> attribute of <code>label</code> element to provide an accessible name.</li>
<li>Recommended naming method for HTML input elements because clicking label focuses input.</li>
</ul>
</td>
</tr>
<tr data-test-id="combobox-aria-activedescendant">
<td></td>
<th scope="row">
Expand Down Expand Up @@ -405,23 +429,11 @@ <h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/combobox.css" type="text/css">combobox.css</a>
</li>
<li>
CSS:
<a href="css/listbox.css" type="text/css">listbox.css</a>
</li>
<li>
Javascript:
<a href="js/combobox-list.js" type="text/javascript">combobox-list.js</a>
</li>
<li>
Javascript:
<a href="js/listbox.js" type="text/javascript">listbox.js</a>
<a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
</li>
<li>
Javascript:
<a href="js/listboxOption.js" type="text/javascript">listboxOption.js</a>
<a href="js/combobox-autocomplete.js" type="text/javascript">combobox-autocomplete.js</a>
</li>
</ul>
</section>
Expand Down
55 changes: 33 additions & 22 deletions examples/combobox/combobox-autocomplete-none.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@
<script src="../js/app.js"></script>

<!-- js and css for this example. -->
<link href="css/combobox.css" rel="stylesheet">
<script src="js/combobox-list.js" type="text/javascript"></script>
<script src="js/listbox.js" type="text/javascript"></script>
<script src="js/listboxOption.js" type="text/javascript"></script>
<link href="css/combobox-autocomplete.css" rel="stylesheet">
<script src="js/combobox-autocomplete.js" type="text/javascript"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand All @@ -34,7 +32,7 @@ <h1>Editable Combobox without Autocomplete Example</h1>
The design pattern describes four types of autocomplete behavior.
This example illustrates the autocomplete behavior known as <q>no autocomplete</q>.
The terms that appear in the listbox popup are not related to the string that is present in the textbox.
In this implementation, The listbox popup is not automatically triggered; it is displayed only when the user opens it.
In this implementation, the listbox popup is not automatically triggered when the textbox receives focus; the list is opened when the user types a character into the textbox or through an explicit open command.
</p>
<p>Similar examples include: </p>
<ul>
Expand All @@ -55,7 +53,13 @@ <h2 id="ex_label">Example</h2>
aria-autocomplete="none"
aria-expanded="false"
aria-controls="cb1-listbox">
<button type="button" id="cb1-button" tabindex="-1" aria-label="Open">&#9660;</button>
<button type="button" id="cb1-button" tabindex="-1" aria-label="Open">
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="cb1-listbox" role="listbox" aria-label="Previous Searches">
<li id="lb1-01" role="option">weather</li>
Expand Down Expand Up @@ -100,6 +104,12 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</ul>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<td>
Opens the listbox without moving focus or changing selection.
</td>
</tr>
<tr data-test-id="textbox-key-up-arrow">
<th><kbd>Up Arrow</kbd></th>
<td>
Expand Down Expand Up @@ -158,10 +168,9 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<th><kbd>Escape</kbd></th>
<td>
<ul>
<li>Clears the textbox.</li>
<li>Closes the listbox.</li>
<li>Sets visual focus on the textbox.</li>
</ul>
</ul>
</td>
</tr>
<tr data-test-id="listbox-key-down-arrow">
Expand Down Expand Up @@ -206,6 +215,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<ul>
<li>Moves visual focus to the textbox.</li>
<li>Types the character in the textbox.</li>
<li>Options in the listbox are <em>not</em> filtered based on the characters in the textbox.</li>
spectranaut marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</td>
</tr>
Expand Down Expand Up @@ -271,6 +281,19 @@ <h3 id="rps_label_textbox">Textbox</h3>
<td><code>input[type="text"]</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
<tr data-test-id="combobox-id">
<td></td>
<th scope="row">
<code>id="string"</code>
</th>
<td><code>input[type="text"]</code></td>
<td>
<ul>
<li>Referenced by <code>for</code> attribute of <code>label</code> element to provide an accessible name.</li>
<li>Recommended naming method for HTML input elements because clicking label focuses input.</li>
</ul>
</td>
</tr>
<tr data-test-id="combobox-aria-activedescendant">
<td></td>
<th scope="row">
Expand Down Expand Up @@ -355,23 +378,11 @@ <h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/combobox.css" type="text/css">combobox.css</a>
</li>
<li>
CSS:
<a href="css/listbox.css" type="text/css">listbox.css</a>
</li>
<li>
Javascript:
<a href="js/combobox-list.js" type="text/javascript">combobox-list.js</a>
</li>
<li>
Javascript:
<a href="js/listbox.js" type="text/javascript">listbox.js</a>
<a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
</li>
<li>
Javascript:
<a href="js/listboxOption.js" type="text/javascript">listboxOption.js</a>
<a href="js/combobox-autocomplete.js" type="text/javascript">combobox-autocomplete.js</a>
</li>
</ul>
</section>
Expand Down
Loading