feature/XW-87/WCAG

pwa/src/templates/landing/LandingTemplate.tsx

@@ -28,13 +28,12 @@ export const LandingTemplate: React.FC = () => {
           {getItems.data?.results?.length === 0 && !getItems.isLoading && <span>Geen Woo verzoeken gevonden.</span>}
 
           {getItems.data?.results && getItems.data?.results?.length > 0 && (
-            <>
+            <div id="mainContent">
               <ResultsDisplayTemplate displayKey="landing-results" requests={getItems.data.results} />
 
               <Pagination totalPages={getItems.data.pages} {...{ currentPage, setCurrentPage }} />
-            </>
+            </div>
           )}
-
           {getItems.isLoading && <Skeleton height={"200px"} />}
         </PageContent>
       </Page>

pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx

@@ -17,7 +17,12 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
     <>
       <div className={styles.componentsGrid}>
         {requests.map((request) => (
-          <CardWrapper key={request.id} className={styles.cardContainer} onClick={() => navigate(request.id)}>
+          <CardWrapper
+            key={request.id}
+            className={styles.cardContainer}
+            onClick={() => navigate(request.id)}
+            tabIndex={0}
+          >
             <CardHeader>
               <CardHeaderDate>
                 {request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")}

pwa/src/templates/templateParts/filters/FiltersTemplate.tsx

@@ -49,7 +49,7 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
   }, [watcher]);
 
   return (
-    <div className={styles.container}>
+    <div id="filters" className={styles.container}>
       <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
         <InputText
           name="title"

pwa/src/templates/templateParts/footer/FooterTemplate.tsx

@@ -29,7 +29,7 @@ export const FooterTemplate: React.FC = () => {
             className={styles.link}
             href="https://github.com/ConductionNL/woo-website-template"
             target="_blank"
-            description={t("Link to github repository")}
+            aria-label={`${t("Link to github repository")}, ${t("Opens a new window")}`}
           >
             <FontAwesomeIcon icon={faCode} />
           </Link>{" "}
@@ -38,7 +38,7 @@ export const FooterTemplate: React.FC = () => {
             className={styles.link}
             href="https://github.com/ConductionNL/woo-website-template/graphs/contributors"
             target="_blank"
-            name={t("Link to github contributors page")}
+            aria-label={`${t("Link to github contributors page")}, ${t("Opens a new window")}`}
           >
             ❤️
           </Link>{" "}
@@ -47,7 +47,7 @@ export const FooterTemplate: React.FC = () => {
             className={styles.link}
             href="https://conduction.nl"
             target="_blank"
-            description={t("Link to conduction website")}
+            aria-label={`${t("Link to conduction website")}, ${t("Opens a new window")}`}
           >
             Conduction.
           </Link>

pwa/src/templates/templateParts/header/HeaderTemplate.module.css

@@ -40,3 +40,12 @@
 .languageSelectDisabled {
   opacity: 50%;
 }
+
+.visuallyHidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  color: red;
+}

pwa/src/templates/templateParts/header/HeaderTemplate.tsx

@@ -4,36 +4,54 @@ import clsx from "clsx";
 import { PageHeader } from "@utrecht/component-library-react/dist/css-module";
 import { navigate } from "gatsby";
 import { useTranslation } from "react-i18next";
+import { useGatsbyContext } from "../../../context/gatsby";
 
 interface HeaderTemplateProps {
   layoutClassName: string;
 }
 
 export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName }) => {
   const { t, i18n } = useTranslation();
+  const { gatsbyContext } = useGatsbyContext();
 
   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>
         <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>

pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx

@@ -30,7 +30,7 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
       </TableHeader>
       <TableBody className={styles.tableBody}>
         {requests.map((request) => (
-          <TableRow className={styles.tableRow} key={request.id} onClick={() => navigate(request.id)}>
+          <TableRow className={styles.tableRow} key={request.id} onClick={() => navigate(request.id)} tabIndex={0}>
             <TableCell>{request.Titel ?? t("No subject available")}</TableCell>
             <TableCell>
               {request.Publicatiedatum

pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx

@@ -39,14 +39,16 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
     <Page>
       <PageContent className={styles.container}>
         <div>
-          <Link className={styles.backLink} onClick={() => navigate("/")}>
+          <Link className={styles.backLink} onClick={() => navigate("/")} tabIndex={0}>
             <FontAwesomeIcon icon={faArrowLeft} /> <span>{t("Back to homepage")}</span>
           </Link>
         </div>
 
         {getItems.isSuccess && (
           <>
-            <Heading1>{getItems.data.Titel !== "" ? getItems.data.Titel : t("No title available")}</Heading1>
+            <Heading1 id="mainContent">
+              {getItems.data.Titel !== "" ? getItems.data.Titel : t("No title available")}
+            </Heading1>
 
             <Table className={styles.table}>
               <TableBody className={styles.tableBody}>

pwa/src/translations/en.ts

@@ -32,4 +32,9 @@ export const en = {
   "No publication date available": "No publication date available",
   "No summary available": "No summary available",
   "Navbar-Logo": "Navbar-Logo",
+  "Opens a new window": "Opens a new window",
+  "Translate page to Dutch": "Translate page to Dutch",
+  "Translate page to English": "Translate page to English",
+  "Skip to filters": "Skip to filters",
+  "Skip to main content": "Skip to main content",
 };

pwa/src/translations/nl.ts

@@ -31,5 +31,10 @@ export const nl = {
   "No subject available": "Geen onderwerp beschikbaar",
   "No publication date available": "Geen publicatiedatum beschikbaar",
   "No summary available": "Geen samenvatting beschikbaar",
-  "Navbar-Logo": "Navigatie-Logo"
+  "Navbar-Logo": "Navigatie-Logo",
+  "Opens a new window": "Opent een nieuw venster",
+  "Translate page to Dutch": "Vertaal pagina naar het Nederlands",
+  "Translate page to English": "Vertaal pagina naar het Engels",
+  "Skip to filters": "Ga naar de filters",
+  "Skip to main content": "Ga naar de hoofdinhoud",
 };