Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Keyboard Accessibility Plugin API - v0.5

This documentation refers to version 0.5 of the jQuery Keyboard Accessibility Plugin code. For documentation specific to trunk, please see Keyboard Accessibility Plugin API.

The jQuery Keyboard Accessibility Plugin makes it easy for developers to add keyboard handlers to their code without a lot of extra overhead.

The jQuery Keyboard Accessibility Plugin includes two collections of functions: tabindex functions and keyboard navigation functions.


Keyboard Navigation

*

jQuery().selectable(options)

*
Invoked on a JQuery which is a "container" node: makes all matched elements descended from the container selectable with the arrow keys. Custom handlers can be provided to inject custom styling and logic.

Arguments:

Name

Description

options

An optional collection of name-value pairs that let you modify the plugin's default selection behaviour (see below).

On This Page
Still need help?

Join the fluid-talk mailing list and ask your questions there.

options:

Name

Description

Values

Default

selectableElements

The set of nodes (a JQuery) which are to form the selectable set (these should all be nested within the DOM element representing the "container")

jQuery

empty

selectableSelector

A selector which will be used to locate the selectableElements if they are not set manually, by matching nodes within the container

string

".selectable"

onSelect

A function to be invoked when an element is selected

function

empty

onUnselect

A function to invoked when an element is unselected

function

empty

onLeaveContainer

A function to be invoked when focus leaves the container

function

empty

direction

Indicates the orientation of the selectable elements. This value will be used to determine the appropriate mapping for next and previous.

jQuery.a11y.directions.HORIZONTAL
jQuery.a11y.directions.VERTICAL

jQuery.a11y.directions.VERTICAL

autoSelectFirstItem

Indicates whether or not focus should be moved to the first child of the container (or to the last selected child, depending on rememberSelectionState)

boolean

true

rememberSelectionState

Indicates whether or not to keep track of which child element was most recently selected.

boolean

true


*

jQuery().activatable(customHandler, options)

*
Makes all matched elements activatable with the Spacebar and Enter keys. A handler function may be provided to trigger custom behaviour.

Arguments:

Name

Description

customHandler

A function that will be called when the element is activated. The function should accept the element to be activated as a parameter: myHandler(element);

options

An optional collection of name-value pairs that allow you to active elements using other keystrokes (see below).

options:

Name

Description

Values

Default

keys

An array of keycodes to use for activation.

 

[fluid:jQuery.a11y.keys.ENTER, jQuery.a11y.keys.SPACE]


*

jQuery().selectNext();
jQuery().selectPrevious();
jQuery().select(elementToSelect);

*
Selects the next, previous, or specified element in the list of selectables (invoked on the jQuery for the container element)


*

jQuery().currentSelection();

*
Gets the currently selected element (invoked on the container element)


*

var selectableContext = jQuery().getSelectableContext();

*
Returns the "that" bound to the container, which exposes further fine-grained operations on the component.

*

selectableContext.refresh();

*
Where the context was initialised with selectableSelector and not a raw selectableElements, refreshes the list of selectables that the container is managing by reevaluating the selector (to take account of any DOM modifications in the meantime).


*

jQuery().activate(elementToActivate);

*
Activates the specified item using the default activation handler. Note that if the user has provided a handler function to activatable(), that is the handler that will be used.


Tabindex

*

jQuery().tabindex()

*
Gets the tabindex value of the first matched element. If the element doesn't have a tabindex attribute, undefined is returned. The value returned is normalized to a Number, since browser implementations vary.


*

jQuery().tabindex(value)

*
Sets the tabindex value on all matched elements. value can be either a String or a Number, but valid tabindex attributes need to be integers.


*

jQuery().removeTabindex()

*
Removes the tabindex attribute from all matched elements.


*

jQuery().hasTabindexAttr()

*
Returns true if the element has a tabindex attribute, false if tabindex is not set. There is no reliable technique for querying tabindex attributes on versions of IE < 6, so this method will always return false on IE 5.5 and below.


*

jQuery().hasTabindex()

*
Returns true if the element has a tabindex attribute, or is an HTML element that is included in the tab order by default (i.e. a, input, button, select, area, textarea, or object).


*

jQuery().tabbable()

*
Adds all matched elements to the tab order by giving them a tabindex attribute of "0." Note that if a matched element already has a tabindex value that places it in the tab order, the value is unchanged.


Dependencies

The Keyboard Accessibility Plugin dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:

<script type="text/javascript" src="Fluid-all.js"></script>

Alternatively, the individual file requirements are:

<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery/jquery.keyboard-a11y.js"></script>