diff --git a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx index cd09666e..f30b3af7 100644 --- a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx +++ b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx @@ -22,7 +22,7 @@ const ResultsDisplaySwitch: React.FC = ({ 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")} > {t("Cards")} @@ -31,7 +31,7 @@ const ResultsDisplaySwitch: React.FC = ({ 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")} > {t("Table")} diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx index 1460c7e8..1fce0d00 100644 --- 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 && Geen Woo verzoeken gevonden.} {getItems.data?.results && getItems.data?.results?.length > 0 && ( - <> +
- +
)} - {getItems.isLoading && } diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx index eca5443d..860c9388 100644 --- 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 = ({ requ <>
{requests.map((request) => ( - navigate(request.id)}> + navigate(request.id)} + tabIndex={0} + aria-label={`${request.Titel}, ${request.Samenvatting}, ${ + request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A") + }`} + > {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 index 3f2d4428..e293e023 100644 --- 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 = ({ isLoading }) = }, [watcher]); return ( -
+
{ }; const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content }) => { + const { t } = useTranslation(); + return (
- {content.title} + {t(content.title)} {content.items.map((item, idx) => (
- {item.label} - + {t(item.label)} {/* External Link */} {item.link && item.link.includes("http") && ( - + {item.value} )} {/* Internal Link */} {item.link && !item.link.includes("http") && ( - navigate(item.link ?? "")}> + navigate(item.link ?? "")} + tabIndex={0} + aria-label={`${t(item.label)}, ${t(item.value)}`} + > {item.value} )} @@ -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")}`} > {" "} @@ -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")}`} > {" "} @@ -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")}`} > Conduction. diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css index a15a4f11..bf51b9f3 100644 --- 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 index 15a69675..6e649819 100644 --- a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx +++ b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx @@ -1,9 +1,10 @@ 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; @@ -11,32 +12,48 @@ interface HeaderTemplateProps { export const HeaderTemplate: React.FC = ({ layoutClassName }) => { const { t, i18n } = useTranslation(); + const { gatsbyContext } = useGatsbyContext(); return (
-
- navigate("/")} - src={process.env.GATSBY_HEADER_LOGO_URL} - alt={t("Navbar-Logo")} - /> +
+ + {t("Skip to filters")} + + + {t("Skip to main content")} +
-
- i18n.changeLanguage("nl")} - > - NL - {" "} - /{" "} - i18n.changeLanguage("en")} - > - EN - +
+
+ navigate("/")} + src={process.env.GATSBY_HEADER_LOGO_URL} + alt={t("Navbar-Logo")} + tabIndex={0} + /> +
+
+ i18n.changeLanguage("nl")} + tabIndex={0} + aria-label="Vertaal pagina naar het Nederlands" + > + NL + {" "} + /{" "} + i18n.changeLanguage("en")} + tabIndex={0} + aria-label="Translate page to English" + > + EN + +
diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx index 85272347..990c0164 100644 --- 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 = ({ requ {requests.map((request) => ( - navigate(request.id)}> + navigate(request.id)} + tabIndex={0} + aria-label={`${request.Titel}, ${ + request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A") + }, ${request.Samenvatting}`} + > {request.Titel ?? t("No subject available")} {request.Publicatiedatum diff --git a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx b/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx index f8bdc2a4..e711889b 100644 --- a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx +++ b/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx @@ -39,14 +39,16 @@ export const WOOItemDetailTemplate: React.FC = ({ wo
- navigate("/")}> + navigate("/")} tabIndex={0}> {t("Back to homepage")}
{getItems.isSuccess && ( <> - {getItems.data.Titel !== "" ? getItems.data.Titel : t("No title available")} + + {getItems.data.Titel !== "" ? getItems.data.Titel : t("No title available")} + diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts index dbca55b2..ec630d85 100644 --- 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 index d8c67dcf..3180f27e 100644 --- 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,8 +23,8 @@ 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", @@ -31,5 +32,13 @@ 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", + "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 index 1edeba7c..6032211b 100644 --- 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":"info@conduction.nl","link":"mailto:info@conduction.nl"},{"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":"info@conduction.nl","link":"mailto:info@conduction.nl"},{"label":"Address","value":"Lauriergracht 14h"}]}] #OIDN GATSBY_OIDN_NUMBER=""