Combobox with aria-autocomplete="none" (Bad example....)

Taken (and changed and abused) from OpenAjax Alliance Accessibility Task Force

This page has two examples. On the first example:

Wyoming option does not have tabindex=-1
List box does not have role="listbox". Options are not in correct container

Examples

This is example implements a combobox widget with aria-autocomplete=“none”. The edit box is readonly. The application is required to manage focus for the list box so assistive technologies can follow the currently selected option. For clarity, this example was designed not to update the edit box until the user makes a choice from the list.

Thing to think about: How to recognize a scripted combo box that is not using ARIA?

Second example

no label for button
no liable for listbox
Script does not change tabindex on focus
Arrow keys and keyboard support is missing
On focus /select, the states do not toggle

State:

Example Markup

ARIA 1.0: [aria-expanded]
ARIA 1.0: [aria-labelledby]
ARIA 1.0: [aria-owns]
ARIA 1.0: [role="combobox"]
ARIA 1.0: [role="listbox"]
ARIA 1.0: [role="option"]

Specifications

`combobox` (role)

A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. See related listbox.

combobox is the combined presentation of a single line textfield with a listbox popup. The combobox may be editable. Typically editable combo boxes are used for autocomplete behavior, and authors SHOULD set aria-autocomplete attribute on the textfield.

If an author sets a combobox's value of aria-autocomplete to 'none' (default), authors MUST manage and set focus on the associated listbox, so assistive technologies can follow the currently selected value.
If an author sets a combobox's value of aria-autocomplete to 'inline' or 'both', authors MUST update the value of the focused textfield, so assistive technologies can announce the currently selected value.

If an author sets a combobox's value of aria-autocomplete to 'list', user agents or assistive technologies MUST follow the aria-activedescendant of the combobox, and authors SHOULD associate the combobox textfield with its listbox using aria-owns. For example:

<input type="text" aria-label="Tag" role="combobox" aria-expanded="true"
  aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option">
<ul role="listbox" id="owned_listbox">
  <li role="option">Zebra</li>
  <li role="option" id="selected_option">Zoom</li>
</ul>

Note: In XForms [XFORMS] the same select can have one of 3 appearances: combo-box, drop-down box, or group of radio-buttons. Many browsers allow users to type ahead to existing choices in a drop-down select widget. This specification does not constrain the presentation of the combo box.

To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus.

Note: Elements with the role combobox have an implicit aria-haspopup value of true.

Characteristics of combobox
Characteristic	Value
Superclass Role:	`select`
Related Concepts:	HTML select XForms select
Required Owned Elements:	`listbox` `textbox`
Required States and Properties:	`aria-expanded` (state)
Supported States and Properties:	`aria-autocomplete` `aria-required`
Inherited States and Properties:	`aria-activedescendant` `aria-atomic` `aria-busy` (state) `aria-controls` `aria-describedby` `aria-disabled` (state) `aria-dropeffect` `aria-flowto` `aria-grabbed` (state) `aria-haspopup` `aria-hidden` (state) `aria-invalid` (state) `aria-label` `aria-labelledby` `aria-live` `aria-owns` `aria-relevant`
Name From:	author
Accessible Name Required:	True
Implicit Value for Role:	Default for `aria-haspopup` is `true`.

`option` (role)

A selectable item in a select list.

Authors MUST ensure elements with role option are contained in, or owned by, an element with the role listbox. Options not associated with a listbox might not be correctly mapped to an accessibility API.

Characteristics of option
Characteristic	Value
Superclass Role:	`input`
Subclass Roles:	`radio` `treeitem`
Base Concept:	HTML option
Related Concepts:	`listitem` XForms item
Required Context Role:	`listbox`
Supported States and Properties:	`aria-checked` (state) `aria-posinset` `aria-selected` (state) `aria-setsize`
Inherited States and Properties:	`aria-atomic` `aria-busy` (state) `aria-controls` `aria-describedby` `aria-disabled` (state) `aria-dropeffect` `aria-flowto` `aria-grabbed` (state) `aria-haspopup` `aria-hidden` (state) `aria-invalid` (state) `aria-label` `aria-labelledby` `aria-live` `aria-owns` `aria-relevant`
Name From:	contents author
Accessible Name Required:	True