Listbox: new DS6 style about skin

[ianmcburnie]

Listbox will share a lot of styles (if not all) with menu, but has slightly different ARIA semantics which we want to enforce.

Proposal:

Under the hood, both listbox and menu modules will resolve to a dropdown.css (the term 'dropdown' remains abstracted away to end users). This file will utilize grouped selectors, for example:

div.menu__item[role^="menuitem"],
div.listbox__item[role="option"] {

}

The one area where these might deviate is when we want to allow icons before the item text (e.g. country flags). Or maybe we just support that in both, I don't see why not.

[seangates]

Going out on a limb ... what about emoji for flags? I know they would roast me for saying it, but almost all OSes and browsers support them now.

[ianmcburnie]

Nice idea. Will check with design. They probably want to brand it in other ways than just the flag, but I will check that too.

[seangates]

First pass at things. Should be fairly close to final, though: a781367

[seangates]

Cosed via #50.

[ianmcburnie]

So I have been doing a lot of digging around and testing of HTML select/listbox and our current ebayui listbox across screen readers and devices. Ultimately what we have is closest to how OS X treats a select element: as a popup button that expands a menu. Yup pretty much like our current menu component. However, this OS X treatment does not follow the W3C specification. Windows does. Windows treats a select as a readonly combobox.

So it's a difficult situation. Windows screen reader users will not be familiar with our popup button based implementation. Likewise, OS X users might find it odd to hear combobox instead of popup button. But my golden rule is to always go with the spec. If the spec ever happens to change to the OS X treatment, we follow suit. But the windows treatment and spec has been around a LONG time.

So, what this means is that the listbox now becomes quite different from the menu. There was also the issue that we can't give the button a label and a value (which a select can do), because a buttons inner value IS the label. So to accomplish this we have to change the button to a readonly textbox:

Cars

Pressing up and down arrow cycles through options. Pressing SPACE expands the listbox of options.

This means we also go back to the drawing board in skin to style a textbox to look like the expand button. Hopefully this is straightforward.

I am going to update the MIND patterns and hopefully put together a quick prototype.

Also, everything I have written above is for single-select only. I'm hoping multi-select can be achieved by using role="listbox" instead of role="combobox", but more investigation is needed.

Related reading: w3c/html#1013

Key piece from spec:

Allowed ARIA role attribute values:
(with NO multiple attribute and NO size attribute having value greater than 1) combobox or (with a multiple attribute or a size attribute having value greater than 1) listbox

[ianmcburnie]

I updated the mind pattern example:

http://ianmcburnie.github.io/mindpatterns/input/listbox/

And docs:

https://ebay.gitbooks.io/mindpatterns/content/input/listbox.html

So far support seems good in IE+JAWS, FF+NVDA, Safari+VO, Chrome + Chromevox

[seangates]

Thanks, @ianmcburnie!

[seangates]

Current state of things: 7709f1f

[seangates]

Done!