Difference between revisions of "ARIA Combobox"

From Level Access Web Labs
Jump to navigation Jump to search
(Example 2, <button> using aria-owns)
Line 196: Line 196:
 
background-color: white;
 
background-color: white;
 
border: 1px black solid;
 
border: 1px black solid;
width: 12em;
+
width: 10em;
 
line-height: 1.6em;
 
line-height: 1.6em;
 
position: relative;
 
position: relative;
Line 209: Line 209:
 
height: auto;
 
height: auto;
 
width: auto;
 
width: auto;
 +
}
 +
ul.list li {
 +
width: 10em;
 
}
 
}
 
button.combobox {
 
button.combobox {
 
background-color: white;
 
background-color: white;
width: 10em;
+
width: 9em;
 
height: 1.5em;
 
height: 1.5em;
 
border: none;
 
border: none;
Line 243: Line 246:
 
$("#cb_Content_Placeholder").text($(e.target).text());
 
$("#cb_Content_Placeholder").text($(e.target).text());
 
$("#cb_Edit").text($(e.target).text());
 
$("#cb_Edit").text($(e.target).text());
 +
cbClose();
 +
};
 +
function cbClose() {
 
$("#cb_List").addClass("hidden");
 
$("#cb_List").addClass("hidden");
 
$("#cb_Combobox").attr("aria-expanded", "false");
 
$("#cb_Combobox").attr("aria-expanded", "false");
 
$("#cb_Combobox").get(0).focus();
 
$("#cb_Combobox").get(0).focus();
};
+
}
 
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");
 
console.log("Enter");
 +
break;
 +
case 27 :
 +
// Escape - Close with no change
 +
console.log("Escape");
 +
cbClose();
 
break;
 
break;
 
case 37 :
 
case 37 :
Line 274: Line 286:
 
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 325: Line 338:
 
</body>
 
</body>
 
</html>
 
</html>
 +
 +
 +
  
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 18:02, 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: