Combobox examples: Visual design review from PR #1255

[zcorpan]

Visual design review of combobox PR #1255

Review the visual presentation to assess whether look and feel is similar to typical modern implementations of the widget. Allow for adjustments to accommodate accessibility requirements in cases where most modern implementations are not sufficiently accessible.

There are 4 examples:

• Editable Combobox With Both List and Inline Autocomplete Example
• Editable Combobox With List Autocomplete Example
• Editable Combobox without Autocomplete Example
• Editable Combobox with Grid Popup Example

The first 3 have the same visual design, so I'll only review the first one of those ("example 1"). The grid popup example ("example 4") has different visual design.

Example 1

First, let's compare the default state of the example side by side in Safari (left), Chrome (middle), and Firefox (right).

The following screenshots are taken with Firefox Nightly on macOS.

Default state

Hover on the combobox field

Hover on the button

Focus on the combobox

Popup open

After typing "Al" and focusing Alabama

Example 4

Default state in Safari (top), Chrome (middle), Firefox (bottom)

There is no provided styling for hover or focus. In Safari and Chrome, the default focus ring is shown. In Firefox, it is not. Removing the border-radius makes Firefox show its default focus ring. This might be a bug in Firefox? (Specifying -webkit-appearance: none has the same effect.)

After focusing and typing the letter "a"

Moving focus to the first cell of the first row

Moving focus to the second cell of the first row

Typical modern implementations of the widget

• Material design exposed dropdown menu
  • There are variations, but it label (if any) appears within the widget, and the dropdown button is also within the widget. The popup usually has the same width as the combobox.
• PolymerElements paper-dropdown-menu demo
  • I think this implements the previous version of Material Design. This demo doesn't include an editable combobox.
• Bootstrap has dropdown buttons but not comboboxes?
• Vaadin Combo Box
• PatternFly Elements pfe-autocomplete
• BluePrint Suggest
• BluePrint Omnibar
  • The popup here has years on the right, similar to Example 4. But it doesn't allow selecting individual cells with left and right arrows.

Analysis

Our examples are not on par with modern design systems/component frameworks.

Example 1:

• It is inconsistent between browsers.
• It is, in my opinion, ugly. It doesn't look modern at all.
• The black outline on hover is too stark and isn't found in other implementations. If anything, a hover effect is usually a subtle change in background color.
• The dropdown button should be inside the combobox.
• The popup should have the same width as the combobox.
• The popup should have a nicer looking border than the thick black border.
• The border style should be changed to look more modern.

Example 4:

• In its default state, it looks reasonably modern, like a normal text field.
• No custom focus style; in Firefox the applied styling but lack of focus style results in no focus indication (other than blinking cursor).
• No indication that it is a combobox; maybe there should be a dropdown button?
• The focus style in the popup (dotted green border) is ugly.
• The ability to focus individual cells is confusing to me - selecting "Fruit" (second cell) results in "Apples" (first cell) being used as the value. Is this a good example for a Grid popup at all? (Maybe this is more of a functional review than design review, though.)

[JAWS-test]

No indication that it is a combobox; maybe there should be a dropdown button?

I think it is very important to have a visual indication for the role. A combobox should be visually different from an input field. A combobox with text input should also be visually distinguishable from a combobox without text input. Just like a <select size=1> should differ from an input field with <datalist>, because the handling is different.

[JAWS-test]

The focus indicator shows insufficient contrasts and thus violates WCAG SC 1.4.11:

• blue background to white background: 2.0:1
• green frame on blue background: 2.6:1

Minimum contrast is 3:1.

If the contrasts are adjusted, it should be noted that the selected element should also be visible in High Contrast Mode, i.e. the focus should not be represented exclusively by a color change.

In addition, WCAG 2.2 requires a minimum area for the contrast indicator (length of the element times 2px). I am unsure whether the green frame meets this requirement.

[mcking65]

Per review by @smhigley in #1255: The selected option within the listbox is not visible in Windows high contrast mode.

[zcorpan]

@carmacleod wrote

the black hover outline appears when hovering over what looks like empty space off to the right of the button (but is actually the combo's label element). This feels unexpected.

This is because the label element is display: block. It's not just unexpected hover style; clicking or tapping there, with the intention of moving focus away from the combobox, has the opposite effect.

[carmacleod]

Wow @zcorpan ! Your commit 73ca367 makes the listbox combos look WAY better!

There's a Windows-Chrome issue (maybe others) with the 2nd and 3rd listbox combo, where the popup is aligned with the left edge of the label. Screenshots below:

[zcorpan]

I have made changes to examples 1-3 to try to address the design issues.

https://rawgit.com/w3c/aria-practices/issue1244-aria1.2-combobox-conversion/examples/combobox/combobox-autocomplete-both.html

It should work with Windows High Contrast Mode in Edge as well.

I haven't changed example 4.

[carmacleod]

I liked the rounder corners... :)
And the different-color background for the combo and the list. :)

[zcorpan]

Yeah though @isaacdurazo said rounded corners are a bit passe. 🙂

[isaacdurazo]

I also think the usage of rounded corners as well as some colors were inconsistent with the design of the rest of the page

[zcorpan]

Thanks @carmacleod! The labels in 2 and 3 should be moved outside of the combobox container in the markup.

[carmacleod]

@isaacdurazo said rounded corners are a bit passe. 🙂

Trends come and go... but science is here to stay. 😉
https://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/

Can we compromise and go with very slightly rounded corners like the middle button in this snap? 😄