feature/COR-1874_navigability

packages/app/src/domain/layout/layout.tsx

@@ -1,14 +1,14 @@
-import { ReactNode } from 'react';
+import { AppFooter } from '~/components/layout/app-footer';
+import { AppHeader } from '~/components/layout/app-header';
 import { Box } from '~/components/base/box';
 import { Breadcrumbs } from '~/components/breadcrumbs';
 import { BreadcrumbsDataProvider } from '~/components/breadcrumbs/logic/use-breadcrumbs';
-import { AppFooter } from '~/components/layout/app-footer';
-import { AppHeader } from '~/components/layout/app-header';
+import { CurrentDateProvider } from '~/utils/current-date-context';
 import { NotificationBanner } from '~/components/notification-banner';
+import { ReactNode } from 'react';
 import { SEOHead } from '~/components/seo-head';
 import { SkipLinkMenu } from '~/components/skip-link-menu';
 import { useIntl } from '~/intl';
-import { CurrentDateProvider } from '~/utils/current-date-context';
 
 interface LayoutProps {
   children: ReactNode;
@@ -30,12 +30,12 @@ export function Layout({ breadcrumbsData, children, title, description, openGrap
       <SkipLinkMenu
         ariaLabel={commonTexts.aria_labels.skip_links}
         links={[
-          { href: '#content', label: commonTexts.skiplinks.inhoud },
           { href: '#main-navigation', label: commonTexts.skiplinks.nav },
           {
             href: '#metric-navigation',
             label: commonTexts.skiplinks.metric_nav,
           },
+          { href: '#content', label: commonTexts.skiplinks.inhoud },
           {
             href: '#footer-navigation',
             label: commonTexts.skiplinks.footer_nav,

packages/app/src/pages/artikelen/index.tsx

@@ -1,23 +1,23 @@
-import { colors } from '@corona-dashboard/common';
-import { useRouter } from 'next/router';
-import { useCallback, useMemo } from 'react';
-import styled from 'styled-components';
+import { ArticleCategoryType, allPossibleArticleCategories } from '~/domain/topical/common/categories';
+import { ArticlesList } from '~/components/articles/articles-list';
 import { ArticleSummary } from '~/components/articles/article-teaser';
 import { Box } from '~/components/base';
-import { MaxWidth } from '~/components/max-width';
-import { RichContentSelect } from '~/components/rich-content-select';
+import { colors } from '@corona-dashboard/common';
+import { createGetContent, getLastGeneratedDate, getLokalizeTexts } from '~/static-props/get-data';
+import { getCategories } from '~/components/articles/logic/get-categories';
 import { Heading, InlineText, Text } from '~/components/typography';
-import { ArticlesList } from '~/components/articles/articles-list';
-import { Layout } from '~/domain/layout/layout';
-import { ArticleCategoryType, allPossibleArticleCategories } from '~/domain/topical/common/categories';
-import { useIntl } from '~/intl';
 import { Languages, SiteText } from '~/locale';
-import { StaticProps, createGetStaticProps } from '~/static-props/create-get-static-props';
-import { createGetContent, getLastGeneratedDate, getLokalizeTexts } from '~/static-props/get-data';
+import { Layout } from '~/domain/layout/layout';
+import { MaxWidth } from '~/components/max-width';
 import { mediaQueries, space } from '~/style/theme';
-import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
+import { RichContentSelect } from '~/components/rich-content-select';
+import { StaticProps, createGetStaticProps } from '~/static-props/create-get-static-props';
 import { useBreakpoints } from '~/utils/use-breakpoints';
-import { getCategories } from '~/components/articles/logic/get-categories';
+import { useCallback, useMemo } from 'react';
+import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
+import { useIntl } from '~/intl';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
 
 const selectLokalizeTexts = (siteText: SiteText) => ({
   textShared: siteText.pages.topical_page.shared,
@@ -99,7 +99,7 @@ const Articles = (props: StaticProps<typeof getStaticProps>) => {
 
   return (
     <Layout {...commonTexts.articles_metadata} lastGenerated={lastGenerated}>
-      <Box as="section" backgroundColor="white" paddingY={{ _: space[4], md: space[5] }}>
+      <Box id="content" as="section" backgroundColor="white" paddingY={{ _: space[4], md: space[5] }}>
         <MaxWidth paddingX={{ _: space[3], lg: space[4] }}>
           <Box paddingBottom={space[2]}>
             <Heading level={2} as="h1">

packages/app/src/pages/over.tsx

@@ -1,17 +1,18 @@
-import Head from 'next/head';
-import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { ContentImage } from '~/components/cms/content-image';
-import { RichContent } from '~/components/cms/rich-content';
+import { ContentLayout } from '~/domain/layout/content-layout';
+import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
 import { FullscreenChartTile } from '~/components/fullscreen-chart-tile';
 import { Heading } from '~/components/typography';
-import { ContentLayout } from '~/domain/layout/content-layout';
+import { ImageBlock, RichContentBlock } from '~/types/cms';
 import { Layout } from '~/domain/layout/layout';
-import { useIntl } from '~/intl';
-import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
-import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data';
 import { mediaQueries, sizes, space } from '~/style/theme';
-import { ImageBlock, RichContentBlock } from '~/types/cms';
+import { RichContent } from '~/components/cms/rich-content';
+import { useIntl } from '~/intl';
+import Head from 'next/head';
+import styled from 'styled-components';
+
 interface OverData {
   title: string | null;
   intro: RichContentBlock[];
@@ -66,7 +67,7 @@ const Over = (props: StaticProps<typeof getStaticProps>) => {
           <link key="dc-type" rel="dcterms:type" href="https://standaarden.overheid.nl/owms/terms/webpagina" />
           <link key="dc-type-title" rel="dcterms:type" href="https://standaarden.overheid.nl/owms/terms/webpagina" title="webpagina" />
         </Head>
-        <Box paddingBottom={space[5]}>
+        <Box id="content" paddingBottom={space[5]}>
           <Box marginBottom={space[4]} maxWidth={sizes.maxWidthText}>
             <Heading variant="h2" level={1}>
               {content.title}

packages/app/src/pages/toegankelijkheid.tsx

@@ -1,20 +1,15 @@
-import css from '@styled-system/css';
-import Head from 'next/head';
-import styled from 'styled-components';
-import { RichContent } from '~/components/cms/rich-content';
-import { Heading } from '~/components/typography';
+import { Box } from '~/components/base';
 import { Content } from '~/domain/layout/content';
+import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { Heading } from '~/components/typography';
 import { Layout } from '~/domain/layout/layout';
-import { useIntl } from '~/intl';
-import {
-  createGetStaticProps,
-  StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
-  createGetContent,
-  getLastGeneratedDate,
-} from '~/static-props/get-data';
+import { RichContent } from '~/components/cms/rich-content';
 import { RichContentBlock } from '~/types/cms';
+import { useIntl } from '~/intl';
+import css from '@styled-system/css';
+import Head from 'next/head';
+import styled from 'styled-components';
 
 interface AccessibilityPageData {
   title: string | null;
@@ -52,33 +47,17 @@ const AccessibilityPage = (props: StaticProps<typeof getStaticProps>) => {
   const { content, lastGenerated } = props;
 
   return (
-    <Layout
-      {...commonTexts.toegankelijkheid_metadata}
-      lastGenerated={lastGenerated}
-    >
+    <Layout {...commonTexts.toegankelijkheid_metadata} lastGenerated={lastGenerated}>
       <Head>
-        <link
-          key="dc-type"
-          rel="dcterms:type"
-          href="https://standaarden.overheid.nl/owms/terms/webpagina"
-        />
-        <link
-          key="dc-type-title"
-          rel="dcterms:type"
-          href="https://standaarden.overheid.nl/owms/terms/webpagina"
-          title="webpagina"
-        />
+        <link key="dc-type" rel="dcterms:type" href="https://standaarden.overheid.nl/owms/terms/webpagina" />
+        <link key="dc-type-title" rel="dcterms:type" href="https://standaarden.overheid.nl/owms/terms/webpagina" title="webpagina" />
       </Head>
-
-      <Content>
-        {content.title && <Heading level={1}>{content.title}</Heading>}
-        {content.description && (
-          <RichContent
-            blocks={content.description}
-            contentWrapper={RichContentWrapper}
-          />
-        )}
-      </Content>
+      <Box id="content">
+        <Content>
+          {content.title && <Heading level={1}>{content.title}</Heading>}
+          {content.description && <RichContent blocks={content.description} contentWrapper={RichContentWrapper} />}
+        </Content>
+      </Box>
     </Layout>
   );
 };

packages/app/src/pages/veelgestelde-vragen.tsx

@@ -1,17 +1,17 @@
-import groupBy from 'lodash/groupBy';
-import Head from 'next/head';
-import styled from 'styled-components';
 import { Box } from '~/components/base/box';
-import { RichContent } from '~/components/cms/rich-content';
+import { ContentLayout } from '~/domain/layout/content-layout';
+import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
 import { FaqSection } from '~/components/faq/faq-section';
+import { FAQuestionAndAnswer, RichContentBlock } from '~/types/cms';
 import { Heading } from '~/components/typography';
-import { ContentLayout } from '~/domain/layout/content-layout';
 import { Layout } from '~/domain/layout/layout';
-import { useIntl } from '~/intl';
-import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
-import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data';
 import { mediaQueries, sizes, space } from '~/style/theme';
-import { FAQuestionAndAnswer, RichContentBlock } from '~/types/cms';
+import { RichContent } from '~/components/cms/rich-content';
+import { useIntl } from '~/intl';
+import groupBy from 'lodash/groupBy';
+import Head from 'next/head';
+import styled from 'styled-components';
 
 interface VeelgesteldeVragenData {
   title: string | null;
@@ -74,20 +74,21 @@ const Verantwoording = (props: StaticProps<typeof getStaticProps>) => {
           <link key="dc-type" rel="dcterms:type" href="https://standaarden.overheid.nl/owms/terms/webpagina" />
           <link key="dc-type-title" rel="dcterms:type" href="https://standaarden.overheid.nl/owms/terms/webpagina" title="webpagina" />
         </Head>
+        <Box id="content">
+          <Box maxWidth={sizes.maxWidthText} marginBottom={space[4]} spacing={3}>
+            {content.title && (
+              <Heading variant="h2" level={1}>
+                {content.title}
+              </Heading>
+            )}
+            {content.description && <RichContent blocks={content.description} />}
+          </Box>
 
-        <Box maxWidth={sizes.maxWidthText} marginBottom={space[4]} spacing={3}>
-          {content.title && (
-            <Heading variant="h2" level={1}>
-              {content.title}
-            </Heading>
-          )}
-          {content.description && <RichContent blocks={content.description} />}
+          <FaqLayout>
+            <FaqSection section={firstHalf} />
+            <FaqSection section={secondHalf} />
+          </FaqLayout>
         </Box>
-
-        <FaqLayout>
-          <FaqSection section={firstHalf} />
-          <FaqSection section={secondHalf} />
-        </FaqLayout>
       </ContentLayout>
     </Layout>
   );