eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Screenshots
  • Introduction
  • Known Issues
  • Working Examples
  • Terminology
  • Configuration
  • Best Practices
  • Interaction Design
  • Developer Guide
  1. Input

Listbox

Allows selection of one or more items from a list of options.

PreviousInput DialogNextListbox Button

Last updated 3 months ago

Screenshots

No screenshot yet.

Introduction

The listbox pattern is a JavaScript widget. It allows selection of one or more items from a list of options.

Because it is not a form control, the value will not be passed to the server without the help of some client-side JavaScript.

A listbox can be self-contained, or be controlled by another widget (e.g. in a pattern, the textbox controls the listbox).

Known Issues

These are all known serious issues with assistive technology in relation to this pattern:

Working Examples

Experience the pattern in action on our companion .

Examine the required markup structure in our our .

View a fully styled example in our .

Terminology

  • widget: the pattern as a whole, comprised of the parts below

  • listbox: contains a list of options

  • option: each option available for selection

  • checked: state of each option (checked or unchecked)

Configuration

  • autoSelect: a listbox with auto select will update its checked state automatically as a user navigates with arrow keys (similar to a radio button group).

  • multiSelect: a listbox with multiSelect allows more than one option to be selected

Best Practices

This section is not yet available.

Interaction Design

This section provides interaction design for keyboard, screen reader & pointing devices.

Keyboard

If the listbox has no owner, the listbox must be keyboard focusable.

If a listbox has keyboard focus, UP-ARROW and DOWN-ARROW keys must change the highlighted option (skipping any that are disabled).

For a listbox with autoSelect configuration, highlighting an option must also select that option (i.e. aria-checked="true").

For a listbox without autoSelect configutation, a highlighted option must be manually selected using the SPACEBAR or ENTER key.

Screen Reader

With virtual cursor on listbox, screen reader should announce role of listbox.

The checked state of an option must be announced.

Disabled options must be announced as disabled.

Pointer

Clicking or tapping button will toggle expanded state of flyout.

Clicking or tapping option in flyout will update button to that value.

Developer Guide

This section is not yet available.

owner: specify the focusable element that will own and control the listbox programmatically (e.g. a ).

For a focusable listbox, keyboard focus will appear to be at two places at the same time (the listbox and the options). In actual fact, keyboard focus always stays on the listbox. The property controls the pseudo-focus inside of the listbox and we can use CSS to style the active descendant.

combobox
https://issues.chromium.org/issues/40260928
https://issues.chromium.org/issues/40945405
eBay MIND Patterns examples website
Bones GitHub project
eBay Skin CSS framework
combobox
aria-activedescendant