Add spatial navigation to controller page

[knuton]

Adds spatial navigation via the focus-shift library.

Currently it is not possible to tick radio buttons/checkboxes, because this would require pressing Space. We could use the same method as in the apps to perform a synthetic click when Enter is pressed:

document.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      const activeElement = document.activeElement;
      if (activeElement instanceof HTMLInputElement &&
          (activeElement.type === 'checkbox' || activeElement.type === 'radio')) {
          activeElement.click();
          event.preventDefault();
      }
    }
});

It doesn't make a practical difference right now, because one cannot do anything with the checkbox-unfolded sections (network settings, requiring inputs).

Checklist

• Changelog updated
• Code documented
• User manual updated

[guyonvarch]

Working great overall!

I can’t update select inputs, I need to press Space:

[guyonvarch]

We can’t scroll through the Changelog, we may need a specific component, when having the focus, pressing down would scroll down, and pressing up would scroll up.

We could think about that later if we want to make it work as well as with a mouse.

[guyonvarch]

We don’t have a package manager to deal with the focus-shift dependency, I think that’s OK. But I couldn’t find the version.

It could be on the header of the file, or in the filename.

[knuton]

We don’t have a package manager to deal with the focus-shift dependency, I think that’s OK. But I couldn’t find the version.

It's in the commit: e2a2dbe

[knuton]

I can’t update select inputs, I need to press Space:

That's interesting, it worked for me. Which browser is that with?

[guyonvarch]

It's in the commit: e2a2dbe

OK, though it would be more visible in the filename, or in the header of the file, more in the face.

[guyonvarch]

That's interesting, it worked for me. Which browser is that with?

With firefox. But testing using the kiosk, which is the target browser, it works as expected.

[guyonvarch]

Wondering if Shutdown could be part of the list, so that going up from Shutdown would go to Changelog.

2024-09-03_11-59-10.mp4

[guyonvarch]

On the Print label page, we can access any field, and also increase and decrease labels, but we sometimes have to find a path:

2024-09-03_12-02-54.mp4

[knuton]

OK, though it would be more visible in the filename, or in the header of the file, more in the face.

Agree that in your face is good, but have an uneasy feeling with header (because it requires editing the file) and filename (SHA fragments are not self-documenting, and we don't currently have tagged versions of focus-shift -- maybe that's the problem). Wonder if we could use Nix to bring in the dependency instead.

Would leave as is for now. It's not ideal, but it's low overhead and seems manageable as long as there is one single JS dependency we control.

I can explore using Nix (or Bower? 😄) if you think the commit message is too out of sight.

Or we make a versioned release of focus-shift and vendor that with version in filename.

With firefox. But testing using the kiosk, which is the target browser, it works as expected.

I checked, we have the same issue with Firefox in Play.

We can look into extending the glue to map Enter to Space a click there, and we can also use it here. I am still not convinced this glue should be part of the focus-shift library -- though at least in the way we use it, we would always want both the spatial navigation and the extended Enter key support.

On the Print label page, we can access any field, and also increase and decrease labels, but we sometimes have to find a path:

We can just drop that part of the controller, I think.

Wondering if Shutdown could be part of the list, so that going up from Shutdown would go to Changelog.

Yes, it can, thanks! 5b5257a

[knuton]

On the Print label page, we can access any field, and also increase and decrease labels, but we sometimes have to find a path:

We can just drop that part of the controller, I think.

#175

[guyonvarch]

We can look into extending the glue to map Enter to Space a click there, and we can also use it here. I am still not convinced this glue should be part of the focus-shift library -- though at least in the way we use it, we would always want both the spatial navigation and the extended Enter key support.

I would let things as it is for the moment, and maybe come to this later.

Yes, it can, thanks! 5b5257a

👍

Or we make a versioned release of focus-shift and vendor that with version in filename.

That should be the simplest thing to do, voting for this. I created an issue to track this.