diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 2f2df2a6..5790383a 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -5,6 +5,7 @@ import type { Metadata } from "next"; import { Modak, Nunito } from "next/font/google"; import { CookieGuard } from "@/components/cookie-guard"; +import SkipToContentButton from "@/components/skip-to-content-button"; import Header from "@/features/header/components/header"; import ToastListener from "@/features/system-feedback/toast/listener"; import { Providers } from "@/lib/providers"; @@ -79,13 +80,17 @@ export default async function RootLayout({ >
+
- {children} + {/* The main content is wrapped to allow skip to content functionality. */} +
+ {children} +
diff --git a/frontend/src/components/skip-to-content-button.tsx b/frontend/src/components/skip-to-content-button.tsx new file mode 100644 index 00000000..a3590593 --- /dev/null +++ b/frontend/src/components/skip-to-content-button.tsx @@ -0,0 +1,30 @@ +"use client"; + +import ActionButton from "@/features/button/components/action"; +import { cn } from "@/lib/utils/classname"; + +export default function SkipToContentButton() { + const handleClick = (e?: React.MouseEvent) => { + e?.preventDefault(); + const mainContent = document.getElementById("main-content"); + if (mainContent) { + mainContent.setAttribute("tabindex", "-1"); + mainContent.focus(); + } + }; + + return ( + + ); +}