fix(web): fix asset grid keyboard navigation

[Snowknight26]

Fixes #9446

[Snowknight26]

This change removes the keydown binds in favor of the browser handling those respective keys. This also makes arrow keys work as expected.

However, the element has to be focused first.

Not sure how things like Google Photos get away with having an inner element scroll even though the element that receives the KeyboardEvent is the body, just like Immich does. Tried debugging it and I can't see what they're doing differently to cause scrolling to occur on the "correct" element. Even adding the appropriate role attribute to the section element we want to scroll, changing it so there's only one main element in the DOM, adding tabindex.. nada.

[Snowknight26]

Think I figured it out. It's possible to focus on an element while the keyDown event handler runs, and so long as the event doesn't have preventDefault called on it, it'll be passed to the now-focused element.
This allows us to have an event listener on window that passes focus to the asset grid, that then forwards the KeyboardEvent to the asset grid. With the addition of tabindex="-1", the asset grid is now focusable, and keyboard navigation works.

Currently only PageDown/PageUp trigger the focus, to match the product that shall not be named, but once focus is given to the asset grid, arrow keys and home/end also work as expected.

[danieldietzler]

Awesome, thank you for figuring that out!