[select] Specifying direction for arrow key navigation

[una]

Proposal

the ability to set directionality for the arrow key/tab navigation of select options:

Syntax is very strawman, but I wold like the ability to decide if the direction should be block, inline, or both.

::picker(select) {
  tab-direction: block || inline || block inline || both; /* alternatively both = block inline */
  tab-start: start || end;
}

"tab-direction"

• tab-direction: block = also the default (current behavior), arrow keys up and down move through options in one direction
• tab-direction: inline = arrow keys left and right move through options in one direction
• tab-direction: block inline = left arrow behavior, and bottom arrow = right arrow behavior move through options in one direction
• tab-direction: both = arrow keys up/left/down/right move in multiple directions (I'm not sure how this would be implemented to be honest, but it would be neat!)

** horizontal and vertical may be better than inline and block*

"tab-start"

• tab-start: start = navigation starts at first item (current default)
• tab-start: end = navigation starts at last item, and moves to first

Examples

Demo 1: AirBnb select demo

This one would benefit from tab-direction: both

Demo 2: Rotated cards (Canary only, uses size attribute, will probably break)

Here is a select with options that are accessed via scroller. The intersection of select (arrow keys up and down) and horizontal scroll (arrow keys left and right) don't play well together.

In this example, I can visually move through the list, snapping the items into place using the left and right arrow keys. I can tab through the items using the up and down arrows, but visually the items don't snap into place.

Demo 3: Radial menu

This menu should go right to left horizontally:

tab-direction: inline;
tab-start: end;

Prior art

I hoped reading-flow() would help here but it doesn't seem to.

[lukewarlow]

This is potentially related to the recent discussion on an orientation attribute. It would solve at least some of these issues and also make sure the aria-orientation is correct.

But the case where you want both to work is interesting (and how stuff like radio button navigation already works).

[dizhang168]

As currently designed, CSS reading-flow is meant for tab navigation. Since navigating between options in select uses arrow keys, the feature is not helpful (yet). We are looking at improving it to handle arrow key navigations (#1201). There is a lot of complexity though since arrow keys is used everywhere in form controls.

[josepharhar]

Thanks for opening this!

We could just make arrow right act the same as arrow down and make arrow left act the same as arrow up by default in order to achieve the tab-direction: block inline behavior (i think). Arrow right and left don't currently do anything.

Making the arrow keys follow the grid layout in the airbnb demo sounds more challenging and interesting. I wonder if arrow up and down should be able to iterate every option, which we could probably still do if we wanted in this case. I also wonder if we could make arrow keys follow the grid layout without the need for an opt in.