Example End

Example Description

Type: Best Practice

This is example implements a combobox widget with aria-autocomplete=“none”. The edit box is readonly. The application is required to manage focus for the list box so assistive technologies can follow the currently selected option. For clarity, this example was designed not to update the edit box until the user makes a choice from the list.

Keyboard Support

If focus is on the edit box:

Up Arrow: Move upward in list, even if the list box is closed.

Down Arrow: Move downward in list, even if the list box is closed.

Alt + Up Arrow/Down Arrow: Open or close the list box. Focus moves to selected option in list.Note: Opera does not propagate alt key modifer events to the web page. Alt+Arrow key combinations will not work in Opera.

If focus is on the list box:

Enter: Select highlighted option and close the list box. Focus moves to the edit box.

Escape: Close list box without changing the combobox value (e.g. no selection is made). Focus moves to the edit box.

Up Arrow: Move upward in list.

Down Arrow: Move downward in list.

Home: Move to first option in list.

End: Move to last option in list.

Tab: Select highlighted option and close list box. Focus moves to the next focusable element in page.

this.$selected; // the current value of the combobox
this.$focused; // the currently selected option in the combo list
this.timer = null; // stores the close list timer that is set when combo looses focus

//
// Function isOpen() is a member function to get the current state of the list box
//
// @return (boolean) returns true if list box is open; false if it is not
//
combobox.prototype.isOpen = function() {

//
// Function closeList() is a member function to close the list box if it is open
//
// @param (restore booleam) restore is true if function should restore higlight to stored list selection
//
// @return N/A
//
combobox.prototype.closeList = function(restore) {

var $curOption = this.$options.filter('.selected');

if (restore == true) {
$curOption = this.$selected;

// remove the selected class from the other list items
this.$options.removeClass('selected');

//
// Function selectOption() is a member function to select a new combobox option.
// The jQuery object for the new option is stored and the selected class is added
//
// @param ($id object) $id is the jQuery object of the new option to select
//
// @return N/A
//
combobox.prototype.selectOption = function($id) {

// If there is a selected option, remove the selected class from it
if (this.$selected.length > 0) {
this.$selected.removeClass('selected');
}

// add the selected class to the new option
$id.addClass('selected');

// store the newly selected option
this.$selected = $id;

// update the edit box
this.$edit.val($id.text());

} // end selectOption

//
// Function calcOffset() is a member function to calculate the pixel offset of a list option from the top
// of the list
//
// @param ($id obj) $id is the jQuery object of the option to scroll to
//
// @return (integer) returns the pixel offset of the option
//
combobox.prototype.calcOffset = function($id) {
var offset = 0;
var selectedNdx = this.$options.index($id);