update and implement SkipLink

refactor to button for onClick handler; next.js link not currently moving element focus after following an internal hash link vercel/next.js#49386

Author: wackerow

src/components/SkipLink.tsx

@@ -1,19 +1,21 @@
-import React from "react"
+import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 
-import { BaseLink } from "../components/Link"
+import { MAIN_CONTENT_ID } from "@/lib/constants"
 
-import Translation from "./Translation"
+import { Button } from "./Buttons"
 
-export interface IProps {
-  hrefId: string
-}
+export const SkipLink = () => {
+  const { t } = useTranslation("common")
 
-export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
+  const handleNavigate = () => {
+    document?.getElementById(MAIN_CONTENT_ID)?.focus()
+  }
   return (
     <Box bg="primary.base">
-      <BaseLink
-        href={hrefId}
+      <Button
+        h="8"
+        onClick={handleNavigate}
         lineHeight="taller"
         position="absolute"
         top="-12"
@@ -23,8 +25,8 @@ export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
         _hover={{ textDecoration: "none" }}
         _focus={{ position: "static" }}
       >
-        <Translation id="skip-to-main-content" />
-      </BaseLink>
+        {t("skip-to-main-content")}
+      </Button>
     </Box>
   )
 }

src/layouts/RootLayout.tsx

@@ -9,6 +9,7 @@ import { Root } from "@/lib/interfaces"
 import FeedbackWidget from "@/components/FeedbackWidget"
 import Footer from "@/components/Footer"
 import Nav from "@/components/Nav"
+import { SkipLink } from "@/components/SkipLink"
 import TranslationBanner from "@/components/TranslationBanner"
 import TranslationBannerLegal from "@/components/TranslationBannerLegal"
 
@@ -45,6 +46,8 @@ export const RootLayout = ({
 
   return (
     <Container mx="auto" maxW={oldTheme.variables.maxPageWidth}>
+      <SkipLink />
+
       <Nav path={asPath} />
 
       <TranslationBanner

tsconfig.json

@@ -89,7 +89,6 @@
     "./src/components/SideNavMobile.tsx",
     "./src/components/SimpleTable.tsx",
     "./src/components/Simulator",
-    "./src/components/SkipLink.tsx",
     "./src/components/Slider/Slider.stories.tsx",
     "./src/components/Slider/index.tsx",
     "./src/components/StablecoinAccordion/AccordionCustomItem.tsx",