Merge pull request #251 from ConductionNL/development

Development to main, week 5
ConductionNL · Feb 5, 2024 · 4bc1980 · 4bc1980
2 parents 1b9785b + 13c70b9
commit 4bc1980
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -59,12 +59,12 @@ Deze pagina kan rechtstreeks vanaf GitHub (serverless) of los op een eigen omgev
 
 - Een ([Open Webconcept](https://openwebconcept.nl/)) WordPress installatie met de [Open Woo Plugin](https://github.com/OpenWebconcept/plugin-openwoo)
 - Een ([Common Gateway](https://commongateway.app/)) Symfony installatie met de [Open Woo bundle](https://github.com/CommonGateway/WooBundle)
-- Een ([Open Online](https://www.dimpact.nl/nieuws/gemeente-vught-live-met-open-online)) Drupal installatie met de Open Woo plugin ([roadmap](https://openwoo.app/github/Roadmap/?link=https://github.com/ConductionNL/woo-website-template/blob/main/docs/Roadmap.md))
-- Een los JSON-bestand dat de data bevat vanuit de repository ([roadmap](https://openwoo.app/github/Roadmap/?link=https://github.com/ConductionNL/woo-website-template/blob/main/docs/Roadmap.md))
+- Een ([Open Online](https://www.dimpact.nl/nieuws/gemeente-vught-live-met-open-online)) Drupal installatie met de Open Woo plugin ([roadmap](/docs/product/Roadmap.md))
+- Een los JSON-bestand dat de data bevat vanuit de repository ([roadmap](/docs/product/Roadmap.md))
 - Een rechtstreeks vanuit het zaak- en/of raadsinformatiesysteem ontsloten API
 
 Voor de pagina maakt het niet uit wie de bron is, zolang deze bron zich aan de standaard houdt.
-Meer details hierover vindt u onder [architectuur](https://openwoo.app/github/Architectuur/?link=https://github.com/ConductionNL/woo-website-template/blob/main/docs/Architectuur.md).
+Meer details hierover vindt u onder [architectuur](/docs/techniek/Architectuur.md).
 
 ![Website Architectuur](https://raw.githubusercontent.com/ConductionNL/woo-website-template/main/docs/components.svg "Website Architectuur")
 
@@ -91,8 +91,8 @@ Op dit moment wordt de OpenWoo.app al door een aantal organisaties gebruikt
 
 ## Architectuur
 
-Wil je meer weten over de architectuur van de Open Woo-app en uit welke componenten het bestaat? Kijk dan op de [architectuur pagina](https://openwoo.app/github/Architectuur/?link=https://github.com/ConductionNL/woo-website-template/blob/main/docs/Architectuur.md).
+Wil je meer weten over de architectuur van de Open Woo-app en uit welke componenten het bestaat? Kijk dan op de [architectuur pagina](/docs/techniek/Architectuur.md).
 
 ## Toekomstplannen
 
-Er komen steeds meer toepassingen voor het publiceren van overheidsinformatie. Denk bijvoorbeeld aan het publiceren van datasets, algoritmes en besluiten. Deze toepassingen zullen in de toekomst ook onderdeel worden van de Wet Open Overheid. Daarom is het belangrijk dat de Open WOO App flexibel is en kan worden aangepast aan de veranderende behoeften van de overheid. Kijk voor meer informatie over onze ontwikkelplannen op de [roadmap](https://openwoo.app/github/Roadmap/?link=https://github.com/ConductionNL/woo-website-template/blob/main/docs/Roadmap.md)
+Er komen steeds meer toepassingen voor het publiceren van overheidsinformatie. Denk bijvoorbeeld aan het publiceren van datasets, algoritmes en besluiten. Deze toepassingen zullen in de toekomst ook onderdeel worden van de Wet Open Overheid. Daarom is het belangrijk dat de Open WOO App flexibel is en kan worden aangepast aan de veranderende behoeften van de overheid. Kijk voor meer informatie over onze ontwikkelplannen op de [roadmap](/docs/product/Roadmap.md)
diff --git a/docs/NavbarContent.json b/docs/NavbarContent.json
@@ -35,7 +35,7 @@
         "label": "Beveiliging",
         "type": "internalMarkdown",
         "current": {
-          "pathname": "/Product/Security"
+          "pathname": "/Product/SECURITY"
         },
         "handleClick": {
           "internalMarkdown": {
@@ -48,7 +48,7 @@
         "label": "Toegankelijkheid",
         "type": "internalMarkdown",
         "current": {
-          "pathname": "/Product/toegankelijkheid"
+          "pathname": "/Product/Toegankelijkheid"
         },
         "handleClick": {
           "internalMarkdown": {

diff --git a/docs/techniek/Architectuur.md b/docs/techniek/Architectuur.md
@@ -107,4 +107,4 @@ Het Woo Publicatie Object vormt de kern van zowel de Woo API als de Woo-website.
 
 ## Roadmap
 
-Organisaties kunnen bijdragen aan de ontwikkeling van deze componenten door items aan te dragen, deze zelf op te pakken en uit te voeren, of door de uitvoering ervan te financieren. Voor het huidige overzicht, zie [Roadmap](/docs/product/roadmap).
+Organisaties kunnen bijdragen aan de ontwikkeling van deze componenten door items aan te dragen, deze zelf op te pakken en uit te voeren, of door de uitvoering ervan te financieren. Voor het huidige overzicht, zie [Roadmap](/docs/product/Roadmap.md).
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.45",
-    "@conduction/theme": "1.1.15",
+    "@conduction/theme": "1.1.17",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "6.5.1",
     "@fortawesome/free-regular-svg-icons": "6.5.1",

diff --git a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.module.css b/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.module.css
@@ -11,6 +11,10 @@
   margin-block-end: var(--utrecht-space-block-lg);
 }
 
+.content > *:not(:last-child) {
+  margin-block-end: var(--utrecht-space-block-lg);
+}
+
 .heading1 {
   color: var(
     --utrecht-heading-1-color,

diff --git a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx b/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx
@@ -37,22 +37,27 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
   return (
     <Page>
       <PageContent className={styles.container}>
-        <div>
+        <div role="navigation">
           <Link
             className={styles.backLink}
             href="/"
             onClick={(e: any) => {
               e.preventDefault(), navigate("/");
             }}
             tabIndex={0}
+            aria-label={t("Back to homepage")}
           >
             <FontAwesomeIcon icon={faArrowLeft} /> <span>{t("Back to homepage")}</span>
           </Link>
         </div>
 
         {getItems.isSuccess && getItems.data && (
-          <>
-            <Heading1 id="mainContent">
+          <div className={styles.content} role="region" aria-label={t("Details")}>
+            <Heading1
+              id="mainContent"
+              tabIndex={0}
+              aria-label={`${t("Title of woo request")}, ${getItems.data.titel !== "" ? getItems.data.titel : t("No title available")}`}
+            >
               {getItems.data.titel !== "" ? getItems.data.titel : t("No title available")}
             </Heading1>
 
@@ -65,41 +70,69 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
               <Table className={styles.table}>
                 <TableBody className={styles.tableBody}>
                   {getItems.data.id && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Feature")}, ${getItems.data.id}`}
+                    >
                       <TableCell>{t("Feature")}</TableCell>
                       <TableCell>{getItems.data.id}</TableCell>
                     </TableRow>
                   )}
 
                   {getItems.data.titel && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Category")}, ${getItems.data.categorie ?? "-"}`}
+                    >
                       <TableCell>{t("Category")}</TableCell>
                       <TableCell>{getItems.data.categorie ?? "-"}</TableCell>
                     </TableRow>
                   )}
 
                   {getItems.data.samenvatting && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Summary")}, ${getItems.data.samenvatting}`}
+                    >
                       <TableCell>{t("Summary")}</TableCell>
                       <TableCell>{getItems.data.samenvatting}</TableCell>
                     </TableRow>
                   )}
                   {getItems.data.beschrijving && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Description")}, ${getItems.data.beschrijving}`}
+                    >
                       <TableCell>{t("Description")}</TableCell>
                       <TableCell>{getItems.data.beschrijving}</TableCell>
                     </TableRow>
                   )}
 
                   {getItems.data.metadata?.verzoek?.termijnoverschrijding && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Exceeding the term")}, ${getItems.data.metadata?.verzoek?.termijnoverschrijding}`}
+                    >
                       <TableCell>{t("Exceeding the term")}</TableCell>
                       <TableCell>{getItems.data.metadata?.verzoek?.termijnoverschrijding}</TableCell>
                     </TableRow>
                   )}
 
                   {getItems.data.publicatiedatum && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Publication date")}, ${
+                        getItems.data.publicatiedatum
+                          ? translateDate(i18n.language, getItems.data.publicatiedatum)
+                          : "-"
+                      }`}
+                    >
                       <TableCell>{t("Publication date")}</TableCell>
                       <TableCell>
                         {getItems.data.publicatiedatum
@@ -110,7 +143,11 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                   )}
 
                   {getItems.data.metadata?.verzoek?.ontvangstdatum && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Registration date")}, ${translateDate(i18n.language, getItems.data.metadata?.verzoek?.ontvangstdatum) ?? "-"}`}
+                    >
                       <TableCell>{t("Registration date")}</TableCell>
 
                       <TableCell>
@@ -120,16 +157,20 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                   )}
 
                   {getItems.data.metadata?.besluitdatum && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Decision date")}, ${translateDate(i18n.language, getItems.data.metadata?.besluitdatum) ?? "-"}`}
+                    >
                       <TableCell>{t("Decision date")} </TableCell>
                       <TableCell>{translateDate(i18n.language, getItems.data.metadata?.besluitdatum) ?? "-"}</TableCell>
                     </TableRow>
                   )}
 
                   {!_.isEmpty(getItems.data.themas) && (
-                    <TableRow className={styles.tableRow}>
-                      <TableCell>{t("Themes")}</TableCell>
-                      <TableCell>
+                    <TableRow className={styles.tableRow} tabIndex={0} aria-labelledby={"themesName themesData"}>
+                      <TableCell id="themesName">{t("Themes")}</TableCell>
+                      <TableCell id="themesData">
                         {getItems.data.themas.map((thema: any, idx: number) => (
                           <span key={idx}>
                             {thema.hoofdthema + (idx !== getItems.data.themas?.length - 1 ? ", " : "")}
@@ -140,7 +181,14 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                   )}
 
                   {getItems.data.metadata?.verzoek?.informatieverzoek && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Information request")}, ${
+                        getItems.data.metadata?.verzoek?.informatieverzoek?.titel ??
+                        getPDFName(getItems.data.metadata?.verzoek?.informatieverzoek?.url)
+                      }`}
+                    >
                       <TableCell>{t("Information request")}</TableCell>
                       <TableCell>
                         <Link href={getItems.data.metadata?.verzoek?.informatieverzoek?.url} target="blank">
@@ -153,7 +201,14 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
 
                   {(getItems.data.metadata?.verzoek?.besluit ||
                     (getItems.data.metadata?.verzoek?.besluit ?? getItems.data.metadata?.verzoek?.besluit?.url)) && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Decision")}, ${
+                        getItems.data.metadata?.verzoek?.besluit?.titel ??
+                        getPDFName(getItems.data.metadata?.verzoek?.besluit?.url)
+                      }`}
+                    >
                       <TableCell>{t("Decision")}</TableCell>
                       <TableCell>
                         {(getItems.data.metadata?.verzoek?.besluit ??
@@ -174,7 +229,14 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                   )}
 
                   {getItems.data.metadata?.verzoek?.inventarisatielijst && (
-                    <TableRow className={styles.tableRow}>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-label={`${t("Inventory list")}, ${
+                        getItems.data.metadata?.verzoek?.inventarisatielijst?.titel ??
+                        getPDFName(getItems.data.metadata?.verzoek?.inventarisatielijst?.url)
+                      }`}
+                    >
                       <TableCell>{t("Inventory list")}</TableCell>
                       <TableCell>
                         <Link href={getItems.data.metadata?.verzoek?.inventarisatielijst?.url} target="blank">
@@ -186,10 +248,14 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                   )}
 
                   {!_.isEmpty(getItems.data.bijlagen) && (
-                    <TableRow className={styles.tableRow}>
-                      <TableCell>{t("Attachments")}</TableCell>
+                    <TableRow
+                      className={styles.tableRow}
+                      tabIndex={0}
+                      aria-labelledby="attachmentsName attachmentsData"
+                    >
+                      <TableCell id="attachmentsName">{t("Attachments")}</TableCell>
                       <TableCell>
-                        <UnorderedList>
+                        <UnorderedList id="attachmentsData">
                           {getItems.data.bijlagen.map(
                             (bijlage: any, idx: number) =>
                               bijlage.titel && (
@@ -198,7 +264,7 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                                     href={bijlage.url?.length !== 0 ? bijlage.url : "#"}
                                     target={bijlage.url?.length !== 0 ? "blank" : ""}
                                   >
-                                    {bijlage.titel}
+                                    {bijlage.titel}.
                                   </Link>
                                 </UnorderedListItem>
                               ),
@@ -210,7 +276,7 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                 </TableBody>
               </Table>
             </HorizontalOverflowWrapper>
-          </>
+          </div>
         )}
         {getItems.isLoading && <Skeleton height={"200px"} />}
       </PageContent>

diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
@@ -19,6 +19,7 @@ export const en = {
   Filters: "Filters",
   View: "View",
   Pagination: "Pagination",
+  Details: "Details",
   "Jumbotron card": "Jumbotron card",
   "N/A": "N/A",
   "Details page": "Details page",
@@ -64,4 +65,6 @@ export const en = {
   "No municipality available": "No municipality available",
   "Woo Request": "Woo Request",
   "Language select": "Language select",
+  "Details table": "Details table",
+  "Title of woo request": "Title of woo request",
 };
diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
@@ -19,6 +19,7 @@ export const nl = {
   Filters: "Filters",
   View: "Weergave",
   Pagination: "Paginering",
+  Details: "Details",
   "Jumbotron card": "Jumbotron tegel",
   "N/A": "N.v.t",
   "Details page": "Detailpagina",
@@ -64,4 +65,6 @@ export const nl = {
   "No municipality available": "Geen gemeente beschikbaar",
   "Woo Request": "Woo Verzoek",
   "Language select": "Taal kiezen",
+  "Details table": "Detail tabel",
+  "Title of woo request": "Titel van Woo verzoek",
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -107,4 +107,4 @@ Het Woo Publicatie Object vormt de kern van zowel de Woo API als de Woo-website.

		## Roadmap

		Organisaties kunnen bijdragen aan de ontwikkeling van deze componenten door items aan te dragen, deze zelf op te pakken en uit te voeren, of door de uitvoering ervan te financieren. Voor het huidige overzicht, zie [Roadmap](/docs/product/roadmap).
		Organisaties kunnen bijdragen aan de ontwikkeling van deze componenten door items aan te dragen, deze zelf op te pakken en uit te voeren, of door de uitvoering ervan te financieren. Voor het huidige overzicht, zie [Roadmap](/docs/product/Roadmap.md).