Skip to content

Commit

Permalink
Combobox Examples with listbox popup: Fix Escape behavior, mouse inte…
Browse files Browse the repository at this point in the history 
…raction, visual design, and more (pull #1276)

Fixes #785, #982, #983, #988, #1261, #1265, and #1268 with the following changes:
* updated JavaScript to use single prototype
* updated escape key behavior
* removed unused files
* fixed regression issues for escape key
* updated tests for single and double escape key tests
* fixed focus bug on enter and removed use of keycode property
* fixed bug in opening list and improved property names for visual focus flags
* fixed bug in opening list with alt key pressed
* fixed bug with enter key not updating aria-expanded
* fixed bugs with down arrow
* added documentation and tests for ALT Down Arrow
* fixed some styling bugs
* Use only one SVG image to show listbox state
* updated CSS for styling listbox focus
* fixed scrolling issue in listbox
* adjusted position of svg image button
* fixed onclik bug where not selecting options when autocomplete is list or none
* updated test for autocomplete, list and none
* fixed bug with onclick behavior and documented option filtering as users type
* updated documentation about filtering of options
* Typo: character -> characters
* fixed option filter bug with autocomplete=none
* improved description of when listbox opens
* use lowercase "the" in sentence
* Minor editorial revision to alt+down in textbox keyboard table
* udpated test file to check for aria-selected on option when listbox opens
* fixed aria-selected tests
* add tests for aria-selected to key down tests
* Add aria-hidden=false and focusable=false to svg in button
* Use fewer descendant combinators in selectors
* Call function instead of setting a property on elements
* Don't call setValue() when hitting backspace, to avoid moving the cursor to the end
* Remove superfluous isPrintableCharacter() call
* Remove unused variable textContent
* Declare option outside for loop. Also use null instead of false
* Set scrollTop once
* Declare index variable in the if block
* Move isPrintableCharacter to ComboboxAutocomplete.prototype
* Add information about the id attribute for all combobox examples; fixes #785

Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Co-authored-by: Matt King <a11yThinker@Gmail.com>
Co-authored-by: Valerie Young <spectranaut@gmail.com>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
  • Loading branch information
@jongund @carmacleod
@mcking65 @spectranaut @zcorpan
5 people authored Feb 14, 2020
1 parent a2a9d6d commit 85085b2
Show file tree
Hide file tree
Showing 11 changed files with 893 additions and 787 deletions.
53 changes: 32 additions & 21 deletions examples/combobox/combobox-autocomplete-both.html
View file
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>
</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
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>
</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
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>
</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

0 comments on commit 85085b2

Please sign in to comment.