add: triggered based focus.

Author: ItzNotABug

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte

@@ -72,9 +72,8 @@
     import { chunks } from '$lib/helpers/array';
     import { Submit, trackEvent } from '$lib/actions/analytics';
 
-    import IndexesSuggestions from '../(suggestions)/indexes.svelte';
-    import { showIndexesSuggestions, tableColumnSuggestions } from '../(suggestions)';
     import { isTabletViewport } from '$lib/stores/viewport';
+    import IndexesSuggestions from '../(suggestions)/indexes.svelte';
 
     let editRow: EditRow;
     let editRelatedRow: EditRelatedRow;
@@ -87,6 +86,33 @@
 
     let columnCreationHandler: ((response: RealtimeResponse) => void) | null = null;
 
+    // manual management of focus is needed!
+    const autoFocusAction = (node: HTMLElement, shouldFocus: boolean) => {
+        const button = node.querySelector('button');
+        if (!button) return;
+
+        const handleBlur = () => button.classList.remove('focus-visible');
+        const applyFocus = (focus: boolean) => {
+            if (focus) {
+                button.classList.add('focus-visible');
+                button.focus();
+            } else {
+                button.classList.remove('focus-visible');
+            }
+        };
+
+        button.addEventListener('blur', handleBlur);
+        applyFocus(shouldFocus);
+
+        return {
+            update: applyFocus,
+            destroy() {
+                button.removeEventListener('blur', handleBlur);
+                button.classList.remove('focus-visible');
+            }
+        };
+    };
+
     onMount(() => {
         expandTabs.set(preferences.getKey('tableHeaderExpanded', true));
 
@@ -464,47 +490,56 @@
         {@const isLastRow = currentIndex >= rows.length - 1}
 
         {#if !$isTabletViewport}
-            <Button
-                icon
-                text
-                size="xs"
-                on:click={() => {
-                    if (currentIndex > 0) {
-                        databaseRowSheetOptions.update((opts) => ({
-                            ...opts,
-                            row: rows[currentIndex - 1],
-                            rowIndex: currentIndex - 1
-                        }));
-                    }
-                }}
-                disabled={isFirstRow}>
-                <Icon icon={IconChevronUp} />
-            </Button>
-
-            <Button
-                icon
-                text
-                size="xs"
-                on:click={() => {
-                    if (currentIndex < rows.length - 1) {
-                        databaseRowSheetOptions.update((opts) => ({
-                            ...opts,
-                            row: rows[currentIndex + 1],
-                            rowIndex: currentIndex + 1
-                        }));
-                    }
-                }}
-                disabled={isLastRow}>
-                <Icon icon={IconChevronDown} />
-            </Button>
+            {@const shouldFocusPrev = !$databaseRowSheetOptions.autoFocus && !isFirstRow}
+            {@const shouldFocusNext =
+                !$databaseRowSheetOptions.autoFocus && isFirstRow && !isLastRow}
+
+            <div use:autoFocusAction={shouldFocusPrev} class:nav-button-wrapper={shouldFocusPrev}>
+                <Button
+                    icon
+                    text
+                    size="xs"
+                    on:click={() => {
+                        if (currentIndex > 0) {
+                            databaseRowSheetOptions.update((opts) => ({
+                                ...opts,
+                                row: rows[currentIndex - 1],
+                                rowIndex: currentIndex - 1
+                            }));
+                        }
+                    }}
+                    disabled={isFirstRow}>
+                    <Icon icon={IconChevronUp} />
+                </Button>
+            </div>
+
+            <div use:autoFocusAction={shouldFocusNext} class:nav-button-wrapper={shouldFocusNext}>
+                <Button
+                    icon
+                    text
+                    size="xs"
+                    on:click={() => {
+                        if (currentIndex < rows.length - 1) {
+                            databaseRowSheetOptions.update((opts) => ({
+                                ...opts,
+                                row: rows[currentIndex + 1],
+                                rowIndex: currentIndex + 1
+                            }));
+                        }
+                    }}
+                    disabled={isLastRow}>
+                    <Icon icon={IconChevronDown} />
+                </Button>
+            </div>
         {/if}
     {/snippet}
 
     {#key currentRowId}
         <EditRow
             bind:this={editRow}
             bind:row={$databaseRowSheetOptions.row}
-            bind:rowId={$databaseRowSheetOptions.rowId} />
+            bind:rowId={$databaseRowSheetOptions.rowId}
+            autoFocus={$databaseRowSheetOptions.autoFocus} />
     {/key}
 </SideSheet>
 
@@ -574,3 +609,10 @@
 </Dialog>
 
 <IndexesSuggestions />
+
+<style lang="scss">
+    // not the best solution but needed!
+    .nav-button-wrapper :global(button.focus-visible) {
+        outline: var(--border-width-l) solid var(--border-focus);
+    }
+</style>

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte

@@ -92,7 +92,7 @@
                 </Layout.Stack>
 
                 {#if topEndActions}
-                    <Layout.Stack direction="row" gap="m" alignItems="center" inline>
+                    <Layout.Stack direction="row" gap="xs" alignItems="center" inline>
                         {@render topEndActions()}
                     </Layout.Stack>
                 {/if}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/edit.svelte

@@ -25,10 +25,12 @@
 
     let {
         row = $bindable(),
-        rowId = $bindable(null)
+        rowId = $bindable(null),
+        autoFocus = true
     }: {
         row?: Models.Row | null;
         rowId?: string | null;
+        autoFocus?: boolean;
     } = $props();
 
     let loading = $state(false);
@@ -82,7 +84,9 @@
     $effect(() => {
         if (row) {
             work = initWork();
-            requestAnimationFrame(() => focusFirstInput());
+            if (autoFocus) {
+                requestAnimationFrame(() => focusFirstInput());
+            }
         } else {
             work = null;
         }

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte

@@ -809,6 +809,7 @@
                 const focusedRow = $paginatedRows.items.find((row) => row.$id === focusedRowId);
 
                 previouslyFocusedElement = document.activeElement;
+                $databaseRowSheetOptions.autoFocus = false;
                 onSelectSheetOption('update', null, 'row', focusedRow);
             }}>
             <svelte:fragment slot="header" let:root>
@@ -935,6 +936,7 @@
                                                             hide();
                                                             previouslyFocusedElement =
                                                                 document.activeElement;
+                                                            $databaseRowSheetOptions.autoFocus = false;
                                                             onSelectSheetOption(
                                                                 'update',
                                                                 null,
@@ -985,8 +987,10 @@
                                         <SheetOptions
                                             type="row"
                                             column={rowColumn}
-                                            onSelect={(option) =>
-                                                onSelectSheetOption(option, null, 'row', row)}
+                                            onSelect={(option) => {
+                                                $databaseRowSheetOptions.autoFocus = true;
+                                                onSelectSheetOption(option, null, 'row', row);
+                                            }}
                                             onVisibilityChanged={(visible) => {
                                                 canShowDatetimePopover = !visible;
                                             }}>
@@ -1113,6 +1117,7 @@
                                                         rowColumn
                                                     );
                                                 } else {
+                                                    $databaseRowSheetOptions.autoFocus = true;
                                                     onSelectSheetOption('update', null, 'row', row);
                                                 }
                                             }} />

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts

@@ -72,14 +72,16 @@ export const databaseRowSheetOptions = writable<
         rowId?: string;
         rows: Models.Row[];
         rowIndex?: number;
+        autoFocus?: boolean;
     }
 >({
     title: null,
     show: false,
     row: null,
     rowId: null, // for loading from a given id
     rows: [],
-    rowIndex: -1
+    rowIndex: -1,
+    autoFocus: true
 });
 
 export const databaseRelatedRowSheetOptions = writable<