left/right arrow keys

[mfulton26]

Description

The paper-listbox element supports traversing its paper-item elements using up/down arrow keys but not left/right arrow keys.

Expected outcome

Pressing left/right arrow keys while a paper-listbox element has focus traverses its paper-item elements the same as up/down arrow keys (left goes to the previous paper-item element while right goes to the next paper-item element).

Actual outcome

No paper-item element traversal is performed (i.e. focus remains on the paper-item element that currently has focus).

Live Demo

https://jsbin.com/zesihajuba/1/edit?html,output

Steps to reproduce

1. Put a paper-listbox element in the page.
2. Add multiple paper-item elements in it.
3. Style the paper-item elements to display inline.
4. Open the page in a web browser.
5. Click the first paper-item element. It receives focus.
6. Press the up/down arrow keys. Focus moves between the paper-item elements.
7. Press the left/right arrow keys. Focus does not move between the paper-item elements.

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Safari 9
• [x] Safari 8
• [x] Safari 7
• [x] Edge
• [x] IE 11
• [x] IE 10

P.S.

I am exploring using the paper-listbox element in a form for have a horizontally stacked listbox for short selections (e.g. ["Yes", "No"], ["Male", "Female"], ["SR22", "FR44", "None"], ["Accept", "Decline"], etc.). Is this an appropriate web component to use for doing such or might you recommend a different one? Thank you.