♿️ Use our own skip to content component #2152 (#2168)

* ♿️ Use our own skip to content component #2152 * 🐛 Change so only h1 headers get id #2152
equinor · Apr 10, 2024 · eefbb1f · eefbb1f
1 parent 817a34f
commit eefbb1f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git a/web/components/src/Heading/Heading.tsx b/web/components/src/Heading/Heading.tsx
@@ -80,6 +80,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Hea
 ) {
   return (
     <StyledHeading
+      id={level === 'h1' && 'mainTitle'}
       variant={level}
       ref={ref}
       $center={center}

diff --git a/web/components/src/Link/ButtonLink.tsx b/web/components/src/Link/ButtonLink.tsx
@@ -43,3 +43,31 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(functio
     </StyledButtonLink>
   )
 })
+
+export const StyledSkipLink = styled(ButtonLink)`
+  user-select: none;
+  border: 0;
+  margin: -1px;
+  padding: 0;
+  outline: 0;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+
+  &:focus {
+    clip: auto;
+    width: auto;
+    height: auto;
+    background: white;
+    border: 1px solid black;
+    margin: var(--space-medium);
+    border-radius: 7px;
+    padding: var(--space-medium);
+  }
+
+  &:hover {
+    color: var(--button-text-hover);
+    background-color: var(--button-background-hover);
+    border-color: var(--button-border-color-hover);
+  }
+`
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
@@ -15,14 +15,13 @@ import useConsentState from '../lib/hooks/useConsentState'
 import { loadSiteImproveScript, cleanUpSiteImproveScript } from '../pageComponents/SiteImprove'
 import { enableDynatrace, disableDynatrace } from '../pageComponents/Dynatrace'
 import { SWRConfig } from 'swr'
-import { SkipNavLink, SkipNavContent } from '@chakra-ui/skip-nav'
-import styled from 'styled-components'
 
 // import archivedStyles from '@equinor/energyvision-legacy-css'
 // import { AppInsightsContext, AppInsightsErrorBoundary } from '@microsoft/applicationinsights-react-js'
 // import { reactPlugin } from '../common'
 import { PreviewContextProvider } from '../lib/contexts/PreviewContext'
 import { defaultLanguage } from '../languages'
+import { StyledSkipLink } from '@components'
 
 /**
  * TODO:
@@ -67,19 +66,6 @@ const HandleBoundaryError = (error: Error, info: { componentStack: string }) =>
   console.error('ErrorBoundary caught error: ', error, info)
 }
 
-const StyledSkipLink = styled(SkipNavLink)`
-  &:focus {
-    background: white;
-    padding: var(--space-medium);
-    border: 1px solid black;
-    position: sticky;
-    border-radius: 7px;
-    margin: var(--space-medium);
-    top: 10%;
-    z-index: 10;
-  }
-`
-
 function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
   const router = useRouter()
   const getLayout = Component.getLayout || ((page: ReactNode): ReactNode => page)
@@ -134,7 +120,6 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
   return (
     <SWRConfig>
       <ErrorBoundary FallbackComponent={ErrorFallback} onError={HandleBoundaryError}>
-        <StyledSkipLink>Skip to Content</StyledSkipLink>
         <>
           <Head>
             <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1" />
@@ -143,9 +128,8 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
           <GlobalStyle />
           <GlobalFontStyle />
           {IS_LIVE && <CookieBot locale={router.locale} />}
-          <PreviewContextProvider>
-            <SkipNavContent>{getLayout(<Component {...pageProps} />)}</SkipNavContent>
-          </PreviewContextProvider>
+          <StyledSkipLink href="#mainTitle">Skip to content</StyledSkipLink>
+          <PreviewContextProvider>{getLayout(<Component {...pageProps} />)}</PreviewContextProvider>
         </>
       </ErrorBoundary>
     </SWRConfig>