Difference between revisions of "ARIA Combobox"

From Level Access Web Labs
Jump to navigation Jump to search
(Example 2, <button> using aria-owns)
(Example 2, <button> using aria-owns)
Line 272: Line 272:
 
function cbListKeyUp(e) {
 
function cbListKeyUp(e) {
 
var jSet = $(e.target).closest("ul").find("a"); //Get root node for parent listbox, then drill back down to find option elements.
 
var jSet = $(e.target).closest("ul").find("a"); //Get root node for parent listbox, then drill back down to find option elements.
console.log(e.which);
 
 
switch (e.which) {
 
switch (e.which) {
 
case 13 :  
 
case 13 :  
 
// Enter - Activate
 
// Enter - Activate
console.log("Enter");
 
 
break;
 
break;
 
case 27 :
 
case 27 :
 
// Escape - Close with no change
 
// Escape - Close with no change
console.log("Escape");
 
 
cbClose();
 
cbClose();
 
break;
 
break;
Line 289: Line 286:
 
case 38:
 
case 38:
 
// Up - Move to Previous in Set
 
// Up - Move to Previous in Set
console.log("Up Arrow");
 
 
var indexThis = jSet.index($(e.target));
 
var indexThis = jSet.index($(e.target));
 
var indexToBe;  
 
var indexToBe;  
Line 299: Line 295:
 
case 39:
 
case 39:
 
// Right - Do Nothing
 
// Right - Do Nothing
console.log("Right Arrow");
 
 
break;
 
break;
 
case 40:  
 
case 40:  
 
// Down - Move to Next In Set
 
// Down - Move to Next In Set
console.log("Down Arrow");
 
 
var indexThis = jSet.index($(e.target));
 
var indexThis = jSet.index($(e.target));
 
var indexToBe;  
 
var indexToBe;  
Line 313: Line 307:
 
case 32 :
 
case 32 :
 
// Spacebar - Activate
 
// Spacebar - Activate
console.log("space");
 
 
break;
 
break;
 
};
 
};

Revision as of 18:14, 27 March 2017

Example 1, Based on native <input>

Note about this example:

  • Bullet's are shown because wiki overrides list-style-type.
  • This solution uses the autocomplete="list" approach with aria-activedescendant on a listbox.

Challenges this solution overcomes:

  • IE does not render display none referred to be aria-activedescendant. This example make the visible child input as the activedescendant when the combobox is closed.
  • IE appears to create a infinite combobox structure when role combobox applied to input. This solution uses a div with role of combobox.
  • JAWS auto forms mode doesn't work correctly when role of combobox is used on input field -- it sees the box as an edit and turns off forms mode when arrow keys are used. This solution uses a div element instead with a role of combo box.
  • activedescendant doesn't work right in IE unless tabindex="-1" is put on each element. That is done in this example.

Reference: WAI - description, properties, keyboard interaction.
http://www.w3.org/TR/wai-aria-practices-1.1/#combobox

ARIA Combobox

  • iOS
  • Android
  • Windows Phone

Example 2, <button> using aria-owns

Note about this example:

  • Example is primarily designed to demonstrate a remediation of a typical <button> bound pop-out section control, e.g. the type of simulated "drop-down" control generated by a UI library such as legacy versions of jQueryUI.

Select a Browser: