Develop examples of ARIA 1.0 combobox design pattern

[mcking65]

The most current work from @jongund with editorial revisions by @mcking65 is in master.

• ARIA 1.0 Combobox with Both List and Inline Autocomplete
• ARIA 1.0 Combobox with List Autocomplete
• ARIA 1.0 Combobox Without Autocomplete

Open issues

• Page Up/Down behaving like Home/End
• Typeahead keeping focus in list and restricting input.
• Missing autocomplete="none" example (see description below).
• When focus is in the listbox, Left/Right arrow keys should be nulling out activedescendant and putting visual focus back in the textbox. Please see the kb documentation table. Also reference the way keyboard works in the 1.1 listbox examples as well.
• When focus is in the listbox, Editing keys, e.g., backspace, delete, should be nulling out activedescendant and putting visual focus in the textbox.
• In the autocomplete both example, the inline string is not appearing in the textbox, or if it is, not in a way that JAWS can see it. Please compare to the example 3 on the 1.1 style listbox page. If you type “Al” for example, “abama” should be in the textbox after the cursor and “Alabama” should be highlighted in the listbox and have aria-selected on it. Then, if you immediately press tab, “Alabama” should be accepted as the value for the textbox.
• Suggestion: in the state selector examples, consider enabling display of all states when the combo is empty and the user presses down or activates the open button.

Requirements

In the ARIA 1.0 pattern, the combobox role is on the text field and the textfield owns a listbox element. Listbox is the only allowed type of popup.

<input role="combobox" type="text" 
  aria-owns="list" <!-- ID of listbox that will display suggestions. -->
  aria-autocomplete="list" <!-- see example 1 description below -->
  aria-expanded="false" <!-- the suggestion list is not displayed -->
  aria-activedescendant="" <!-- With DOM focus on input, if null or missing, AT focuses on input. 
                           When listbox is displayed and user highlights option, set to ID of that option. -->
  >
<ul id="list" role="listbox">
  <!-- will get populated with items that have option role -->
</ul>

For this issue, we need a page with 3 examples to demonstrate the 3 different forms of autocomplete: list, both, and none. Note that inline does not apply to comboboxes because comboboxes all have a list popup.

commit 93a8d91 added three HTML template files for these examples. Find them in your clone of the repo at:
aria-practices/examples/combobox/aria1.0pattern/

Summary of Needed Implementations

Example 1: aria-autocomplete=list

In this implementation, as the user types in the input field, a list of suggestions is displayed.
The value in the input field is not completed unless the user selects a value from the list.
A value in the list is not preselected or highlighted as the user types in the input.
To choose a suggestion, the user must arrow through the list or click.
If the user has moved focus into the list, continuing to type will return focus to the input.
Note: setting aria-activedescendant null will cause AT to tell users focus is in the input.

Example 2: aria-autocomplete=both

In this example, as the user types, a list appears and the first value in the list is highlighted. The portion of that value required to complete the input also appears after the caret in the input, and that portion is in a selected state. Pressing enter or tab will set that value. Pressing down arrow will select the next value in the list and change the value in the input at the same time.

Example 3: aria-autocomplete=none

In this example, a suggestion list does not automatically appear, but it is available. The user can press down arrow or click the down arrow icon. There is no relationship between the value typed in the input and the values in the list. A good scenario for this example is a previous search terms list. It would be good if the user could press a button outside the combo to mimic completing an action, like searching, and the value the user provided in the input is added to the suggestion list.

Important references

Even though this issue is for development of an ARIA 1.0 style combobox, it is important to closely read the ARIA 1.1 text for aria-autocomplete.

[mcking65]

@jongund, Please use the combo-examples-1.0 branch as the base branch for pull requests for this issue.
https://github.com/w3c/aria-practices/commits/combo-examples-1.0

[mcking65]

@jongund, the list autocomplete example is working for me. However, the autocomplete=both example is behaving exactly like the list one.

When list is combined with inline autocomplete, if I type "A", I would expect "labama" to appear in the textbox after the cursor and for "Alabama" to have aria-selected="true" in the listbox. I do not see either of these behaviors.

[mcking65]

@jongund,

There are several differences in kb behavior between the pattern and the example.

alt+up is an optional key for collapsing the listbox, like is provided in chrome and ff for html select. In your current implementation, alt+up is opening instead of closing the popup. For now, I am removing alt+up from the kb table.

Page Up/Down are behaving the same as home/end. We should either remove them or make them scroll up/down some number of options in the list.

Typeahead is keeping focus in the list and only moving focus if there is a match in the list. For this type of combo, the pattern says that typing any char types that char in the textbox and places focus in the textbox. Delete and backspace should behave in a similar way, e.g., perform the destructive command in the textbox and put the focus in the textbox.

[jongund]

Matt, I can update the example if you want alt+up to close the list box Jon Gunderson Sent from my iPhone On Oct 24, 2017, at 12:33 PM, Matt King <notifications@github.com<mailto:notifications@github.com>> wrote: @jongund<https://github.com/jongund>, alt+up is an optional key for collapsing the listbox, like is provided in chrome and ff for html select. In your current implementation, alt+up is opening instead of closing the popup. For now, I am removing alt+up from the kb table. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#99 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABcE7M8rBGLseT3y7FZ7Yng4RsedkDNAks5svhFngaJpZM4JvzI6>.