Table row select arrow key support

[thejcannon]

Howdy!

When using table in select-mode "range", it would be awesome to be able to use the arrow keys while I'm holding down "Shift" to highlight multiple rows.

In my app, I intend to add a listener for the "enter" key on the table to perform some action based on the selected rows, and I'd love to only have to use the mouse to click the beginning row (using the keyboard to select the rows and then hit "Enter").

[thejcannon]

/CC @lianee

[lianee]

When you click a row, it becomes selected (blue selection rectangle), you can then use tab or shift-tab to move to the next or previous row, and use return or space to (de)select a row.
It is the standard behavior for aria controls.

[thejcannon]

Sure, but if the table has elements which might want to be selected (like one or more links) then you have extra tabs. Not to mention that shift is used for both highlight and reverse. So if I want to extend the range to the next element:

• release Shift
• Tab (possibly multiple times)
• Press and hold Shift
• Space
• (rinse and repeat)

I guess I'm approaching the table as more of a "spreadsheet" than just a table, and that might be asking a bit too much 😄.

[tmorehouse]

You also have to handle if the user happens to be inside an input... the arrow up/down would have to listen on the tr elements, and if the TR has focus (i.e. it is the document.activeElement)

[tmorehouse]

Just thinking about this. We could add an up/down keydown listener to the tbody > tr elements (when in selectable mode, or the rows have a row-clicked listener - which is when we add tabindex="0" to each row).

This would allow the up/down cursor keys to focus the prev/next tbody > tr (if the event.target === the tr element). This would allow users to move between the rows easily. The rows also respond to keydown.enter which triggers a native click on the row (just like enter does on buttons, etc)

in range mode, the person could click, say, the first row via ENTER (if the row has focus), and then cursor down two rows, and then press SHIFT + ENTER, which would select rows 1 through 3. CTRL+ENTER would also work as expected in range mode.

Similar for single and multi select modes as well (just with out the SHIFT or CTRL modifiers)

[thejcannon]

You guys rock ❤️

[mungra]

I know this issue is closed, but was wondering if there is a way to highlight rows when using the arrow keys. something similar to the hover event?