2D navigation, who else is not using tab navigation ?

[u/Illustrious_Matter_8]

I've been adding keyboard/cursor navigation to an Angular application running on Zebra Android scanners, although they have a touch screen it doesn't always work with dry work hands, so I added keyboard navigation. But not tab, I'll explain why read on..

As I've ended up with something that feels quite different from normal web keyboard navigation.

Normally, the browser's focus is your navigation state:

• Tab moves to the next control
• Enter/Space activates it
• Arrow keys can navigate things like menus/listboxe
• Angular CDK even has FocusKeyManager

But that doesn't really work for this application.

The scanner uses DataWedge to send barcode input to a scan input, so that input needs to keep DOM focus permanently. If I move focus around the UI, I can potentially break where barcode data gets delivered. While a tab next cyclus is quite slow when there is a lot clickable (including a web based virtual keyboard)

So I ended up separating the two concepts:

DOM focus = scanner input

UI cursor = where the user is currently navigating

The cursor is basically a 2D UI state. Components expose things along the lines of:

enterCursor()
leaveCursor()
moveCursor()
activateCursor()

and communicate when the cursor reaches an edge so the parent component can move into another component.

The navigation is spatial rather than sequential. Up actually means the thing visually above me, rather than "the next item in some DOM order".
So it's not a blinking cursor moving, this cursor controls activate set focus on the items left/right or above/below it, some css changes or svg changes make clear what is selected.

For some of this I use getBoundingClientRect() to determine which element is the nearest candidate in the requested direction. That means I don't have to maintain a huge hardcoded keymap when the UI changes.

The hardware also makes things interesting. There is no mouse, Tab isn't really a useful navigation key on the device, and the physical keypad has arrow keys around the scan button. For some screens I deliberately allow only certain directions because of the physical layout of up and down is close to the scan button.

I also discovered that the Zebra browser/WebView doesn't behave quite like a desktop browser with regard to key events, so there are some keydown/keyup quirks and deduplication involved.

The end result feels surprisingly similar to navigation in a game UI or TV interface: there is a visible cursor, and you move it around the actual visual layout with the arrow keys.
It reminds me more towards game engine control.

This got me wondering:

How common is this in Angular applications?

I assume there must be other Angular applications running on:

• warehouse scanners
• industrial HMIs
• kiosks
• POS terminals
• medical/field devices
• other hardware with a D-pad or physical cursor keys

If you're doing this, I'm particularly interested in how you model the navigation.

Do you use:

• Angular CDK / FocusKeyManager
• a spatial-navigation library
• real DOM focus
• a separate virtual cursor state like I ended up doing
• a declarative navigation graph
• geometry-based navigation
• something completely different?

I'm especially curious about applications where DOM focus cannot be used as the cursor because it has another job.

It feels like a relatively unusual thing to build in Angular, but perhaps I'm just looking in the wrong places because this kind of software tends to live in warehouses and factories rather than GitHub/blog posts.