fix(vth): skip link to content

frameless · Nov 1, 2023 · bbefc24 · bbefc24
1 parent 0a1da32
commit bbefc24
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/apps/vth-frontend/src/app/[locale]/layout.tsx b/apps/vth-frontend/src/app/[locale]/layout.tsx
@@ -3,22 +3,21 @@ import { dir } from 'i18next';
 import type { Metadata } from 'next';
 import React from 'react';
 import { QueryClientProvider } from '@/client';
-import { Navigation, NavigationListType, Page, PageContent, PageHeader } from '@/components';
+import { Navigation, NavigationListType, Page, PageContent, PageHeader, SkipLink } from '@/components';
 import '@utrecht/component-library-css';
 import '../../styles/globals.css';
 import '@utrecht/design-tokens/dist/index.css';
 import { Footer } from '@/components/Footer';
 import { Grid } from '@/components/Grid';
 import { Logo } from '@/components/Logo';
 import 'react-loading-skeleton/dist/skeleton.css';
+import { Main } from '@/components/Main';
 import { GET_HOOFD_THEMAS } from '@/query';
 import { createStrapiURL } from '@/util/createStrapiURL';
 import { fetchData } from '@/util/fetchData';
 import { useTranslation } from '../i18n/index';
 import '@frameless/ui/dist/bundle.css';
 
-const Main: React.FC<{ children: React.ReactNode }> = ({ children }) => <main>{children}</main>;
-
 interface LayoutProps {
   children: React.ReactNode;
   params: {
@@ -160,6 +159,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
         <QueryClientProvider>
           <Page className="utrecht-page--full-width">
             <PageHeader>
+              <SkipLink href="#main">Ga naar inhoud</SkipLink>
               <Grid className={'utrecht-grid--content-padding'}>
                 <Logo locale={locale} />
               </Grid>
@@ -173,7 +173,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
                   closeText: 'Sluiten',
                 }}
               />
-              <Main>{children}</Main>
+              <Main id="main">{children}</Main>
             </PageContent>
             <Footer data={footerData} />
           </Page>

diff --git a/apps/vth-frontend/src/components/Main/index.tsx b/apps/vth-frontend/src/components/Main/index.tsx
@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+interface MainProps extends React.HTMLAttributes<HTMLElement> {}
+
+export const Main = ({ children, ...restProps }: PropsWithChildren<MainProps>) => (
+  <main className={'utrecht-main'} {...restProps}>
+    {children}
+  </main>
+);