Skip to content

Add keyboard navigation #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jadefw wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add keyboard navigation #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions src/components/gallery/variant-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Home, Palette } from "lucide-react";
import { useEffect } from "react";
import { buildCompareHrefForSelection } from "@/lib/compare";
import type { GalleryEntry, IterationId } from "@/lib/gallery-types";
import { buildVariantHref } from "@/lib/gallery-paths";
Expand Down Expand Up @@ -31,6 +35,50 @@ export function VariantSwitcher({
? "text-[var(--gallery-accent)]"
: "text-[var(--gallery-text-quaternary)] opacity-55";

const router = useRouter();

useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
const target = e.target as HTMLElement | null;
if (
e.ctrlKey ||
e.metaKey ||
e.altKey ||
target?.tagName === "INPUT" ||
target?.tagName === "TEXTAREA" ||
target?.isContentEditable
) {
return;
}

if (e.key === "h") {
e.preventDefault();
router.push("/");
return;
}

if (e.key === "c") {
Comment on lines +54 to +60

@greptile-apps greptile-apps Bot Aug 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Shift-modified letter shortcuts do not navigate

The handler only matches lowercase "h" and "c". On the rendered gallery route, lowercase shortcuts navigate correctly, but Shift+H and Shift+C leave the visitor on the current variant even when focus is outside an editable element. Normalize the letter key before comparing it so navigation works regardless of Shift or Caps Lock state.

Artifacts

Executed Playwright shortcut probe source

  • The authored Chromium Playwright probe opens the live gallery variant, sends lowercase and Shift-uppercase H/C keys outside editable controls, and records the resulting URLs; the executable test source establishes the reproduction method and takeaway.

Observed gallery shortcut navigation output

  • Output captured from `node trex-artifacts/variant-shortcuts-probe.mjs` in `/home/user/repo` records each key, non-editable BODY focus, expected URL, and actual URL; lowercase navigation works while both Shift-uppercase routes fail, the takeaway.

▶ Lowercase h shortcut navigating from the gallery variant to home

  • Chromium recording of the real gallery variant before the Shift-uppercase comparison, showing lowercase `h` navigating to the home URL; the baseline shortcut works, the takeaway.

Poster frame after lowercase h navigation to home

  • Poster frame from the lowercase `h` recording after the gallery route navigated to home; it visually supports the working lowercase baseline, the takeaway.

▶ Shift+H shortcut remaining on the gallery variant

  • Chromium recording of `Shift+H` on the same live gallery variant, showing the route remains unchanged rather than navigating home; the Shift-uppercase shortcut failure is confirmed, the takeaway.

Poster frame after Shift+H leaves the gallery variant unchanged

  • Poster frame from the Shift+H recording showing the same gallery variant still rendered after the key press; uppercase navigation did not occur, the takeaway.

View artifacts

T-Rex Ran code and verified through T-Rex

e.preventDefault();
router.push(
buildCompareHrefForSelection({
group: entry.group,
model: entry.model,
iteration,
}),
);
return;
}

if (/^[1-5]$/.test(e.key)) {
e.preventDefault();
router.push(buildVariantHref(entry.group, entry.model, e.key as IterationId));
}
};

window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, [entry.group, entry.model, iteration, router]);

return (
<nav
aria-label={`${entry.modelLabel} gallery navigation`}
Expand Down