Listbox: new DS6 style

[ianmcburnie]

Design team have expressed a preference to use the native listbox (i.e. the tag) for mWeb, but a custom, more branded, look and feel for dWeb. This will also allow us to display flags in the listbox (a common requirement).

As we all know, the

overlay cannot be styled with CSS. In order to retain the features of the tag (e.g. form data, autofill) we would need to hide the actual real listbox and display a facade view instead. This will mean the listbox will be dependent on javascript (like tabs, menu and dialog) but we can at least provide the CSS support in Skin.

At this point in time I believe the facade for the listbox is going to look just like the DS6 menu, therefore we can probably reuse those styles.

seangates commented 6 years ago

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 commented 6 years ago

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.

ianmcburnie commented 6 years ago

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 commented 6 years ago

First pass at things. Should be fairly close to final, though: https://github.com/eBay/skin/commit/a781367aa616606c72a9e2299fd46ed929eed827

seangates commented 6 years ago

Cosed via #50.

ianmcburnie commented 6 years ago

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: https://github.com/w3c/html/issues/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

[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.

[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]

First pass at things. Should be fairly close to final, though: https://github.com/eBay/skin/commit/a781367aa616606c72a9e2299fd46ed929eed827

[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

[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: https://github.com/eBay/skin/commit/7709f1f4a051109ce4ca6d8b176605aa44f16463

[seangates]

Done!