Added by Anastasia Cheetham, last edited by Anastasia Cheetham on Aug 30, 2010  (view change)

Labels:

manual manual Delete
Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.

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

Please note that, when used as a jQuery plugin, the Keyboard Accessibility API currently handles only two parameters. This is a bug in the current implementation that will be addressed in a future release. If more than two parameters are required, any parameters beyond the function name must be be enclosed in an array.

activatable

jQuery().fluid("activatable", customHandler);
jQuery().fluid("activatable", parameterArray);  // parameterArray = [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.
In v1.0: The function should accept the element to be activated as a parameter: myHandler(element);
In v1.1 and beyond: The function should accept the browser event as a parameter: myHandler(event);
options (Optional) A collection of name-value pairs that allow you to active elements using other keystrokes (see below).

options:

Name Description Values Default
additionalBindings An array of keycode options to use for activation. An array of objects of the form
{
  modifier: <a modifier keycode>, // e.g. $.ui.keyCode.SHIFT
  key: <a keycode>,   // e.g. $.ui.keyCode.DOWN
  activateHandler: <a function>
}
none

Example:

var handler = function (evt) {
   $(evt.target).addClass("activated");
};

// Bind the Space, Enter, and Down Arrow keys to the activate event. 
// Notice the use of "additionalBindings," which is required only for the Down Arrow Key.
// By default, Space and Enter are set up for you.
row.fluid("activatable", handler, {
    additionalBindings: [{
        key: $.ui.keyCode.DOWN, 
        activateHandler: handler
    }]
});
On This Page
See Also
Still need help?

Join the infusion-users mailing list and ask your questions there.

activate

jQuery().fluid("activate");

Activates all matched elements using the default activation handler. Note that if the user has made the elements "activatable" using activatable(), that is the handler that will be used.

enabled

jQuery().fluid("enabled", target);
jQuery().fluid("enabled", parameterArray);  // parameterArray = [target, state]

Queries or sets the enabled status of the matched elements. An activatable node may be "disabled," in which case its keyboard bindings will be inoperable (but still stored) until it is reenabled again.

Arguments:

Name Description
target The element to be queried (or set)
state (Optional) Boolean. If present, the status of the target element is set to this state

getLastFocusedElement

New in v1.1:

jQuery().fluid("getLastFocusedElement")

Returns the last element that received a focusin event. Dependent on the presence of the jQuery delegate plugin.

selectable

jQuery().fluid("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 (Optional) A collection of name-value pairs that let you modify the plugin's default selection behaviour (see below).

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 selectableElements: null
selectableSelector A selector which will be used to locate the selectableElements if they are not set manually, by matching nodes within the container string selectableSelector: ".selectable"
onSelect A function to be invoked when an element is selected function onSelect: null
onUnselect A function to invoked when an element is unselected function onUnselect: null
onLeaveContainer A function to be invoked when focus leaves the container function onLeaveContainer: null
direction Indicates the orientation of the selectable elements. This value will be used to determine the appropriate mapping for next and previous. fluid.a11y.orientation.HORIZONTAL
fluid.a11y.orientation.VERTICAL 		direction: fluid.a11y.orientation.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 autoSelectFirstItem: true
rememberSelectionState Indicates whether or not to keep track of which child element was most recently selected. boolean rememberSelectionState: true

currentSelection

jQuery().fluid("selectable.currentSelection");

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

select, selectNext, selectPrevious

jQuery().fluid("selectable.selectNext");
jQuery().fluid("selectable.selectPrevious");
jQuery().fluid("selectable.select", elementToSelect);

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

Arguments:

Name Description
elementToSelect The element to select

tabbable

jQuery().fluid("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.

tabindex

Deprecated. This code is now available in jQuery core. Use jQuery.attr("tabindex") instead.

jQuery().fluid("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().fluid("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.

Arguments:

Name Description
value The desired integer tabindex value. Can be either a String or a Number.

Dependencies

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

<script type="text/javascript" src="InfusionAll.js"></script>

Alternatively, the individual file requirements are:

<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/plugins/delegate/jquery.delegate.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/ui.core.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>