ConductionNL · remko48 · Oct 10, 2023 · Oct 9, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx
@@ -22,7 +22,7 @@ const ResultsDisplaySwitch: React.FC<ResultsDisplaySwitchProps> = ({ layoutClass
         appearance={isActive(displayKey, "cards") ? "primary-action-button" : "secondary-action-button"}
         className={styles.button}
         onClick={() => setDisplay({ [displayKey]: "cards" })}
-        discription={t("Show cards")}
+        aria-label={t("Cards view")}
       >
         <FontAwesomeIcon icon={faGripVertical} /> {t("Cards")}
       </Button>
@@ -31,7 +31,7 @@ const ResultsDisplaySwitch: React.FC<ResultsDisplaySwitchProps> = ({ layoutClass
         appearance={isActive(displayKey, "table") ? "primary-action-button" : "secondary-action-button"}
         className={styles.button}
         onClick={() => setDisplay({ [displayKey]: "table" })}
-        discription={t("Show table")}
+        aria-label={t("Table view")}
       >
         <FontAwesomeIcon icon={faTable} /> {t("Table")}
       </Button>

diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/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>

diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx
@@ -17,7 +17,15 @@ 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}
+            aria-label={`${request.Titel}, ${request.Samenvatting}, ${
+              request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")
+            }`}
+          >
             <CardHeader>
               <CardHeaderDate>
                 {request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")}

diff --git a/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx b/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"

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
@@ -43,24 +43,36 @@ export const FooterTemplate: React.FC = () => {
 };
 
 const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content }) => {
+  const { t } = useTranslation();
+
   return (
     <section>
-      <Heading3 className={styles.dynamicSectionTitle}>{content.title}</Heading3>
+      <Heading3 className={styles.dynamicSectionTitle}>{t(content.title)}</Heading3>
 
       {content.items.map((item, idx) => (
         <div key={idx} className={styles.dynamicSectionContent}>
-          <strong>{item.label}</strong>
-
+          <strong>{t(item.label)}</strong>
           {/* External Link */}
           {item.link && item.link.includes("http") && (
-            <Link className={styles.link} href={item.link} target="_blank">
+            <Link
+              className={styles.link}
+              href={item.link}
+              target="_blank"
+              tabIndex={0}
+              aria-label={`${t(item.label)}, ${t("Opens a new window")}`}
+            >
               {item.value}
             </Link>
           )}
 
           {/* Internal Link */}
           {item.link && !item.link.includes("http") && (
-            <Link className={styles.link} onClick={() => navigate(item.link ?? "")}>
+            <Link
+              className={styles.link}
+              onClick={() => navigate(item.link ?? "")}
+              tabIndex={0}
+              aria-label={`${t(item.label)}, ${t(item.value)}`}
+            >
               {item.value}
             </Link>
           )}
@@ -99,7 +111,7 @@ const WithLoveByConduction: React.FC = () => {
         className={styles.withLoveLink}
         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>{" "}
@@ -108,7 +120,7 @@ const WithLoveByConduction: React.FC = () => {
         className={styles.withLoveLink}
         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")}`}
       >
         <FontAwesomeIcon icon={faHeart} />
       </Link>{" "}
@@ -117,7 +129,7 @@ const WithLoveByConduction: React.FC = () => {
         className={styles.withLoveLink}
         href="https://conduction.nl"
         target="_blank"
-        description={t("Link to conduction website")}
+        aria-label={`${t("Link to conduction website")}, ${t("Opens a new window")}`}
       >
         <span className={styles.withLoveConductionLink}> Conduction.</span>
       </Link>

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;
 }
 

diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
@@ -1,42 +1,59 @@
 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";
 
 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}>
-        <div className={styles.imageContainer}>
-          <img
-            className={styles.image}
-            onClick={() => navigate("/")}
-            src={process.env.GATSBY_HEADER_LOGO_URL}
-            alt={t("Navbar-Logo")}
-          />
+        <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")}
-          >
-            NL
-          </span>{" "}
-          /{" "}
-          <span
-            className={clsx(styles.languageSelect, i18n.language === "en" && styles.languageSelectDisabled)}
-            onClick={() => i18n.changeLanguage("en")}
-          >
-            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="Vertaal pagina naar het Nederlands"
+            >
+              NL
+            </span>{" "}
+            /{" "}
+            <span
+              className={clsx(styles.languageSelect, i18n.language === "en" && styles.languageSelectDisabled)}
+              onClick={() => i18n.changeLanguage("en")}
+              tabIndex={0}
+              aria-label="Translate page to English"
+            >
+              EN
+            </span>
+          </div>
         </div>
       </div>
     </PageHeader>

diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx
@@ -30,7 +30,15 @@ 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}
+            aria-label={`${request.Titel},  ${
+              request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")
+            }, ${request.Samenvatting}`}
+          >
             <TableCell>{request.Titel ?? t("No subject available")}</TableCell>
             <TableCell>
               {request.Publicatiedatum

diff --git a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx b/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}>

diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
@@ -11,6 +11,7 @@ export const en = {
   Attachments: "Attachments",
   Decision: "Decision",
   Subject: "Subject",
+  Address: "Address",
   "N/A": "N/A",
   "Details page": "Details page",
   "Back to homepage": "Back to homepage",
@@ -22,8 +23,8 @@ export const en = {
   "Publication date": "Publication date",
   "Received date": "Received date",
   "Decision date": "Decision date",
-  "Show cards": "Show cards",
-  "Show table": "Show table",
+  "Cards view": "Cards view",
+  "Table view": "Table view",
   "Link to github repository": "Link to github repository",
   "Link to github contributors page": "Link to github contributors page",
   "Link to conduction website": "Link to conduction website",
@@ -32,4 +33,12 @@ 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",
+  "Skip to footer content": "Skip to footer content",
+  "Phone number": "Phone number",
+  "Email address": "Email address",
 };
diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
@@ -11,6 +11,7 @@ export const nl = {
   Attachments: "Bijlagen",
   Decision: "Besluit",
   Subject: "Onderwerp",
+  Address: "Adres",
   "N/A": "N.v.t",
   "Details page": "Detailpagina",
   "Back to homepage": "Terug naar home",
@@ -22,14 +23,22 @@ export const nl = {
   "Publication date": "Publicatiedatum",
   "Received date": "Ontvangstdatum",
   "Decision date": "Besluitdatum",
-  "Show cards": "Toon tegels",
-  "Show table": "Toon tabel",
+  "Cards view": "Tegelweergave",
+  "Table view": "Tabelweergave",
   "Link to github repository": "Link naar github repository",
   "Link to github contributors page": "Link naar github bijdragers pagina",
   "Link to conduction website": "Link naar conduction website",
   "No title available": "Geen titel beschikbaar",
   "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",
+  "Skip to footer content": "Ga naar de voettekst",
+  "Phone number": "Telefoonnummer",
+  "Email address": "E-mailadres",
 };
diff --git a/pwa/static/.env.development b/pwa/static/.env.development
@@ -18,7 +18,7 @@ GATSBY_JUMBOTRON_IMAGE_URL=https://www.conduction.nl/wp-content/uploads/2021/07/
 # Footer
 GATSBY_FOOTER_LOGO_URL="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg=="
 GATSBY_FOOTER_LOGO_HREF=https://conduction.nl/
-GATSBY_FOOTER_CONTENT=[{"title":"Contact","items":[{"label":"Telefoonnummer","value":"+31 (0)85 3036840","link":"tel:+31 (0)85 3036840"},{"label":"E-mailadres","value":"[email protected]","link":"mailto:[email protected]"},{"label":"Adres","value":"Lauriergracht 14h"}]}]
+GATSBY_FOOTER_CONTENT=[{"title":"Contact","items":[{"label":"Phone number","value":"+31 (0)85 3036840","link":"tel:+31 (0)85 3036840"},{"label":"Email address","value":"[email protected]","link":"mailto:[email protected]"},{"label":"Address","value":"Lauriergracht 14h"}]}]
 
 #OIDN
 GATSBY_OIDN_NUMBER=""