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
  • Introduction
  • Working Examples
  • Terminology
  • Best Practices
  • Interaction Design
  • Touch
  • Developer Guide
  • ARIA Reference
  • FAQ
  1. Disclosure

Flyout

A non-modal overlay, showing contextually relevant content and/or actions.

PreviousDetailsNextFootnote

Last updated 3 months ago

Introduction

Flyout is a composite pattern containing an element (typically a button) that hosts a non-modal overlay. The overlay discloses contextually relevant secondary content and/or actions.

Flyout forms the basis of the following composite patterns:

The pattern discussed here in this document is a more generic use-case, where the flyout overlay may contain any kind of content.

Working Examples

Terminology

  • flyout: the composite pattern as a *whole*, containing an overlay and it's host

  • host: the element that hosts the overlay

  • overlay: the non-modal overlay that contains the content related to it's host

  • content: the actual content of the overlay

  • expanded/collapsed: the overlay state (visible or hidden)

Best Practices

The overlay expands or collapses via any combination of the following events:

  • Click event of host

  • Hover event of host (discouraged)

  • Focus event of host (discouraged)

  • System event at page load or after some arbitrary time

A link must not be the host of a click-activated flyout. Clicking the host should always navigate to the URL in this case.

Overlay must be placed directly after the host in DOM. This ensures natural tab order and reading order without JavaScript.

If focus-activated, overlay should not contain long blocks of interactive elements. This measure prevents keyboard users from having to tab through secondary or tertiary content inside of the overlay.

Interaction Design

This section provides interaction guidelines for keyboard, screen reader, and pointing devices.

Keyboard

Tab order must flow directly from host into first focusable element inside overlay. If the overlay has no focusable element, tab order flows to next page control instead.

If not system-activated, host must be keyboard focus-able.

If click-activated, flyout must expand overlay when host receives keyboard click.

If focus-activated (discouraged), flyout must expand when host receives keyboard focus.

If focus-activated (discouraged), flyout must collapse when flyout loses keyboard focus.

Screen Reader

Reading order must flow directly from host into overlay.

Overlay must not be conveyed as a dialog.

If system-activated and high-priority, screen reader must announce presence and/or content overlay.

Mouse

If hover-activated (discouraged), flyout must expand when host receives mouse hover.

If hover-activated (discouraged), flyout must collapse when mouse leaves flyout.

If click-activated, flyout must expand when host receives mouse click.

If system-activated, flyout must collapse when clicking close button.

Touch

If click-activated, flyout must expand when host receives tap.

if system-activated, flyout must close when tapping close button.

Developer Guide

Let's examine a click-activated flyout. Click-activated flyouts typically occur with buttons, where clicking the button expands the flyout.

The key things to consider are:

  1. Server-side rendering or client-side rendering of overlay content (or both)

  2. Placement of overlay element in relation to host

  3. Using aria-expanded state to toggle CSS display

  4. Determining the live-region property

Content

Content rendered by the server will be visible by default before & without CSS or JavaScript. If the content is secondary in nature, you may wish to render the content on the client instead.

Whatever progressive enhancement strategy you choose, the following structure is the goal:

<span class="flyout flyout--click">
    <button class="flyout__host" type="button" disabled>Toggle Flyout</button>
    <span aria-live="off">
        <div class="flyout__overlay">
            <!-- flyout content -->
        </div>
    </span>
</span>

Notice placement of the host (the button) directly before the overlay element. This allows natural keyboard and reading order from the host into the overlay.

An optional live-region element wraps the overlay. The live-region property may be set to "off", "polite" or "assertive".

Presentation

The overlay can be absolute or fixed positioned:

.flyout__overlay {
    display: none;
    position: absolute;
    z-index: 1;
}

We have hidden the overlay by default (display: none). We use the aria-expanded state of the host to control the display of the overlay:

.flyout__host[aria-expanded=true] ~ [aria-live] .flyout__overlay {
    display: block;
}

Behaviour

CSS alone cannot trigger the expanded state, so we require a small amount of Javascript to handle this behaviour:

document.querySelector('.flyout__host').addEventListener('click', function() {
  const isExpanded = this.getAttribute('aria-expanded') === 'true';

  this.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
});

Clicking the button with mouse, keyboard or touch will now toggle the aria-expanded state of the button.

ARIA Reference

aria-expanded

This boolean attribute signifies the expanded state of the host element.

aria-live

If wishing to announce the content of the flyout when it expands, set aria live to polite or assertive.

FAQ

Why do we use the term flyout instead of popover?

In most practical senses, the term flyout is synonomous with popover; they are both used to describe overlays of content that do not have a role of dialog.

NOTE: A "dropdown" can be considered a direction-specific kind of flyout; as it drops down from, or flys down from, a button or textbox.

You can take a look at a generic flyout on our .

The overlay can hold any kind of content, but for an overlay that demands user acknowledgement or input, or with additional rich interactions, consider using a instead.

Overlay must be non-modal (i.e. must not trap keyboard focus or mask page background). For modal behaviour please consider the pattern instead.

If system-activated (e.g. a ), overlay must remain onscreen until explicitly dismissed by the user.

Hover behaviour can be problematic or impossible for touch. You may wish to consider using the pattern instead.

Comboxbox
Fake Menu Button
Infotip
Listbox Button
Menu Button
Tooltip
Tourtip
examples site
dialog
dialog
Tourtip
Infotip
Flyout overlays with pointers