Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 47fd12b

Browse files
smhigleysmhigley
committedJun 1, 2020
add links to select-only combo and listbox label
1 parent 5cc70aa commit 47fd12b

8 files changed

+27
-7
lines changed
 

‎aria-practices.html

+1
Original file line numberDiff line numberDiff line change
@@ -790,6 +790,7 @@ <h3>Combobox</h3>
790790
<section class="notoc">
791791
<h4>Examples</h4>
792792
<ul>
793+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
793794
<li><a href="examples/combobox/combobox-autocomplete-both.html">Editable Combobox with Both List and Inline Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with inline autocomplete</q>.</li>
794795
<li><a href="examples/combobox/combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
795796
<li><a href="examples/combobox/combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>

‎examples/combobox/combobox-autocomplete-both.html

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
3939
</p>
4040
<p>Similar examples include:</p>
4141
<ul>
42+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
4243
<li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
4344
<li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
4445
<li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>

‎examples/combobox/combobox-autocomplete-list.html

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ <h1>Editable Combobox With List Autocomplete Example</h1>
3939
</p>
4040
<p>Similar examples include:</p>
4141
<ul>
42+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
4243
<li><a href="combobox-autocomplete-both.html">Editable Combobox with Both List and Inline Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with inline autocomplete</q>.</li>
4344
<li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
4445
<li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>

‎examples/combobox/combobox-autocomplete-none.html

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ <h1>Editable Combobox without Autocomplete Example</h1>
3636
</p>
3737
<p>Similar examples include: </p>
3838
<ul>
39+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
3940
<li><a href="combobox-autocomplete-both.html">Editable Combobox with Both List and Inline Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with inline autocomplete</q>.</li>
4041
<li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
4142
<li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h2 id="ex_label">Example</h2>
5656
tabindex="0"
5757
>
5858
</div>
59-
<div class="combo-menu" role="listbox" id="listbox1">
59+
<div class="combo-menu" role="listbox" id="listbox1" aria-labelledby="combo1-label">
6060
<!-- options are inserted here -->
6161
<!-- e.g. <div role="option" id="op1">option text</div> -->
6262
</div>

‎examples/combobox/grid-combo.html

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ <h1>Editable Combobox with Grid Popup Example</h1>
4444
</p>
4545
<p>Similar examples include: </p>
4646
<ul>
47+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
4748
<li><a href="combobox-autocomplete-both.html">Editable Combobox with Both List and Inline Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with inline autocomplete</q>.</li>
4849
<li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
4950
<li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>

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

+2-5
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,10 @@ function getActionFromKey(event, menuOpen) {
4242

4343
// handle keys when open
4444
if (menuOpen) {
45-
if (key === 'ArrowUp' && event.altKey) {
45+
if (key === 'ArrowUp' && altKey) {
4646
return SelectActions.CloseSelect;
4747
}
48-
if (key === 'ArrowDown' && event.altKey) {
49-
return;
50-
}
51-
if (key === 'ArrowDown') {
48+
if (key === 'ArrowDown' && !altKey) {
5249
return SelectActions.Next;
5350
}
5451
else if (key === 'ArrowUp') {

‎examples/index.html

+19-1
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
8080
<li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
8181
<li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
8282
<li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
83+
<li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
8384
<li><a href="combobox/grid-combo.html">Editable Combobox with Grid Popup</a></li>
8485
</ul>
8586
</td>
@@ -148,6 +149,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
148149
<li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
149150
<li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
150151
<li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
152+
<li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
151153
<li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
152154
<li><a href="listbox/listbox-grouped.html">Listbox with Grouped Options</a></li>
153155
<li><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
@@ -225,6 +227,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
225227
<li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
226228
<li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
227229
<li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
230+
<li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
228231
</ul>
229232
</td>
230233
</tr>
@@ -298,6 +301,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
298301
<td><code>tab</code></td>
299302
<td>
300303
<ul>
304+
<li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
301305
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
302306
<li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
303307
</ul>
@@ -311,6 +315,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
311315
<td><code>tablist</code></td>
312316
<td>
313317
<ul>
318+
<li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
314319
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
315320
<li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
316321
</ul>
@@ -320,6 +325,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
320325
<td><code>tabpanel</code></td>
321326
<td>
322327
<ul>
328+
<li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
323329
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
324330
<li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
325331
</ul>
@@ -374,6 +380,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
374380
<li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
375381
<li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
376382
<li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
383+
<li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
377384
<li><a href="combobox/grid-combo.html">Editable Combobox with Grid Popup</a></li>
378385
<li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
379386
<li><a href="listbox/listbox-grouped.html">Listbox with Grouped Options</a></li>
@@ -421,10 +428,12 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
421428
<td>
422429
<ul>
423430
<li><a href="accordion/accordion.html">Accordion</a></li>
431+
<li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
424432
<li><a href="checkbox/checkbox-2/checkbox-2.html">Checkbox (Mixed-State)</a></li>
425433
<li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
426434
<li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
427435
<li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
436+
<li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
428437
<li><a href="combobox/grid-combo.html">Editable Combobox with Grid Popup</a></li>
429438
<li><a href="disclosure/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>
430439
<li><a href="disclosure/disclosure-img-long-description.html">Disclosure (Show/Hide) for Image Description</a></li>
@@ -471,6 +480,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
471480
<li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
472481
<li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
473482
<li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
483+
<li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
474484
<li><a href="combobox/grid-combo.html">Editable Combobox with Grid Popup</a></li>
475485
<li><a href="disclosure/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>
476486
<li><a href="disclosure/disclosure-img-long-description.html">Disclosure (Show/Hide) for Image Description</a></li>
@@ -520,6 +530,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
520530
<td>
521531
<ul>
522532
<li><a href="carousel/carousel-1.html">Auto-Rotating Image Carousel</a></li>
533+
<li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
523534
<li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State)</a></li>
524535
<li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
525536
<li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
@@ -609,6 +620,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
609620
<ul>
610621
<li><a href="alert/alert.html">Alert</a></li>
611622
<li><a href="carousel/carousel-1.html">Auto-Rotating Image Carousel</a></li>
623+
<li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
612624
<li><a href="dialog-modal/datepicker-dialog.html">Date Picker Dialog</a></li>
613625
</ul>
614626
</td>
@@ -654,7 +666,12 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
654666
</tr>
655667
<tr>
656668
<td><code>aria-roledescription</code></td>
657-
<td><a href="carousel/carousel-1.html">Auto-Rotating Image Carousel</a></td>
669+
<td>
670+
<ul>
671+
<li><a href="carousel/carousel-1.html">Auto-Rotating Image Carousel</a></li>
672+
<li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
673+
</ul>
674+
</td>
658675
</tr>
659676
<tr>
660677
<td><code>aria-rowcount</code></td>
@@ -678,6 +695,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
678695
<td><code>aria-selected</code></td>
679696
<td>
680697
<ul>
698+
<li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with a Tablist</a></li>
681699
<li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
682700
<li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
683701
<li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>

0 commit comments

Comments
 (0)
Please sign in to comment.