Accordion User Experience Documentation

Author: Dusan Pavlica

1. Introduction

This document is the user experience specification for the JavaFX 2.0 Accordion UI control.

2. Overview

Accordion is a control similar to TabPane UI control. It contains expandable / collapsible panels and only one can be expanded at the time. The content is shown directly below the accordion header of the expanded panel. The accordion is useful when content must be displayed within limited space. It is often used on the web as a part of secondary navigation in left or right column. Usually it exists in vertical position but the horizontal position makes sense for some use cases too. The following is an overview of the Accordion look.

Figure 1 Accordion overview

Behavior of Panels

There are the following features of panels:

Each panel contains header and expandable/collapsible area.
Each panel has a title in the header and there can be also icon placed next to the title.
User can expand only one panel at the time by clicking its header.
There should be a nice transition while the panel is being expanded/collapsed.
The panels are focusable so user can cycle among them by TAB key. So some kind of focused state needs to be visualized.
Panel can be also disabled then user can't click it and expand it. The disabled one has to be distinguishable from enabled panels (e.g. by grey title and by disabled look of its icon).

3. Keyboard Navigation

The following table describes how keystrokes should be processed in case an Accordion has focus:

Keystroke	Action
Down / Right Arrow	If focus is on a header, move focus to the next header. Wrap from last to first. Do not collapse the expanded panel.
Up / Left Arrow	If focus is on a header, move focus to the previous header. Wrap from first to last. Do not collapse the expanded panel.
Page Up	If focus is on a header, move focus to the previous header and expand its corresponding panel. Wrap from first to last.
Page Down	If focus is on a header, move focus to the next header and expand its corresponding panel. Wrap from last to first.
Home	If focus is on a header, move focus to the very first header and expand its corresponding panel.
End	If focus is on a header, move focus to the very last header and expand its corresponding panel.
Enter / Space	When focus is on a header, expand/collapse its corresponding panel.
Tab	When focus is on a header and its corresponding panel is expanded, move focus to the first focusable control in the panel. If focus is on the last focusable control in the panel, move focus to the next focusable control outside the Accordion. When focus is on a header and its corresponding panel is collapsed, move focus to the next focusable control outside the Accordion.
Shift - Tab	When focus is on a focusable control in an expanded panel, move focus on previous focusable control in the panel. If focus is on the very first focusable control in the panel, move focus to the corresponding header. When focus is on a header, move focus to the previous focusable control outside the Accordion
Ctrl - Tab / Ctrl - Page Down	Move focus to the next header and expand its corresponding panel. Wrap from last to first. Use CMD-TAB or CTRL-PAGE DOWN on Mac.
Ctrl - Shift - Tab / Ctrl - Page Up	Move focus to the previous header and expand its corresponding panel. Wrap from first to last. Use CMD-SHIFT-TAB or CTRL-PAGE UP on Mac.