feat(value-list, pick-list): support ↑↓ arrow keys for navigation and value selection when multiple mode is disabled

[driskull]

Related Issue: #873

Summary

This updates the pick/value-list components to support item navigation with the up/down arrow keys. When multiple is disabled, moving an item will also affect item selection (akin to radio groups).

Notable changes

• Added setFocus to lists and items.
• The wrapped "calciteListItemChange" event used by the value-list is modified before it continues bubbling to adjust the item instance accordingly since it was always a pick-list-item instance.

[driskull]

@jcfranco this is working but needs the following still:

• Tests
• Only the selected item should be able to be tabbed to when multiple is disabled.
  • If no item is selected, the first item should be focusable.
  • This is how native radio elements work. Only the selected radio can be focused and using the arrow keys goes to the next item and selects it.

[jcfranco]

@driskull Can you review? 🙇

[driskull]

Code looks good! 👍

@jcfranco the only concern I have is that maybe the control slot should receive focus for pick list?

For example, I can't keyboard to the "X" icon without selecting that item first.

[jcfranco]

the only concern I have is that maybe the control slot should receive focus for pick list?
For example, I can't keyboard to the "X" icon without selecting that item first.

Could you walk me through that? When you tab into a list with removable items, you'd want the X to be focused and then ↑ ↓ would move between other item's Xs?

[driskull]

When you tab into a list with removable items, you'd want the X to be focused and then ↑ ↓ would move between other item's Xs?

Yeah, I'm not sure what would be ideal. Maybe we could proceed with how you have it and then we can consult with Arjav?

[jcfranco]

Sounds good. 👌

[jcfranco]

Approving on behalf of @driskull. 🤜:boom: 🤛

[jcfranco]

Mother-tested, self-approved!