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 207: Line 207:
 
border: 1px black solid;
 
border: 1px black solid;
 
list-style: none;
 
list-style: none;
 +
padding-left: 0em;
 
height: auto;
 
height: auto;
 
width: auto;
 
width: auto;
Line 212: Line 213:
 
ul.list li {
 
ul.list li {
 
width: 10em;
 
width: 10em;
 +
padding-left: 1em;
 +
}
 +
ul.list li.current {
 +
    background-color:blue;
 +
}
 +
ul.list li a {
 +
color: black;
 +
}
 +
ul.list li.current a {
 +
color: white;
 
}
 
}
 
button.combobox {
 
button.combobox {
Line 232: Line 243:
 
$("#cb_List").removeClass("hidden");
 
$("#cb_List").removeClass("hidden");
 
$(e.target).attr("aria-expanded", "true");
 
$(e.target).attr("aria-expanded", "true");
$("#cb_List a").get(0).focus();
+
cbUpdateFocus($("#cb_List a").get(0));
 
}
 
}
 
else {
 
else {
Line 250: Line 261:
 
function cbClose() {
 
function cbClose() {
 
$("#cb_List").addClass("hidden");
 
$("#cb_List").addClass("hidden");
 +
$("#cb_List li.current").removeClass("current");
 
$("#cb_Combobox").attr("aria-expanded", "false");
 
$("#cb_Combobox").attr("aria-expanded", "false");
 
$("#cb_Combobox").get(0).focus();
 
$("#cb_Combobox").get(0).focus();
}
+
};
 +
function cbUpdateFocus(element) {
 +
$("#cb_List li.current").removeClass("current");
 +
$(element).closest("li").addClass("current");
 +
element.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.
Line 277: Line 294:
 
if (indexThis - 1 < 0){ indexToBe = 0 }
 
if (indexThis - 1 < 0){ indexToBe = 0 }
 
else { indexToBe = indexThis - 1 };
 
else { indexToBe = indexThis - 1 };
jSet.get(indexToBe).focus();
+
cbUpdateFocus(jSet.get(indexToBe));
 
e.preventDefault();
 
e.preventDefault();
 
break;
 
break;
Line 291: Line 308:
 
if (indexThis + 1 > jSet.length - 1){ indexToBe = indexThis }
 
if (indexThis + 1 > jSet.length - 1){ indexToBe = indexThis }
 
else { indexToBe = indexThis + 1 };
 
else { indexToBe = indexThis + 1 };
jSet.get(indexToBe).focus();
+
cbUpdateFocus(jSet.get(indexToBe));
 
e.preventDefault();
 
e.preventDefault();
 
break;
 
break;
Line 304: Line 321:
 
<body>
 
<body>
 
<div>
 
<div>
<b><span class="comboLabel">Select a Browser:</span></b>
+
<span class="comboLabel">Select a Browser:</span>
 
</div>
 
</div>
 
<div class="comboParent">
 
<div class="comboParent">
Line 338: Line 355:
 
</body>
 
</body>
 
</html>
 
</html>
 
 
 
 
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

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