Closed ianmcburnie closed 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.
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.
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.
First pass at things. Should be fairly close to final, though: https://github.com/eBay/skin/commit/a781367aa616606c72a9e2299fd46ed929eed827
Cosed via #50.
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:
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
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
Thanks, @ianmcburnie!
Current state of things: https://github.com/eBay/skin/commit/7709f1f4a051109ce4ca6d8b176605aa44f16463
Done!
Design team have expressed a preference to use the native listbox (i.e. the
As we all know, the
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.