Experimental Example of Scrollable Listbox with Actions on Options
+ +About This Experimental Example
+
+
+ This is an experimental implementation of the draft specification of the aria-actions attribute.
+ The aria-actions property enables an element to reference one or more interactive elements that can be activated to perform an action on the referencing element.
+ In this example, each option element in the listbox references several buttons that perform actions on the option.
+ The relationship provided by aria-actions enables an assistive technology to both communicate the availability of the action button and provide a command for activating the button while focus is on the tab.
+
+ The following example implementation of the Listbox Pattern demonstrates a scrollable single-select listbox widget.
+ This widget is functionally similar to an HTML select input where the size attribute has a value greater than one.
+
+ This example also demonstrates how to provide buttons that provide contextual actions for each item in the list.
+ Each option has an associated set of four actions that enable users to move an option up or down, favorite it, or remove it from the list.
+ The contextual actions are provided by buttons that appear on hover or focus.
+ The buttons are referenced by aria-actions specified on the option element, which enables them to be discovered and activated by an assistive technology user while focus is on the option.
+
Similar examples include:
+-
+
- Scrollable Listbox Example: Single-select listbox that scrolls to reveal more options, similar to HTML
selectwithsizeattribute 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
selectwithoptgroupchildren.
+
Example
+Choose your favorite transuranic element (actinide or transactinide).
+-
+
- + + None + +
- + + Neptunium + + + + + + + +
- + + Plutonium + + + + + + + +
- + + Americium + + + + + + + +
- + + Curium + + + + + + + +
- + + Berkelium + + + + + + + +
- + + Californium + + + + + + + +
- + + Einsteinium + + + + + + + +
- + + Fermium + + + + + + + +
- + + Mendelevium + + + + + + + +
- + + Nobelium + + + + + + + +
- + + Lawrencium + + + + + + + +
- + + Rutherfordium + + + + + + + +
- + + Dubnium + + + + + + + +
- + + Seaborgium + + + + + + + +
- + + Bohrium + + + + + + + +
- + + Hassium + + + + + + + +
- + + Meitnerium + + + + + + + +
- + + Darmstadtium + + + + + + + +
- + + Roentgenium + + + + + + + +
- + + Copernicium + + + + + + + +
- + + Nihonium + + + + + + + +
- + + Flerovium + + + + + + + +
- + + Moscovium + + + + + + + +
- + + Livermorium + + + + + + + +
- + + Tennessine + + + + + + + +
- + + Oganesson + + + + + + + +
Accessibility Features
+-
+
-
+ Because this listbox implementation is scrollable and manages which option is focused by using aria-activedescendant, the JavaScript must ensure the focused option is visible.
+ So, when a keyboard or pointer event changes the option referenced by
aria-activedescendant, if the referenced option is not fully visible, the JavaScript scrolls the listbox to position the option in view. +
+ -
+ To enhance perceivability when operating the listbox, visual keyboard focus and hover are styled using the CSS
:hoverand:focuspseudo-classes: +-
+
- To help people with visual impairments identify the listbox as an interactive element, the cursor is changed to a pointer when hovering over the list. +
- To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option. +
+
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 Pattern. +
+
+ NOTE: When visual focus is on an option in this listbox implementation, DOM focus remains on the listbox element and the value of aria-activedescendant on the listbox refers to the descendant option that is visually indicated as focused.
+ Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator, not DOM focus.
+ For more information about this focus management technique, see
+ Managing Focus in Composites Using aria-activedescendant.
+
| Key | +Function | +
|---|---|
| Tab | +Moves focus into and out of the listbox. | +
| Down Arrow | +Moves focus to and selects the next option. | +
| Up Arrow | +Moves focus to and selects the previous option. | +
| Right Arrow | +
+
|
+
| Left Arrow | +
+
|
+
| Home | +Moves focus to and selects the first option. | +
| End | +Moves focus to and selects the last option. | +
| Printable Characters | +
+
|
+
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 Pattern. +
+| Role | +Attribute | +Element | +Usage | +
|---|---|---|---|
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="0" |
+ ul |
+ Includes the listbox in the page tab sequence. | +
| + | aria-activedescendant="ID_REF" |
+ ul |
+
+
|
+
option |
+ + | li |
+ Identifies each selectable element containing the name of an option. | +
| + | aria-selected="true" |
+ li |
+
+
|
+
| + | aria-actions="" |
+ li |
+
+
|
+
| + | aria-actions="ID_REFS" |
+ li |
+
+
|
+
| + | aria-hidden="true" |
+ span |
+ + Removes the character entity used for the check mark icon from the accessibility tree to prevent it from being included in the accessible name of the option. + | +
JavaScript and CSS Source Code
+-
+
- + CSS: + listbox.css + +
- + JavaScript: + listbox.js, listbox-scrollable.js + +
HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ +