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 240: Line 240:
 
<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() {
+
function clickCB(e) {
 
if ($("#cb_List").hasClass("hidden")) {
 
if ($("#cb_List").hasClass("hidden")) {
 
$("#cb_List").removeClass("hidden");
 
$("#cb_List").removeClass("hidden");
Line 252: Line 252:
 
};
 
};
 
};
 
};
function keyupCB (){
+
function keyupCB (e){
if (e.which == 40 && e.altKey == true) {
+
if (e.which == 40) {
e.preventDefault();
+
if(e.altKey == true) {
clickCB();
+
e.preventDefault();
 +
clickCB(e);
 +
}
 
};
 
};
 
};
 
};

Revision as of 18:37, 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.
  • Example utilizes jQuery as a matter of expediency (i.e. developer of the example was able to generate the code from previous design work). It is not a requirement of compliant design for this type of structure.

Select a Browser: