Aria-practices: Draft combobox design pattern

[ZoeBijl]

_Copied from original issue: w3c/aria#349_
_From @jnurthen on April 25, 2016 17:47_

Merge Combo and autocomplete
Rewrite description based on ARIA 1.1 spec definition

When working on this issue, there is some old content that may be useful in the file aria-practices-DeletedSectionsArchive.html.
The relevant sections can be seen here:
https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#combobox
And at:
https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#autocomplete

[ZoeBijl]

_From @jnurthen on April 25, 2016 18:21_

Keys:
Space and Alt+Down expand list without changing the value (both optional)
Down (change the selected displayed in the list) and optionally expand the list.

[ZoeBijl]

_From @jnurthen on April 25, 2016 18:24_

the button needs to be mentioned that it should not be in the tab sequence (probably)

[ZoeBijl]

_From @jnurthen on April 25, 2016 18:27_

What does "Provide a label for the combobox by referencing the text field in the combobox. You can use an aria-label to associate this label with the combobox or you may use the HTML element and its for attribute to reference the text field." mean.... needs changing or clarifying.

[ZoeBijl]

_From @carmacleod on April 25, 2016 18:46_

Example 5 for combobox in ARIA 1.1 shows the aria-label case, and a similar example with Tag would work for "the HTML element and its for attribute" case.

[carmacleod]

Please also flesh out the case of a read-only combo box. There's several things to consider:

• the textbox needs to have aria-readonly="true"
• the textbox needs to actually be readonly (i.e. if using input type=text, it needs the readonly attribute)
  ... except that it should handle selecting text, or typing text into the textbox as follows:
  "Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter."

Also please think about about readonly combo boxes that look like/use a button instead of a textbox.
For example I have attached a screen snap of some Windows native readonly comboboxes. The "Theme:" combo does not have focus. The "Color and Font Theme:" combo has focus and is dropped down. Both look and behave like a button with a drop-down arrow (aka "split button"). They do not look like read-only textboxes. The text content cannot be selected.

[carmacleod]

Example of native readonly comboboxes on Mac (in Settings). These also look and feel more like drop-down (popup) buttons than readonly textboxes.

[carmacleod]

Hmmm... VoiceOver actually calls these "pop up button". So perhaps they are not readonly combos at all... I may have to rethink this.

Although for the native readonly combo Windows example, JAWS says:
"Theme colon combo box, Windows, 3 of 6, to change the selection use the arrow keys".

Anyhow, I think some fleshing out of readonly combobox is needed.

[cyberseraphic]

Under "keyboard interaction" can I please request an addition to include what happens when shifting focus away using the Tab key mid-selection - i.e. the combo box retain the currently highlighted selection and the focus shifts to the next focusable element (unlike Enter, where focus is retained on the same element). I understand this to be the standard native behaviour.

[ZoeBijl]

@cyberseraphic on macOS tab doesn’t do anything when a popup button is open (like a preventDefault()). Haven’t tested on other platform yet.

Ah, this is combobox, sorry, got confused. @carmacleod those are indeed popup buttons. This would be a native combobox (go to folder in Finder):

[carmacleod]

@MichielBijl I guess Mac doesn't exactly have a native _read-only_ combo.

The "read-only combo box" pattern I am trying to describe is like an HTML select element.
Here's an example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

If you give focus to an html select, you can:

• drop down the list with alt+up/down (or space),
• then select an option with up/down (or first letter),
• then close the list with alt+up/down (or enter or tab or esc).

But the default ARIA role for an HTML select element is (oddly enough?) "listbox", which doesn't have pop-up behavior.

Sorry, I'm not being very helpful here (just pointing out inconsistencies with no real answers), but I do think it would be useful to add some more thoughts/words to the readonly combobox pattern.

[stowball]

Redesigning the <select> is one of the most common thing that designers do, so having an actual definitive answer of how we should reproduce these in a completely custom style while maintaining full accessibility would be really beneficial. I'm currently struggling with this right now in a project 😞

[weboverhauls]

FYI: This blog post contains a short list of examples of listbox/combobox implementations:
http://www.webaxe.org/accessible-custom-select-dropdowns/

[accdc]

Matt, I read through the Combobox design pattern intro text as you asked and it all looks good to me as is. I can't think of anything that is missing.

[mcking65]

Closed with commit a2af4b3. Will now open a new issue for the task force review.

[mcking65]

Locking comments on this issue; please provide feedback on the current draft in issue #464 or raise a new issue.