![](/style/images/good.png)
![](/style/images/bad.png)
Collapsible Dropdown Listbox Example
source link: https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Collapsible Dropdown Listbox Example
The following example implementation of the
design pattern for listbox
demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML select
input with the attribute size="1"
.
The widget consists of a button that triggers the display of a listbox.
In its default state, the widget is collapsed (the listbox is not visible) and the button label shows the currently selected option from the listbox.
When the button is activated, the listbox is displayed and the current option is focused and selected.
Similar examples include:
- Scrollable Listbox Example: Single-select listbox that scrolls to reveal more options, similar to HTML
select
withsize
attribute greater than one. - Example Listboxes with Rearrangeable Options: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.
- Listbox Example with Grouped Options: Single-select listbox with grouped options, similar to an HTML
select
withoptgroup
children.
Example
Choose your favorite transuranic element (actinide or transactinide).
Notes
This listbox is scrollable; it has more options than its height can accommodate.
-
Scrolling only works as expected if the listbox is the options'
offsetParent
. The example usesposition: relative
on the listbox to that effect. - When an option is focused that isn't (fully) visible, the listbox's scroll position is updated:
- If Up Arrow or Down Arrow is pressed, the previous or next option is scrolled into view.
- If Home or End is pressed, the listbox scrolls all the way to the top or to the bottom.
- If
focusItem
is called, the focused option will be scrolled to the top of the view if it was located above it or to the bottom if it was below it. - If the mouse is clicked on a partially visible option, it will be scrolled fully into view.
- When a fully visible option is focused in any way, no scrolling occurs.
Keyboard Support
The example listbox on this page implements the following keyboard interface. Other variations and options for the keyboard interface are described in the Keyboard Interaction section of the Listbox Design Pattern.
Key Function Enter- If the focus is on the button, expands the listbox and places focus on the currently selected option in the list.
- If focus is in the listbox , collapses the listbox and keeps the currently selected option as the button label.
- Moves focus to and selects the next option.
- If the listbox is collapsed, also expands the list.
- Moves focus to and selects the previous option.
- If the listbox is collapsed, also expands the list.
- Type a character: focus moves to the next item with a name that starts with the typed character.
- Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.
Role, Property, State, and Tabindex Attributes
The example listbox on this page implements the following ARIA roles, states, and properties. Information about other ways of applying ARIA roles, states, and properties is available in the Roles, States, and Properties section of the Listbox Design Pattern.
Role Attribute Element Usagearia-labelledby="ID_REF1 ID_REF2"
button
- References the two elements whose labels are concatenated by the browser to label the button.
- The first element is a span containing text Choose an element: .
- The second element is the button itself; the button text is set to the name of the currently chosen element.
aria-haspopup="listbox"
button
Indicates that activating the button displays a listbox.
aria-expanded="true"
button
- Set by the JavaScript when the listbox is displayed.
- Otherwise, is not present.
listbox
ul
Identifies the focusable element that has listbox behaviors and contains the listbox options.
aria-labelledby="ID_REF"
ul
Refers to the element containing the listbox label.
tabindex="-1"
ul
- Makes the listbox focusable.
- The JavaScript sets focus on the listbox when it is displayed.
aria-activedescendant="ID_REF"
ul
- Set by the JavaScript when it displays and sets focus on the listbox; otherwise is not present.
- Refers to the option in the listbox that is visually indicated as having keyboard focus.
- When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
- Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the
ul
element. - For more information about this focus management technique, see Using aria-activedescendant to Manage Focus.
role="option"
li
Identifies each selectable element containing the name of an option.
aria-selected="true"
li
- Indicates that the option is selected.
- Applied to the element with role option that is visually styled as selected.
- The option with this attribute is always the same as the option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus.
HTML Source Code
<p>
Choose your favorite transuranic element (actinide or transactinide).
</p>
<div class="listbox-area">
<div class="left-area">
<span id="exp_elem" class="listbox-label">
Choose an element:
</span>
<div id="exp_wrapper">
<button type="button"
aria-haspopup="listbox"
aria-labelledby="exp_elem exp_button"
id="exp_button">
Neptunium
</button>
<ul id="exp_elem_list"
tabindex="-1"
role="listbox"
aria-labelledby="exp_elem"
class="hidden">
<li id="exp_elem_Np" role="option">
Neptunium
</li>
<li id="exp_elem_Pu" role="option">
Plutonium
</li>
<li id="exp_elem_Am" role="option">
Americium
</li>
<li id="exp_elem_Cm" role="option">
Curium
</li>
<li id="exp_elem_Bk" role="option">
Berkelium
</li>
<li id="exp_elem_Cf" role="option">
Californium
</li>
<li id="exp_elem_Es" role="option">
Einsteinium
</li>
<li id="exp_elem_Fm" role="option">
Fermium
</li>
<li id="exp_elem_Md" role="option">
Mendelevium
</li>
<li id="exp_elem_No" role="option">
Nobelium
</li>
<li id="exp_elem_Lr" role="option">
Lawrencium
</li>
<li id="exp_elem_Rf" role="option">
Rutherfordium
</li>
<li id="exp_elem_Db" role="option">
Dubnium
</li>
<li id="exp_elem_Sg" role="option">
Seaborgium
</li>
<li id="exp_elem_Bh" role="option">
Bohrium
</li>
<li id="exp_elem_Hs" role="option">
Hassium
</li>
<li id="exp_elem_Mt" role="option">
Meitnerium
</li>
<li id="exp_elem_Ds" role="option">
Darmstadtium
</li>
<li id="exp_elem_Rg" role="option">
Roentgenium
</li>
<li id="exp_elem_Cn" role="option">
Copernicium
</li>
<li id="exp_elem_Nh" role="option">
Nihonium
</li>
<li id="exp_elem_Fl" role="option">
Flerovium
</li>
<li id="exp_elem_Mc" role="option">
Moscovium
</li>
<li id="exp_elem_Lv" role="option">
Livermorium
</li>
<li id="exp_elem_Ts" role="option">
Tennessine
</li>
<li id="exp_elem_Og" role="option">
Oganesson
</li>
</ul>
</div>
</div>
</div>
Listbox Design Pattern in WAI-ARIA Authoring Practices 1.2
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK