Combobox with a Read Only Input

[shleewhite]

There should be an option to have a combobox where a user can select an item, but not type in the input. This mimics the behavior of an HTML Select, but allows flexibility to style the listbox (currently, you cannot override the default HTML select styles).

Examples:

• https://www.lightningdesignsystem.com/components/picklist/
• https://developer.microsoft.com/en-us/fabric#/controls/web/combobox (combobox with AllowFreeForm false)
• https://ux.mailchimp.com/patterns/forms (Dijit select)
• https://v2.grommet.io/select
• https://canvas.hubspot.com/components/forms (UISearchableSelectInput)

My main question is: How do we communicate that the user cannot type, but that they can select an option?

[sinabahram]

A quick note that even in default HTML selects, the user can still type, but just not as raw input, instead it’s treated as type-ahead search with a timeout that’s platform-specific, but feels right when it’s between 400MS and 800MS, IMHO, if only one letter is typed, it’s the same as first-letter navigation. Such a construct should support the above.

[SiTaggart]

Given that the default role of a select is Combobox, which aren’t read only, I’ve always wondered why the role of Combobox on its own isn’t good enough as it entirely mimics the native control.

The aria-autocomplete property adds additional information needed to communicate you can type into the field, so the lack of autocomplete should be fine as the default, with no read only property.

You can prevent the typing in the input with JavaScript, and hook into the event still to perform the behavior that @sinabahram mentions.

[shleewhite]

@SiTaggart But it feels weird to prevent users from typing in the input with JavaScript... But if this is the preferred pattern can an example be added to the ARIA Authoring Practices? Just so that the pattern is documented.

[smhigley]

I tested multiple variations of exactly this pattern last year in a usability study (and did straightforward AT support testing). I think we should implement this with role="combobox" on a <div> element, not an <input readonly>. I agree with @sinabahram about implementing typing to autoselect options.

More here, with sample implementations: https://www.24a11y.com/2019/select-your-poison-part-2/

[carmacleod]

Possible dup of #1026 ?

[mcking65]

@smhigley commented:

I tested multiple variations of exactly this pattern last year in a usability study (and did straightforward AT support testing). I think we should implement this with role="combobox" on a <div> element, not an <input readonly>.

100% agree. We could also consider using a button instead of a div.

I agree with @sinabahram about implementing typing to autoselect options.

Mee too!

[mcking65]

@carmacleod wrote:

Possible dup of #1026 ?

Yes, duplicate. Closing and will reference with a description of discussion.