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.