Accordion Component Keyboard Navigation Proposal

8/20/07
Earl Johnson
Sun Microsystems, Inc.

This table attempts to merge the input from the Flash Accordion Component from, and the latest Tab key influenced feedback from Sun's reviews. The main differences between the Sun's proposal and what Flash and Dojo use:

Component Description

The Accordion component is much like a sideways Tab, with vertical sliding behavior for opening the currently selected section while closing the previously open section. The following link takes you to an example that can be refered to as this proposal is reviewed.

http://webdev2.sun.com/example/faces/accordion/example1.jsp

Important Note: the examples on this page are not keyboard accessible yet, it is pointed to only as a reference because it is the closest visual example to what the proposal below is meant to cover. These examples do not include menu buttons on the accordion pane headers.

Nomenclature

This proposal should be updated so it uses the same reference names to describe different portions of the accordion component.

Note: I'm not sure if parent/child, node, or other terms are better used, what is recommended for the style guide?

The following table identifies what names were used in this proposal to describe each main area of the accordion component refered to in this proposal.


Accordion component Accordion widget. Flash calls this the main component the Parent
Accordion component header Header that contains the name, or title of the accordion component; it only contains window manager type controls [all open, all closed, QUIT?].
Accordion pane
The accordion pane is comprised of header, or title area along a container in which the contents of the accordion pane are placed. Flash calls an accordion pane a Child of the accordion component.
Accordion pane header The header contains the name, or title of the accordion pane's content and a button pull down menu; the button pull down menu is optional.
Accordion pane content The content contains the text and/or interactive elements that can cause changes in the application. By comparison, the elements of the accordion component described above only contain actions that apply to the accordion component.


Accordion Component "Key Sequence-Action" Proposal Table

Key Description

Down Arrow, Right Arrow

Moves focus right and/or down within the content pane.

Note: This behavior also describes how the Button's pull down should react.,

Up Arrow, Left Arrow

Moves focus left and/or up within the content pane.

Note: This behavior also describes how the Button's pull down should react.,

End

- Selects the last element in the content pane if focus is in the content pane.

Note: This also describes behavior for how the Button's pull down should react.

- Selects the last content header when focus is on the pane header

Note: This action is not applicable to the Button's pull down.

Home

- Selects the first element in the content pane if focus is in the content pane.

Note: This also describes behavior for how the Button's pull down should react.

- Selects the first content header when focus is on the pane header.

Note: This action is not applicable to the Button's pull down.

Enter/Space

Activates a menu item.

Note: This behavior also describes how the Button's pull down should react.,

Page Down

Selects the next pane header regardless of where focus is in the current header or pane content. Selection cycles from the last pane header to the first pane header.

Note: This action is not applicable to the Button's pull down.

Page Up

Selects the previous pane header regardless of where focus is in the current header or pane content. Selection cycles from the first pane header to the last pane header.

Note: This action is not applicable to the Button's pull down.

Cntrl + Up Arrow

Moves focus from anywhere in a content pane to the content pane's header.

Note: No action occurs when focus is in the content accordion pane's header.

Cntrl + Down Arrow

Moves focus from anywhere in the content pane's header to the first focusable element in the content pane.

Note: No action occurs when focus is in the accordion content pane.

Tab

Starting from the Accordion Header, the following describes how input focus changes when the Tab key is repeatedly pressed :

  1. Input focus moves to each interactive glyph on the accordion global header.
  2. Input focus moves to the first accordion pane's header.
  3. Input moves to the menu button, if applicable.
  4. When there is a button menu:
    1. If the menu is posted, i.e. Enter is pressed,, pressing Tab causes two actions:
      1. Moves input focus on the first item in the first accordion pane.
      2. Dismisses the menu
    2. If the button menu is not posted, pressing Tab causes two actions:
      1. Moves input focus on the first item in the first accordion pane.
      2. Dismisses the menu
  5. When focus is in the accordion pane, pressing Tab causes one of the following:
    1. If there is a Tab navigable element in the accordion pane, input focus moves to that element.
    2. If there are no Tab navigable ements in the accordion pane, or input focus is on the last Tab navigable, input focus moves to the next accordion pane header
  6. Steps 2-5 apply for each additional accordion pane in the accordion component.
  7. Input focus moves out of the accordion component when Tab is pressed on the last Tab navigable element in the last accordion pane.
Shift+Tab

Moves input focus in reverse of what Tab does generally; the following describes what happens when input focus starts on an element inside an accordion pane and Shift+Tab is repeatedly pressed::

  1. Input focus moves from the element in the pane in one of two ways:
    1. To the previous Tab focusable element in the pane
    2. It moves to the accordion pane header's menu button or, if applicable, if input focus is on the first focusable element
    3. Special\Situation: When input focus is in the pull down menu, pressing Shift+Tab moves focus to the content pane's header text.
  2. Input focus moves in one of two ways if input focus is on an accordion pane header:
    1. To the previous accordion pane header [Note: focus does not move the the menu button [if applicable]]
    2. To the accordion pane header [Note: focus does not move to the last glyph on the accordion].
  3. Input focus moves out of the accordion component if Tab is pressed when its header has input focus.

Cntrl+F10

- Posts the content pane header's button menu if focus is in the content pane or it's header

- Posts the Accordion pane header *only* if  focus is on the header and if applicable.

Esc

- Dismisses the content pane header's button menu if it is posted.

- Dismisses the Accordion pane header's button menu if it is posted.