Skip to content

Commit 75ea394

Browse files
carterlesemancarterleseman
committed
add list boxes; clean combo boxes/selects
1 parent f06e24d commit 75ea394

4 files changed

Lines changed: 381 additions & 127 deletions

File tree

‎docs/docs.css‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -116,20 +116,14 @@ button.active {
116116
inset -2px -2px #dfdfdf, inset 2px 2px #808080;
117117
}
118118

119-
ul[role=listbox] > li.last-hovered,
120119
.combo-box.key-nav > input[aria-haspopup] ~ ul > li[aria-selected=true] {
121120
color: #fff;
122121
background-color: #000080;
123122
}
124123

125-
.combo-box.key-nav > ul[role=listbox] > li.last-hovered,
126-
.combo-box.key-nav > ul[role=listbox] > li:hover:not([aria-selected=true]) {
127-
color: inherit;
128-
background-color: inherit;
129-
}
130-
131-
.combo-box > input[aria-haspopup] ~ ul:has(.last-hovered) > li[aria-selected=true]:not(.last-hovered),
132-
.combo-box:not(.key-nav) > input[aria-haspopup] ~ ul:has(.last-hovered) > li[aria-selected=true]:not(.last-hovered) {
124+
div.key-nav > ul[role=listbox] > li[aria-current=true],
125+
div.key-nav > ul[role=listbox] > li:hover:not([aria-selected=true]),
126+
div:not(.key-nav) > input[aria-haspopup] ~ ul:has([aria-current=true]) > li[aria-selected=true]:not([aria-current=true]) {
133127
color: inherit;
134128
background-color: inherit;
135129
}

‎docs/index.html.ejs‎

Lines changed: 140 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<li><a href="#text-box">TextBox</a></li>
3333
<li><a href="#slider">Slider</a></li>
3434
<li><a href="#combo-box">ComboBox</a></li>
35-
<li><a href="#dropdown">Dropdown</a></li>
35+
<li><a href="#list-box">ListBox</a></li>
3636
<li>
3737
<a href="#window">Window</a>
3838
<ul>
@@ -492,9 +492,9 @@
492492
</ul>
493493

494494
<%- example(`
495-
<div class="combo-box">
496-
<input type="text" role="combobox" value="Regular" aria-controls="example${getNewId()}" />
497-
<ul role="listbox" id="example${getCurrentId()}" tabindex="-1">
495+
<div class="combo-box" style="width: fit-content">
496+
<input type="text" id="example${getNewId()}-input" role="combobox" value="Regular" aria-controls="example${getCurrentId()}-listbox" />
497+
<ul role="listbox" id="example${getCurrentId()}-listbox" tabindex="-1">
498498
<li role="option" aria-selected="true">Regular</li>
499499
<li role="option">Italic</li>
500500
<li role="option">Bold</li>
@@ -512,63 +512,175 @@
512512
</ul>
513513

514514
<%- example(`
515-
<div class="combo-box" width="200px">
516-
<input type="text" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="example${getNewId()}" />
515+
<div class="combo-box" style="width: fit-content">
516+
<input type="text" id="example${getNewId()}-input" role="combobox" value="h:mm:ss tt" aria-haspopup="listbox" aria-expanded="false" aria-controls="example${getCurrentId()}-listbox" />
517517
<button type="button" tabindex="-1"></button>
518-
<ul role="listbox" id="example${getCurrentId()}" tabindex="-1">
519-
<li role="option">h:mm:ss tt</li>
518+
<ul role="listbox" id="example${getCurrentId()}-listbox" tabindex="-1">
519+
<li role="option" aria-selected="true">h:mm:ss tt</li>
520520
<li role="option">hh:mm:ss tt</li>
521521
<li role="option">H:mm:ss</li>
522522
<li role="option">HH:mm:ss</li>
523523
</ul>
524524
</div>
525525
`) %>
526+
527+
<p>
528+
For more options of the list box, see the <a href="#list-box">ListBox</a> section.
529+
</p>
526530
</div>
527531
</section>
528532

529533
<section class="component">
530-
<h3 id="dropdown">Dropdown</h3>
534+
<h3 id="list-box">ListBox</h3>
531535
<div>
532536
<blockquote>
533-
A <em>drop-down list box</em> allows the selection of only a
534-
single item from a list. In its closed state, the control displays
535-
the current value for the control. The user opens the list to change
536-
the value.
537+
A <em>list box</em> is a control for displaying a list of choices for the user.
537538

538539
<footer>
539-
&mdash; Microsoft Windows User Experience p. 175
540+
&mdash; Microsoft Windows User Experience p. 170
540541
</footer>
541542
</blockquote>
542543

543544
<p>
544-
Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
545-
elements.
545+
The simplest way to render a list box is by using the <code>select</code> element with a <code>multiple</code> attribute specified.
546546
</p>
547547

548548
<%- example(`
549-
<select>
549+
<select multiple>
550550
<option>5 - Incredible!</option>
551-
<option>4 - Great!</option>
551+
<option selected>4 - Great!</option>
552552
<option>3 - Pretty good</option>
553553
<option>2 - Not so great</option>
554554
<option>1 - Unfortunate</option>
555555
</select>
556556
`) %>
557557

558558
<p>
559-
By default, the first option will be selected. You can change this by
560-
giving one of your <code>option</code> elements the <code>selected</code>
561-
attribute.
559+
The complex way is using a combination of the <code>ul</code>/<code>li</code> elements with the role attributes.
562560
</p>
563561

564562
<%- example(`
565-
<select>
566-
<option>5 - Incredible!</option>
567-
<option>4 - Great!</option>
568-
<option selected>3 - Pretty good</option>
569-
<option>2 - Not so great</option>
570-
<option>1 - Unfortunate</option>
571-
</select>
563+
<ul role="listbox" tabindex="0" style="width: fit-content">
564+
<li role="option" aria-selected="true">Bitmap Image</li>
565+
<li role="option">Image Document</li>
566+
<li role="option">Media Clip</li>
567+
<li role="option">Wave Sound</li>
568+
<li role="option">WordPad Document</li>
569+
</ul>
570+
`) %>
571+
572+
<p>
573+
To remove the scroll bar of the list box, use the <code>no-scroll</code> class.
574+
</p>
575+
576+
<%- example(`
577+
<ul role="listbox" class="no-scroll" tabindex="0" style="width: 150px">
578+
<li role="option">Edit</li>
579+
<li role="option">Open</li>
580+
<li role="option">Print</li>
581+
</ul>
582+
`) %>
583+
584+
<blockquote>
585+
A <em>drop-down list box</em> allows the selection of only a single item from a list; the difference is that the list is displayed on demand. In its closed state, the control displays the current value for the control.
586+
587+
<footer>
588+
&mdash; Microsoft Windows User Experience p. 175
589+
</footer>
590+
</blockquote>
591+
592+
<p>
593+
A drop-down can be rendered in 2 ways. The first is using the native <code>select</code> and <code>option</code>. The second is using a text <code>input</code>, a <code>button</code>, a parent <code>ul</code>, and children <code>li</code> together, wrapped inside a container element with the <code>list-box</code> class. For accessibility, follow the minimum requirements below:
594+
</p>
595+
596+
<ul>
597+
<li>Add <code>aria-haspopup="listbox"</code> and <code>aria-expanded</code> attributes to the text <code>input</code></li>
598+
<li>
599+
Specify the relationship between the list box and the text box by combining the <code>id</code> of the <code>listbox</code> with the <code>aria-controls</code> attribute on the text <code>input</code>
600+
</li>
601+
</ul>
602+
603+
<%- example(`
604+
<div class="list-box" style="width: fit-content">
605+
<input type="text" id="example${getNewId()}-input" aria-haspopup="listbox" value="True Color (24 bit)" aria-expanded="false" aria-controls="example${getCurrentId()}-listbox" readonly />
606+
<button type="button" tabindex="-1"></button>
607+
<ul id="example${getCurrentId()}-listbox" role="listbox" tabindex="-1">
608+
<li role="option">Monochrome</li>
609+
<li role="option">16 Color</li>
610+
<li role="option">256 Color</li>
611+
<li role="option">High Color (16 bit)</li>
612+
<li role="option" aria-selected="true">True Color (24 bit)</li>
613+
</ul>
614+
</div>
615+
`) %>
616+
617+
<blockquote>
618+
Although most list boxes are single-selection lists, some contexts require the user to choose more than one item. <em>Multiple-selection list boxes</em> support this functionality.
619+
620+
<footer>
621+
&mdash; Microsoft Windows User Experience p. 176
622+
</footer>
623+
</blockquote>
624+
625+
<p>A multiple-selection list box can be rendered by adding the <code>aria-multiselectable</code> attribute to the <code>listbox</code>, along with checkboxes.</p>
626+
627+
<%- example(`
628+
<ul role="listbox" tabindex="0" aria-multiselectable="true" style="width: fit-content">
629+
<li role="option">
630+
<input type="checkbox" id="example${getNewId()}-checkbox-1" tabindex="-1">
631+
<label for="example${getCurrentId()}-checkbox-1">Yearly Statistic</label>
632+
</li>
633+
<li role="option">
634+
<input type="checkbox" id="example${getCurrentId()}-checkbox-2" tabindex="-1">
635+
<label for="example${getCurrentId()}-checkbox-2">Financial Summary</label>
636+
</li>
637+
<li role="option">
638+
<input type="checkbox" id="example${getCurrentId()}-checkbox-3" tabindex="-1">
639+
<label for="example${getCurrentId()}-checkbox-3">Samson Account</label>
640+
</li>
641+
<li role="option">
642+
<input type="checkbox" id="example${getCurrentId()}-checkbox-4" tabindex="-1">
643+
<label for="example${getCurrentId()}-checkbox-4">Lukison Review</label>
644+
</li>
645+
</ul>
646+
`) %>
647+
648+
<p>Group options by wrapping them in a <code>ul</code> with parent <code>li</code> with the <code>role="group"</code> attribute.
649+
To label a group of options, use a child <code>span</code> inside the parent <code>li</code> and reference its id in the <code>aria-labelledby</code> attribute of the <code>li</code>.</p>
650+
651+
<%- example(`
652+
<ul role="listbox" tabindex="0" aria-multiselectable="true" style="width: fit-content">
653+
<li role="group" aria-labelledby="example${getNewId()}-group-1">
654+
<span id="example${getCurrentId()}-group-1">Browsing</span>
655+
<ul>
656+
<li role="option">
657+
<input type="checkbox" id="example${getCurrentId()}-checkbox-1" tabindex="-1">
658+
<label for="example${getCurrentId()}-checkbox-1">Enable page transitions</label>
659+
</li>
660+
<li role="option">
661+
<input type="checkbox" id="example${getCurrentId()}-checkbox-2" tabindex="-1">
662+
<label for="example${getCurrentId()}-checkbox-2">Use smooth scrolling</label>
663+
</li>
664+
</ul>
665+
</li>
666+
<li role="group" aria-labelledby="example${getCurrentId()}-group-2">
667+
<span id="example${getCurrentId()}-group-2">Multimedia</span>
668+
<ul>
669+
<li role="option">
670+
<input type="checkbox" id="example${getCurrentId()}-checkbox-3" tabindex="-1">
671+
<label for="example${getCurrentId()}-checkbox-3">Play animations</label>
672+
</li>
673+
<li role="option">
674+
<input type="checkbox" id="example${getCurrentId()}-checkbox-4" tabindex="-1">
675+
<label for="example${getCurrentId()}-checkbox-4">Play sounds</label>
676+
</li>
677+
<li role="option">
678+
<input type="checkbox" id="example${getCurrentId()}-checkbox-5" tabindex="-1">
679+
<label for="example${getCurrentId()}-checkbox-5">Show pictures</label>
680+
</li>
681+
</ul>
682+
</li>
683+
</ul>
572684
`) %>
573685
</div>
574686
</section>

0 commit comments

Comments
 (0)