ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-09 11:13:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fully overridden traditional dom keyboard navigation

Browse Source
This commit is contained in:
Oliver Bryan
2026-02-08 09:50:21 +00:00
parent 9015c80a12
commit d71561672f
1 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/App.tsx
View File

@@ -335,9 +335,9 @@ function Home() {
} }
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown, true);
return () => { return () => {
window.removeEventListener("keydown", handleKeyDown); window.removeEventListener("keydown", handleKeyDown, true);
}; };
}, [ }, [
activeHomeTab, activeHomeTab,
@@ -437,14 +437,16 @@ function Home() {
className="relative z-0 h-auto w-full gap-0 p-0" className="relative z-0 h-auto w-full gap-0 p-0"
> >
<TabsTrigger <TabsTrigger
data-keynav-nav="true"
value={homeTabs[0]} value={homeTabs[0]}
className="border-border -mr-[1px] after:hidden data-[state=active]:text-accent" className="border-border -mr-[1px] after:hidden data-[state=active]:text-accent focus-visible:ring-0 focus-visible:outline-none focus-visible:border-border"
> >
Work Work
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
data-keynav-nav="true"
value={homeTabs[1]} value={homeTabs[1]}
className="border-border after:hidden data-[state=active]:text-accent" className="border-border after:hidden data-[state=active]:text-accent focus-visible:ring-0 focus-visible:outline-none focus-visible:border-border"
> >
Travel Travel
</TabsTrigger> </TabsTrigger>
@@ -468,8 +470,9 @@ function Home() {
{locations.map((location, index) => ( {locations.map((location, index) => (
<Fragment key={location.id}> <Fragment key={location.id}>
<Button <Button
data-keynav-nav="true"
className={cn( className={cn(
"text-sm border cursor-pointer hover:border-accent justify-start w-full", "text-sm border cursor-pointer hover:border-accent justify-start w-full focus-visible:ring-0 focus-visible:outline-none focus-visible:border-border",
activeLocationIndex === index && activeLocationIndex === index &&
activeHomeTab === "travel" && activeHomeTab === "travel" &&
travelFocusLevel === "location" && travelFocusLevel === "location" &&
@@ -547,6 +550,7 @@ function Home() {
(photo, photoIndex) => ( (photo, photoIndex) => (
<Button <Button
key={photo} key={photo}
data-keynav-nav="true"
id={getTravelPhotoItemId(location.id, photoIndex)} id={getTravelPhotoItemId(location.id, photoIndex)}
onClick={() => { onClick={() => {
const path = getTravelPhotoPath( const path = getTravelPhotoPath(
@@ -563,7 +567,7 @@ function Home() {
setPreviewPhotoPath(path); setPreviewPhotoPath(path);
}} }}
className={cn( className={cn(
"flex text-sm border cursor-pointer hover:border-accent items-center justify-start p-0 pl-2 ", "flex text-sm border cursor-pointer hover:border-accent items-center justify-start p-0 pl-2 focus-visible:ring-0 focus-visible:outline-none focus-visible:border-borde",
activeHomeTab === "travel" && activeHomeTab === "travel" &&
travelFocusLevel === "photo" && travelFocusLevel === "photo" &&
activePhotoIndexByLocation[location.id] === activePhotoIndexByLocation[location.id] ===
@@ -655,15 +659,18 @@ function getTravelPhotoItemId(locationId: number, photoIndex: number): string {
function isInteractiveTarget(target: EventTarget | null): boolean { function isInteractiveTarget(target: EventTarget | null): boolean {
if (!(target instanceof HTMLElement)) return false; if (!(target instanceof HTMLElement)) return false;
if (target.isContentEditable) return true;
const tagName = target.tagName; const tagName = target.tagName;
return ( if (target.isContentEditable) return true;
tagName === "INPUT" || if (tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") {
tagName === "TEXTAREA" || return true;
tagName === "SELECT" || }
tagName === "BUTTON" ||
tagName === "A" if (tagName === "BUTTON" || tagName === "A") {
); return !target.closest('[data-keynav-nav="true"]');
}
return false;
} }
function ProjectRoute() { function ProjectRoute() {