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 198: Line 198:
 
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 230: Line 230:
 
button.combobox {
 
button.combobox {
 
background-color: white;
 
background-color: white;
width: 11em;
+
width: 9em;
 
height: 1.5em;
 
height: 1.5em;
 
border: none;
 
border: none;
Line 243: Line 243:
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script type="text/javascript">
 
<script type="text/javascript">
function clickCB(e) {
+
function clickCB (e) {
 
if ($("#cb_List").hasClass("hidden")) {
 
if ($("#cb_List").hasClass("hidden")) {
 
$("#cb_List").removeClass("hidden");
 
$("#cb_List").removeClass("hidden");
Line 256: Line 256:
 
};
 
};
 
function keyupCB (e){
 
function keyupCB (e){
if (e.which == 40) {
+
switch (e.which) {
if(e.altKey == true) {
+
case 38:
 +
// Up Arrow
 +
console.log("Up");
 +
var jSet = $("#cb_List a");
 +
var indexThis = jSet.index($("#cb_List a[aria-selected='true']"));
 +
var indexToBe;
 +
if (indexThis - 1 < 0){ indexToBe = 0 }
 +
else { indexToBe = indexThis - 1 };
 +
cbSelectValue(jSet.get(indexToBe));
 
e.preventDefault();
 
e.preventDefault();
clickCB(e);
+
break;
}
+
case 40:
 +
// Down Arrow
 +
console.log("Down");
 +
if(e.altKey == true) { clickCB(e); }
 +
else {
 +
var jSet = $("#cb_List a");
 +
var indexThis = jSet.index($("#cb_List a[aria-selected='true']"));
 +
var indexToBe;
 +
if (indexThis + 1 > jSet.length - 1){ indexToBe = indexThis }
 +
else { indexToBe = indexThis + 1 };
 +
cbSelectValue(jSet.get(indexToBe));
 +
}
 +
e.preventDefault();
 +
break;
 
};
 
};
 
};
 
};
function cbSelectValue(e) {
+
function cbClickValue(e) {
 
e.preventDefault();
 
e.preventDefault();
 +
cbSelectValue(e.target);
 +
}
 +
function cbSelectValue(element) {
 +
console.log($(element));
 
$("#cb_List").find("[aria-selected='true']").attr("aria-selected", "false")
 
$("#cb_List").find("[aria-selected='true']").attr("aria-selected", "false")
$(e.target).attr("aria-selected", "true");
+
$(element).attr("aria-selected", "true");
$("#cb_Content_Placeholder").text($(e.target).text());
+
$("#cb_Content_Placeholder").text($(element).text());
$("#cb_Edit").text($(e.target).text());
+
$("#cb_Edit").text($(element).text());
cbClose();
+
if ($("#cb_List").is(":visible")) { cbClose() };
 
};
 
};
 
function cbClose() {
 
function cbClose() {
Line 287: Line 312:
 
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;
 
case 37 :
 
case 37 :
 
// Left - Do Nothing  
 
// Left - Do Nothing  
 +
console.log("Left Arrow");
 
break;
 
break;
 
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 306: Line 335:
 
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 318: Line 349:
 
case 32 :
 
case 32 :
 
// Spacebar - Activate
 
// Spacebar - Activate
 +
console.log("space");
 
break;
 
break;
 
};
 
};
Line 359: Line 391:
 
});
 
});
 
$("#cb_List a").each(function(){
 
$("#cb_List a").each(function(){
this.addEventListener("click", cbSelectValue);
+
this.addEventListener("click", cbClickValue);
 
this.addEventListener("keyup", cbListKeyUp);
 
this.addEventListener("keyup", cbListKeyUp);
 
});
 
});
Line 366: Line 398:
 
</body>
 
</body>
 
</html>
 
</html>
 
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 22:17, 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

Notes 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.
  • Example utilizes jQuery as a matter of expediency (i.e. developer of the example was able to generate the code by integrating event handler code from previous examples). It is not a requirement of compliant design for this type of structure.
  • 3/27/17 note - example code not currently complete, widget lacks event handler code for arrow keys to increment the value when combobox is collapsed. Update pending

Select a Browser: