[mediaqueries-5] detect keyboard navigation abilities

[frivoal]

If @media (pointer) (or @media (any-pointer)) evaluates to false, presumably the user is using some sort of keyboard input or similar, and pressing tab (or similar) to navigate the focusable elements in the page. Complex layouts are tedious to navigate this way, so in such situations, authors may want to switch to a simpler, linear design.

However, even if there's no pointer, if the user does have a device that is capable of spatial navigation (as discussed in https://drafts.csswg.org/css-ui-4/#nav-dir or https://github.com/lgeweb/spatial-navigation), then using a complex layout may be fine.

There's currently no media feature enabling authors to detect that.

Proposal for a new media feature:

nav: none | sequential | spatial (or key-navigation instead of nav if we want to be verbose)

@media (nav: sequential) is true if the user has a tab key or equivalent mechanism
@media (nav: spatial) is true if the user can navigate with arrow keys

Both can be true at the same time if the device matches.

cc @tabatkins @jihyerish

[jihyerish]

This could be useful for web pages using the spatial focus navigation, and also when they follow the responsive design.

When there is a page with a complex grid layout which can navigate with arrow keys such as:

If this is shown in the mobile browser, the spatial navigation won't be supported because the mobile is based on the touch interface in general.
Therefore on that case, the page could be implemented with the simpler layout as below, and this nav media feature can help to apply the different layouts.

[upsuper]

One question: Do operating systems provide API to get whether a connected keyboard includes such keys? Or you think it is fine to just return some default value for desktop / mobile platforms, and this is just for other kinds of consoles?

[frivoal]

As far as I know, the following cases exist:

• smartphone / tablet / watch browser: no keyboard, no spatnav
• most desktop browsers: keyboard present, no spatnav
• a few desktop browsers (Presto Opera, Vivaldi): keyboard present, spatnav on shift+arrow
• TV browsers: remote control, spatnav on arrow keys

In all these cases, you know how to answer that media query without having to ask anything from the OS.

There's possibly an exception with laptop computers with a touch screen and a detachable keyboard. If a browser with spatnav was running on one of these, you should return true for @media (nav:spatial) when the keyboard's in, and false when it's disconnected. But if you can still do spatnav from the software keyboard, maybe it should still be true.

Anyway, you can detect that:

• Windows: https://blogs.msdn.microsoft.com/oldnewthing/20150720-00/?p=90871
• Android: https://stackoverflow.com/questions/2415558/how-to-detect-hardware-keyboard-presence

I am sure that for other OSes where this sort of thing might happen, there are APIs as well.