[css-ui-4] Activating spatial navigation

[frivoal]

Some browsers (most desktop or mobile browsers) don't support spatnav at all.

Some browser have so limited inputs (TV / set to box browsers) that the only way they have to interact with a page is through spatnav using arrow keys.

But some, like Presto Opera or Vivladi, have spatnav on shift+arrow keys. They don't put it on arrow keys directly because it is likely that on a fair number of pages that would interfere with the more traditional usage of arrow keys.

It would be useful for the author of the page to be able to signal to a browser that a page has been designed with spatnav in mind, that there is no interference, and that it would be good for the browser to offer spatnav directly on the arrow keys.

Based on the various things explored in LGE's spatnav explainer and related issues, I suggest the following design:

@spat-nav {
  arrow-keys-behavior: auto | nav;
}

auto

UAs that support spatnav may turn it on either on the arrow keys, or on some other UA defined key or key combination, such as shift+arrow.

nav

UAs that support spatnav must turn it on on the arrow keys without a modifier. They may also activate it on additional UA define keys or key or key combination.

(this is a descriptor in an at-rule, rather than an at-rule that directly takes several values because I think we're likely to end up with several spat-nav rules that belong together. See nav-rule and nav-loop in https://github.com/lgeweb/spatial-navigation/blob/master/explainer.md)

[smfr]

@spat-nav, really?

[frivoal]

@smfr bikeshedding most welcome.

[bradkemper]

But some, like Presto Opera or Vivladi, have spatnav on shit+arrow keys.

Scatologically funny typo.

[bradkemper]

I feel like this should be in a regular rule with a selector, instead of an at-rule, so that it can be scoped.

I’m also concerned about how it may disable common arrow key interactions within native widgets or non-native components. Or conversely, how such focusable elements might prevent further navigation by trapping the arrow keys. Changing a SELECT menu or radio buttons typically requires use of the arrow keys. With radio buttons, for instance, right arrow and down arrow both work to go to the next radio button in the group, and the other arrows go to the previous radio button in the group.

[frivoal]

Closing this in favor of the WICG/spatial-navigation#3. Same topic, but in the WICG repo that we've decided to push these things to.