From 042b46cce77d62be9503d389255cf78366a74f4e Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 13 Feb 2024 11:58:15 +0100
Subject: [PATCH] WCAG

---
 .../TableResultsTemplate.tsx                  | 115 +++++++++---------
 1 file changed, 59 insertions(+), 56 deletions(-)

diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx
index fc3eb421..329fcc01 100644
--- a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx
+++ b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx
@@ -28,72 +28,75 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
         scrollRightButton: t("Scroll table to the right"),
       }}
     >
-      <Table className={styles.table} role="region" aria-label={t("Woo Request")}>
-        <TableHeader className={styles.tableHeader}>
-          <TableRow>
-            <TableHeaderCell>{t("Subject")}</TableHeaderCell>
-            <TableHeaderCell>{t("Publication date")}</TableHeaderCell>
-            {(window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ||
-              window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true") && (
-              <>
-                {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
-                  <TableHeaderCell>{t("Municipality")}</TableHeaderCell>
-                )}
-                {window.sessionStorage.getItem("SHOW_CATEGORY") === "true" && (
-                  <TableHeaderCell>{t("Category")}</TableHeaderCell>
-                )}
-              </>
-            )}
-            <TableHeaderCell>{t("Summary")}</TableHeaderCell>
-          </TableRow>
-        </TableHeader>
-        <TableBody className={styles.tableBody}>
-          {requests.map((request) => (
-            <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")
-              } ${
-                window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" ? `,${request.organisatie?.naam}` : ""
-              } ${window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ? `, ${request.categorie}` : ""}, ${
-                request.samenvatting
-              }`}
-            >
-              <TableCell>{request.titel ?? t("No subject available")}</TableCell>
-              <TableCell>
-                {request.publicatiedatum
-                  ? translateDate(i18n.language, request.publicatiedatum)
-                  : t("No publication date available")}
-              </TableCell>
+      <div role="region" aria-label={t("Woo Request")}>
+        <Table className={styles.table}>
+          <TableHeader className={styles.tableHeader}>
+            <TableRow>
+              <TableHeaderCell>{t("Subject")}</TableHeaderCell>
+              <TableHeaderCell>{t("Publication date")}</TableHeaderCell>
               {(window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ||
                 window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true") && (
                 <>
                   {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
-                    <TableCell className={styles.categoryAndMunicipality}>
-                      {request.organisatie?.naam ?? t("No municipality available")}
-                    </TableCell>
+                    <TableHeaderCell>{t("Municipality")}</TableHeaderCell>
                   )}
                   {window.sessionStorage.getItem("SHOW_CATEGORY") === "true" && (
-                    <TableCell
-                      className={clsx(
-                        window.sessionStorage.getItem("SHOW_ORGANIZATION") !== "true" && styles.categoryAndMunicipality,
-                      )}
-                    >
-                      {request.categorie ?? t("No category available")}
-                    </TableCell>
+                    <TableHeaderCell>{t("Category")}</TableHeaderCell>
                   )}
                 </>
               )}
-              <TableCell>
-                <div className={styles.description}>{request.samenvatting ?? t("No summary available")}</div>
-              </TableCell>
+              <TableHeaderCell>{t("Summary")}</TableHeaderCell>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+          </TableHeader>
+          <TableBody className={styles.tableBody}>
+            {requests.map((request) => (
+              <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")
+                } ${
+                  window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" ? `,${request.organisatie?.naam}` : ""
+                } ${window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ? `, ${request.categorie}` : ""}, ${
+                  request.samenvatting ?? t("No summary available")
+                }`}
+              >
+                <TableCell>{request.titel ?? t("No subject available")}</TableCell>
+                <TableCell>
+                  {request.publicatiedatum
+                    ? translateDate(i18n.language, request.publicatiedatum)
+                    : t("No publication date available")}
+                </TableCell>
+                {(window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ||
+                  window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true") && (
+                  <>
+                    {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
+                      <TableCell className={styles.categoryAndMunicipality}>
+                        {request.organisatie?.naam ?? t("No municipality available")}
+                      </TableCell>
+                    )}
+                    {window.sessionStorage.getItem("SHOW_CATEGORY") === "true" && (
+                      <TableCell
+                        className={clsx(
+                          window.sessionStorage.getItem("SHOW_ORGANIZATION") !== "true" &&
+                            styles.categoryAndMunicipality,
+                        )}
+                      >
+                        {request.categorie ?? t("No category available")}
+                      </TableCell>
+                    )}
+                  </>
+                )}
+                <TableCell>
+                  <div className={styles.description}>{request.samenvatting ?? t("No summary available")}</div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
     </HorizontalOverflowWrapper>
   );
 };