Skip to content

Commit 3f5fbde

Browse files
smhigleysmhigley
committed
second click closes combo, tests added
1 parent a18d777 commit 3f5fbde

10 files changed

+595
-50
lines changed

‎examples/combobox/combobox-select-only.html

+81-11
Original file line numberDiff line numberDiff line change
@@ -71,39 +71,63 @@ <h2 id="kbd_label">Keyboard Support</h2>
7171
Other variations and options for the keyboard interface are described in the
7272
<a href="../../#combobox_kbd_interaction">Keyboard Interaction section of the combobox design pattern.</a>
7373
</p>
74-
<h3 id="kbd_label_textbox">Closed Combobox</h3>
75-
<table aria-labelledby="kbd_label_textbox kbd_label" class="def">
74+
<h3 id="kbd_label_combobox">Closed Combobox</h3>
75+
<table aria-labelledby="kbd_label_combobox kbd_label" class="def">
7676
<thead>
7777
<tr>
7878
<th>Key</th>
7979
<th>Function</th>
8080
</tr>
8181
</thead>
8282
<tbody>
83-
<tr data-test-id="textbox-key-down-arrow">
83+
<tr data-test-id="combobox-key-down-arrow">
8484
<th><kbd>Down Arrow</kbd></th>
8585
<td>
8686
<ul>
87-
<li>First opens the listbox if it is not already displayed and then moves visual focus to the first option.</li>
88-
<li>DOM focus remains on the textbox.</li>
87+
<li>Opens the listbox if it is not already displayed without moving focus or changing selection.</li>
88+
<li>DOM focus remains on the combobox.</li>
8989
</ul>
9090
</td>
9191
</tr>
92-
<tr data-test-id="textbox-key-alt-down-arrow">
92+
<tr data-test-id="combobox-key-alt-down-arrow">
9393
<th><kbd>Alt + Down Arrow</kbd></th>
9494
<td>
9595
Opens the listbox without moving focus or changing selection.
9696
</td>
9797
</tr>
98-
<tr data-test-id="textbox-key-up-arrow">
98+
<tr data-test-id="combobox-key-up-arrow">
9999
<th><kbd>Up Arrow</kbd></th>
100100
<td>
101101
<ul>
102102
<li>First opens the listbox if it is not already displayed and then moves visual focus to the first option.</li>
103-
<li>DOM focus remains on the textbox.</li>
103+
<li>DOM focus remains on the combobox.</li>
104104
</ul>
105105
</td>
106106
</tr>
107+
<tr data-test-id="combobox-key-enter">
108+
<th><kbd>Enter</kbd></th>
109+
<td>
110+
Opens the listbox without moving focus or changing selection.
111+
</td>
112+
</tr>
113+
<tr data-test-id="combobox-key-space">
114+
<th><kbd>Space</kbd></th>
115+
<td>
116+
Opens the listbox without moving focus or changing selection.
117+
</td>
118+
</tr>
119+
<tr data-test-id="combobox-key-home">
120+
<th><kbd>Home</kbd></th>
121+
<td>
122+
Opens the listbox and moves visual focus to the first option.
123+
</td>
124+
</tr>
125+
<tr data-test-id="combobox-key-end">
126+
<th><kbd>End</kbd></th>
127+
<td>
128+
Opens the listbox and moves visual focus to the last option.
129+
</td>
130+
</tr>
107131
<tr data-test-id="standard-single-line-editing-keys">
108132
<th>Printable Characters</th>
109133
<td>
@@ -118,7 +142,7 @@ <h3 id="kbd_label_textbox">Closed Combobox</h3>
118142
</table>
119143
<h3 id="kbd_label_listbox">Listbox Popup</h3>
120144
<p>
121-
<strong>NOTE:</strong> When visual focus is in the listbox, DOM focus remains on the textbox and the value of <code>aria-activedescendant</code> on the textbox is set to a value that refers to the listbox option that is visually indicated as focused.
145+
<strong>NOTE:</strong> When visual focus is in the listbox, DOM focus remains on the combobox and the value of <code>aria-activedescendant</code> on the combobox is set to a value that refers to the listbox option that is visually indicated as focused.
122146
Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
123147
For more information about this focus management technique, see
124148
<a href="../../#kbd_focus_activedescendant">Using aria-activedescendant to Manage Focus.</a>
@@ -141,6 +165,26 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
141165
</ul>
142166
</td>
143167
</tr>
168+
<tr data-test-id="listbox-key-space">
169+
<th><kbd>Space</kbd></th>
170+
<td>
171+
<ul>
172+
<li>Sets the value to the content of the focused option in the listbox.</li>
173+
<li>Closes the listbox.</li>
174+
<li>Sets visual focus on the combobox.</li>
175+
</ul>
176+
</td>
177+
</tr>
178+
<tr data-test-id="listbox-key-tab">
179+
<th><kbd>Tab</kbd></th>
180+
<td>
181+
<ul>
182+
<li>Sets the value to the content of the focused option in the listbox.</li>
183+
<li>Closes the listbox.</li>
184+
<li>Performs the default action, moving focus to the next focusable element.</li>
185+
</ul>
186+
</td>
187+
</tr>
144188
<tr data-test-id="listbox-key-escape">
145189
<th><kbd>Escape</kbd></th>
146190
<td>
@@ -168,6 +212,16 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
168212
</ul>
169213
</td>
170214
</tr>
215+
<tr data-test-id="listbox-key-alt-up-arrow">
216+
<th><kbd>Alt + Up Arrow</kbd></th>
217+
<td>
218+
<ul>
219+
<li>Sets the value to the content of the focused option in the listbox.</li>
220+
<li>Closes the listbox.</li>
221+
<li>Sets visual focus on the combobox.</li>
222+
</ul>
223+
</td>
224+
</tr>
171225
<tr data-test-id="listbox-key-home">
172226
<th><kbd>Home</kbd></th>
173227
<td>Moves visual focus to the first option.</td>
@@ -176,6 +230,14 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
176230
<th><kbd>End</kbd></th>
177231
<td>Moves visual focus to the last option.</td>
178232
</tr>
233+
<tr data-test-id="listbox-key-pageup">
234+
<th><kbd>PageUp</kbd></th>
235+
<td>Jumps visual focus up 10 options (or to first option).</td>
236+
</tr>
237+
<tr data-test-id="listbox-key-pagedown">
238+
<th><kbd>PageDown</kbd></th>
239+
<td>Jumps visual focus down 10 options (or to last option).</td>
240+
</tr>
179241
<tr data-test-id="listbox-key-char">
180242
<th>Printable Characters</th>
181243
<td>
@@ -197,8 +259,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
197259
Information about other ways of applying ARIA roles, states, and properties is available in the
198260
<a href="../../#combobox_roles_states_props">Roles, States, and Properties section of the combobox design pattern.</a>
199261
</p>
200-
<h3 id="rps_label_textbox">Combobox</h3>
201-
<table aria-labelledby="rps_label_textbox rps_label" class="data attributes">
262+
<h3 id="rps_label_combobox">Combobox</h3>
263+
<table aria-labelledby="rps_label_combobox rps_label" class="data attributes">
202264
<thead>
203265
<tr>
204266
<th scope="col">Role</th>
@@ -216,6 +278,14 @@ <h3 id="rps_label_textbox">Combobox</h3>
216278
<td><code>div</code></td>
217279
<td>Identifies the input as a combobox.</td>
218280
</tr>
281+
<tr data-test-id="combobox-aria-labelledby">
282+
<td></td>
283+
<th scope="row">
284+
<code>aria-labelledby="#IDREF"</code>
285+
</th>
286+
<td><code>div</code></td>
287+
<td>Identifies the element that labels the combobox.</td>
288+
</tr>
219289
<tr data-test-id="combobox-aria-controls">
220290
<td></td>
221291
<th scope="row">

‎examples/combobox/js/select-only.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ Select.prototype.init = function() {
174174

175175
// add event listeners
176176
this.comboEl.addEventListener('blur', this.onComboBlur.bind(this));
177-
this.comboEl.addEventListener('click', () => this.updateMenuState(true));
177+
this.comboEl.addEventListener('click', this.onComboClick.bind(this));
178178
this.comboEl.addEventListener('keydown', this.onComboKeyDown.bind(this));
179179

180180
// create options
@@ -231,6 +231,10 @@ Select.prototype.onComboBlur = function() {
231231
}
232232
}
233233

234+
Select.prototype.onComboClick = function() {
235+
this.updateMenuState(!this.open, false);
236+
}
237+
234238
Select.prototype.onComboKeyDown = function(event) {
235239
const { key } = event;
236240
const max = this.options.length - 1;
@@ -356,6 +360,6 @@ window.addEventListener('load', function () {
356360
const selectEls = document.querySelectorAll('.js-select');
357361

358362
selectEls.forEach((el) => {
359-
const selectComponent = new Select(el, options);
363+
new Select(el, options);
360364
});
361365
});

0 commit comments

Comments
 (0)