I have a generic solution somewhat working. It basically comprises of:
a) Marking elements of templates that I want to enable for dpad with a monotonically increasing id (viewname-move-1, viewname-move-2 and so on) (example here) . This is to avoid caching issues etc - trying to detect the current view predictably seemed very hard.
b) Writing a keyboard handler that highlights items based on view being rendered and sequence id of the element (code here)
c) I have special handling for the side menu as its an overlay for any view
d) I could not rely on just focus() because many of the control items (like the grey buttons you see in the video) are not focusable - they are a hrefs. Keeping a monotonic id and doing a querySelector solves this issue.
Overall this solution works ok-ish as you can see in this video https://youtu.be/Q1IKWDwNGd8
My challenges now:
a) If I go to a view that has input elements, android TV seems to have its own detection mechanism and moves input there which confuses my handling logic. Not quite sure how to solve that
b) I need to figure out how to “activate” <ion-toggle> - clickHandler doesn’t work
c) I don’t yet have a strategy for popups - how do you handle them to that you can discard them by clicking ok?
d) I have since discovered https://github.com/luke-chang/js-spatial-navigation - wondering if anyone used it
thx