added suggested changes

ConductionNL · Oct 10, 2023 · 5e3b095 · 5e3b095
1 parent c77a069
commit 5e3b095
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 47 deletions.
diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
@@ -5,6 +5,14 @@
   padding-inline-start: var(--utrecht-page-margin-inline-start);
   padding-inline-end: var(--utrecht-page-margin-inline-end);
   display: flex;
+}
+.skipLinkContainer:focus-within {
+  margin-inline-end: 10%;
+}
+
+.navContainer {
+  flex: 1;
+  display: flex;
   justify-content: space-between;
 }
 
@@ -40,12 +48,3 @@
 .languageSelectDisabled {
   opacity: 50%;
 }
-
-.visuallyHidden {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  color: red;
-}
diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./HeaderTemplate.module.css";
 import clsx from "clsx";
-import { PageHeader } from "@utrecht/component-library-react/dist/css-module";
+import { PageHeader, SkipLink } from "@utrecht/component-library-react/dist/css-module";
 import { navigate } from "gatsby";
 import { useTranslation } from "react-i18next";
 import { useGatsbyContext } from "../../../context/gatsby";
@@ -17,44 +17,43 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
   return (
     <PageHeader className={clsx(layoutClassName && layoutClassName)}>
       <div className={styles.container}>
-        <a
-          href="#filters"
-          className={styles.visuallyHidden}
-          tabIndex={gatsbyContext.location.pathname === "/" ? 0 : -1}
-        >
-          {t("Skip to filters")}
-        </a>
-        <a href="#mainContent" className={styles.visuallyHidden} tabIndex={0}>
-          {t("Skip to main content")}
-        </a>
-
-        <div className={styles.imageContainer}>
-          <img
-            className={styles.image}
-            onClick={() => navigate("/")}
-            src={process.env.GATSBY_HEADER_LOGO_URL}
-            alt={t("Navbar-Logo")}
-            tabIndex={0}
-          />
+        <div className={styles.skipLinkContainer}>
+          <SkipLink href="#filters" tabIndex={gatsbyContext.location.pathname === "/" ? 0 : -1}>
+            {t("Skip to filters")}
+          </SkipLink>
+          <SkipLink href="#mainContent" tabIndex={0}>
+            {t("Skip to main content")}
+          </SkipLink>
         </div>
-        <div className={styles.languageSelectContainer}>
-          <span
-            className={clsx(styles.languageSelect, i18n.language === "nl" && styles.languageSelectDisabled)}
-            onClick={() => i18n.changeLanguage("nl")}
-            tabIndex={0}
-            aria-label={t("Translate page to Dutch")}
-          >
-            NL
-          </span>{" "}
-          /{" "}
-          <span
-            className={clsx(styles.languageSelect, i18n.language === "en" && styles.languageSelectDisabled)}
-            onClick={() => i18n.changeLanguage("en")}
-            tabIndex={0}
-            aria-label={t("Translate page to English")}
-          >
-            EN
-          </span>
+        <div className={styles.navContainer}>
+          <div className={styles.imageContainer}>
+            <img
+              className={styles.image}
+              onClick={() => navigate("/")}
+              src={process.env.GATSBY_HEADER_LOGO_URL}
+              alt={t("Navbar-Logo")}
+              tabIndex={0}
+            />
+          </div>
+          <div className={styles.languageSelectContainer}>
+            <span
+              className={clsx(styles.languageSelect, i18n.language === "nl" && styles.languageSelectDisabled)}
+              onClick={() => i18n.changeLanguage("nl")}
+              tabIndex={0}
+              aria-label={t("Translate page to Dutch")}
+            >
+              NL
+            </span>{" "}
+            /{" "}
+            <span
+              className={clsx(styles.languageSelect, i18n.language === "en" && styles.languageSelectDisabled)}
+              onClick={() => i18n.changeLanguage("en")}
+              tabIndex={0}
+              aria-label={t("Translate page to English")}
+            >
+              EN
+            </span>
+          </div>
         </div>
       </div>
     </PageHeader>