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 Button

A button that expands to reveal a listbox in a flyout.

PreviousListboxNextMenu

Last updated 3 months ago

Screenshots

Introduction

Avoid calling a listbox button a "dropdown"! The term "dropdown" is ambiguous and could be confused with a menu button, combobox, select or any other kind of overlay that "drops down".

Known Issues

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

Working Examples

Terminology

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

button: the button that opens the flyout

flyout: the overlay that contains the listbox

listbox: the list of options

option: an option, with state

label: internal and/or external text element(s)

Configuration

Best Practices

A listbox button's accessible label must at all times reflect its function.

Care is needed when labelling a listbox button! A listbox button attempts to mimic the behaviour of an HTML select by displaying the currently selected value in its collapsed state. In HTML however, a button is labelled by its inner text, whereas a select is labelled by an external label tag.

All of this leaves us with a conundrum, with three potential solutions outlined below.

Compound Label

We can use aria-labelledby to stitch together an external text element with the internal value, this creating a compound label.

<span id="el1">Colour</span><button aria-labelledby="el1 el2"><span id="el2">blue</span></button>

Compact Label

The button's inner text can be written as a key/value pair, where key denotes purpose and value represents the currently selected option.

<button>Colour: blue<button>

Explicit Labels

We can write our option values such that the context can always be derived from the option value text alone (this isn't always easy or recommended).

<div role="option">Colour blue</div>

Interaction Design

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

Keyboard

With focus on listbox, ARROW KEYS will navigate the options, ESCAPE key will collapse listbox and move focus on to button. TAB key will collapse listbox and move focus to next interactive page element. SHIFT-TAB will move focus back to button and listbox will remain expanded.

Screen Reader

With virtual cursor on button, screen reader should announce role, label (see "Best Practices" section above), value & state..

Pointer

Clicking or tapping button will toggle expanded state of flyout.

Clicking or tapping an option in flyout will update button value and collapse the flyout.

Developer Guide

This section is not yet available.

The listbox button pattern is a JavaScript widget. It is a button that expands to reveal a in a .

Because it is not a form control, the button value will not automatically be passed to the server. If you require this behaviour, please consider the pattern instead.

Experience the pattern in action on our companion .

Examine the required markup structure in our .

View a fully styled example in our .

See related pattern.

Please also see related pattern for best practices of nested listbox.

With focus on button, pressing SPACEBAR will will toggle the expanded state of button. On expand, keyboard focus should move to the listbox. The listbox implements an keyboard model.

listbox
flyout
select
https://issues.chromium.org/issues/40260928
https://issues.chromium.org/issues/40945405
eBay MIND Patterns examples website
Bones GitHub project
eBay Skin CSS framework
listbox
listbox
active-descendant