From 847cb900387082887dda04d7d8b18299daaf18df Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Fri, 24 May 2024 15:11:55 -0500
Subject: [PATCH] fix(web): fix asset grid keyboard navigation (#9448)

* fix(web): fix asset grid keyboard navigation

* Ignore eslint rule

* Pass page up/down keys after focusing on grid

* Remove unneeded event listener, use existing class
---
 .../lib/components/photos-page/asset-grid.svelte    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index c707a3bb6c..b2ead89028 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -101,6 +101,12 @@
     }
   };
 
+  const focusElement = () => {
+    if (document.activeElement === document.body) {
+      element.focus();
+    }
+  };
+
   $: shortcutList = (() => {
     if ($isSearchEnabled || $showAssetViewer) {
       return [];
@@ -111,8 +117,8 @@
       { shortcut: { key: '?', shift: true }, onShortcut: () => (showShortcuts = !showShortcuts) },
       { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
       { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(assetStore, assetInteractionStore) },
-      { shortcut: { key: 'PageUp' }, onShortcut: () => (element.scrollTop = 0) },
-      { shortcut: { key: 'PageDown' }, onShortcut: () => (element.scrollTop = element.scrollHeight) },
+      { shortcut: { key: 'PageDown' }, preventDefault: false, onShortcut: focusElement },
+      { shortcut: { key: 'PageUp' }, preventDefault: false, onShortcut: focusElement },
     ];
 
     if ($isMultiSelectState) {
@@ -406,7 +412,8 @@
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
   id="asset-grid"
-  class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
+  class="scrollbar-hidden h-full overflow-y-auto outline-none pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
+  tabindex="-1"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
   bind:this={element}