Visual Design for combo box

[jessegreenberg]

From #64, this issue will collect thoughts for single design. #64 has grown quite a bit, and we would like to keep that specific to the HTML impelemntation while this issue will be for visual mockups.

@jessegreenberg will move some of the images and summarize thoughts from that issue.

[jessegreenberg]

Notes from 1/30/18 meeting:

@terracoda said we don't need the outer focus on the list.

[jessegreenberg]

@terracoda also wondered if we needed a different visual indicator to distinguish between what is focused and what is selected when navigating the menu with arrow keys.

[jessegreenberg]

Removing my assignment since this is about visual design. @emily-phet can you please sort this issue?

[terracoda]

Copying notes from #64
Things to consider for the issue about Visual Design

• The visual focus indicator must always be visible.
• The selected state must be visually distinct from the focus indicator.
  https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_vs_selection

Our list box currently has no visual difference between the focused item in the list and the selected item in the list.

[terracoda]

@jessegreenberg, I can move the necessary visuals from issue #64, so leave that to me.

[terracoda]

I don't think we are exploring this further at this time, so closing for now.
We have an accessible combobox in phetsims/molarity