Combobox role on the input element

Structure

<div class="labels">
    <label id="cbolbl" for="comboex">Job Category:</label>
</div>

<div>
    <input type="text" 
           value="Any" 
           readonly="readonly" 
           size="50" 
           aria-owns="listchoices" 
           aria-expanded="false" 
           role="combobox" 
           id="comboex">
    <img role="button" class="dropdown" id="comboexbtn" alt="" src="drop.jpg">
</div>

<ul style="display: none" aria-multiselectable="true" aria-labelledby="cbolbl" role="listbox" id="listchoices" aria-activedescendant="l1" class="ckrbList">
    <li id="l1" tabindex="0" aria-selected="false" aria-checked="false" aria-setsize="5" aria-posinset="1" role="option">
        <img src="unchecked.gif" alt="">
        Actuarial
    </li>
    <li id="l2" tabindex="-1" aria-selected="false" aria-checked="false" aria-setsize="5" aria-posinset="2" role="option">
        <img src="unchecked.gif" alt="">
        Administrative/Office/Clerical
    </li>
    <li id="l3" tabindex="-1" aria-selected="false" aria-checked="false" aria-setsize="5" aria-posinset="3" role="option">
        <img src="unchecked.gif" alt="">
        Audit/Compliance/Legal
    </li>
    <li id="l4" tabindex="-1" aria-selected="false" aria-checked="false" aria-setsize="5" aria-posinset="4" role="option">
        <img src="unchecked.gif" alt="">
        Call center/Sales and service
    </li>
    <li id="l5" tabindex="-1" aria-selected="false" aria-checked="false" aria-setsize="5" aria-posinset="5" role="option">
        <img src="unchecked.gif" alt="">
        Training Programs/Internship
    </li>
</ul>

Keyboard usage

The following keystrokes are used in this combobox example.

Combobox keystrokes
Element Keystroke Action
Edit field ENTER or SPACE Opens the dropdown list if it's currently closed; otherwise, opens the dropdown list.
Edit field ESC Closes the dropdown list if it is already opened.
Edit field TAB and SHIFT + TAB Closes the dropdown list if it is already open, and moves focus to the next and previous interface elements respectively.
Edit field DOWN CURSOR or UP CURSOR Moves focus to the listbox, opening the list if it's not already open.
Option SPACE Toggles the currently focused item's aria-checked state between true and false.
Option ENTER Toggles the currently focused item's aria-checked state between true and false, and then closes the dropdown list.
Option ESC Closes the dropdown list if it is already opened.
Option TAB and SHIFT + TAB Closes the dropdown list if it is already open, and moves focus to the next and previous interface elements respectively.
Option DOWN CURSOR or UP CURSOR Moves focus to the next or previous item in the listbox, respectively. The behavior is cyclic around the dropdown items.

Back to WAI-ARIA examples.