Development to main

.github/workflows/pull-request-build-check.yml

@@ -20,6 +20,12 @@ jobs:
       - name: Parcel/watcher
         run: npm i @parcel/watcher
 
+      - name: Sass
+        run: npm i sass
+
+      - name: Style Dictionary
+        run: npm i style-dictionary
+
       - name: Install dependencies
         run: cd pwa && npm i
 

pwa/package.json

@@ -25,8 +25,8 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.44",
-    "@conduction/theme": "1.1.12",
+    "@conduction/components": "2.2.45",
+    "@conduction/theme": "1.1.15",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "6.5.1",
     "@fortawesome/free-regular-svg-icons": "6.5.1",
@@ -82,14 +82,16 @@
     "react-dom": "^18.2.0",
     "react-favicon": "^2.0.3",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "7.49.3",
+    "react-hook-form": "7.48.2",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^13.5.0",
     "react-loading-skeleton": "^3.3.1",
     "react-paginate": "^8.2.0",
     "react-query": "^3.39.3",
     "react-select": "^5.8.0",
-    "showdown": "^2.1.0"
+    "sass": "^1.70.0",
+    "showdown": "^2.1.0",
+    "style-dictionary": "^3.9.2"
   },
   "devDependencies": {
     "@parcel/watcher": "^2.4.0",

pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx

@@ -17,7 +17,11 @@ const ResultsDisplaySwitch: React.FC<ResultsDisplaySwitchProps> = ({ layoutClass
   const { t } = useTranslation();
 
   return (
-    <ButtonGroup className={clsx(styles.container, layoutClassName && layoutClassName)}>
+    <ButtonGroup
+      role="region"
+      aria-label={t("View")}
+      className={clsx(styles.container, layoutClassName && layoutClassName)}
+    >
       <Button
         appearance={isActive(displayKey, "cards") ? "primary-action-button" : "secondary-action-button"}
         className={styles.button}

pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx

@@ -9,8 +9,6 @@ export const JumbotronTemplate: React.FC = () => {
 
   return (
     <div
-      aria-label={t("Jumbotron")}
-      role="contentinfo"
       style={{ backgroundImage: `url("${window.sessionStorage.getItem("JUMBOTRON_IMAGE_URL")}")` }}
       className={styles.wrapper}
     >

pwa/src/templates/landing/LandingTemplate.tsx

@@ -16,7 +16,7 @@ import { PaginationLimitSelectComponent } from "../../components/paginationLimit
 
 export const LandingTemplate: React.FC = () => {
   const { t } = useTranslation();
-  const { filters } = useFiltersContext();
+  const { filters } = useFiltersContext(); 
   const { pagination, setPagination } = usePaginationContext();
   const { queryLimit, setQueryLimit } = useQueryLimitContext();
 
@@ -42,9 +42,14 @@ export const LandingTemplate: React.FC = () => {
           {getItems.data?.results && getItems.data?.results?.length > 0 && (
             <div id="mainContent">
               <ResultsDisplayTemplate displayKey="landing-results" requests={getItems.data.results} />
-              <div className={styles.pagination}>
+              <div role="region" aria-label={t("Pagination")} className={styles.pagination}>
                 <Pagination
-                  ariaLabels={{ previousPage: t("Previous page"), nextPage: t("Next page"), page: t("Page") }}
+                  ariaLabels={{
+                    pagination: t("Pagination"),
+                    previousPage: t("Previous page"),
+                    nextPage: t("Next page"),
+                    page: t("Page"),
+                  }}
                   totalPages={getItems.data.pages}
                   currentPage={getItems.data.page}
                   setCurrentPage={(page: any) => setPagination({ currentPage: page })}

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

@@ -16,9 +16,10 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
 
   return (
     <>
-      <div className={styles.componentsGrid}>
+      <div className={styles.componentsGrid} role="region" aria-label={t("Woo Request")}>
         {requests.map((request) => (
           <CardWrapper
+            role="region"
             key={request._id}
             className={styles.cardContainer}
             onClick={() => navigate(request._id)}

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

@@ -124,7 +124,7 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
 
   return (
     <div id="filters" className={styles.container}>
-      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+      <form role="region" aria-label={t("Filters")} onSubmit={handleSubmit(onSubmit)} className={styles.form}>
         <InputText
           name="_search"
           placeholder={`${t("Search")}..`}

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

@@ -35,3 +35,7 @@
 .languageSelectDisabled {
   opacity: 50%;
 }
+
+.languageSeperator {
+  user-select: none;
+}

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

@@ -17,7 +17,7 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
 
   return (
     <PageHeader className={clsx(layoutClassName && layoutClassName)}>
-      <div className={styles.container}>
+      <div role="navigation" aria-label="skip" className={styles.container}>
         <div className={styles.skipLinkContainer}>
           <SkipLink href="#filters" tabIndex={gatsbyContext.location.pathname === "/" ? 0 : -1}>
             {t("Skip to filters")}
@@ -28,26 +28,34 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
         </div>
         <div className={styles.navContainer}>
           <Logo onClick={() => navigate("/")} />
-
-          <div className={styles.languageSelectContainer}>
+          <nav role="navigation" aria-label={t("Language select")} 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"
+              role="button"
+              aria-pressed={i18n.language === "nl" ? true : false}
+              aria-disabled={i18n.language === "nl" ? true : false}
             >
               NL
-            </span>{" "}
-            /{" "}
+            </span>
+            <span className={styles.languageSeperator} aria-hidden="true">
+              {" "}
+              /{" "}
+            </span>
             <span
               className={clsx(styles.languageSelect, i18n.language === "en" && styles.languageSelectDisabled)}
               onClick={() => i18n.changeLanguage("en")}
               tabIndex={0}
               aria-label="Translate page to English"
+              role="button"
+              aria-pressed={i18n.language === "en" ? true : false}
+              aria-disabled={i18n.language === "en" ? true : false}
             >
               EN
             </span>
-          </div>
+          </nav>
         </div>
       </div>
     </PageHeader>

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

@@ -28,7 +28,7 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
         scrollRightButton: t("Scroll table to the right"),
       }}
     >
-      <Table className={styles.table}>
+      <Table className={styles.table} role="region" aria-label={t("Woo Request")}>
         <TableHeader className={styles.tableHeader}>
           <TableRow>
             <TableHeaderCell>{t("Subject")}</TableHeaderCell>

pwa/src/translations/en.ts

@@ -16,6 +16,9 @@ export const en = {
   Jumbotron: "Jumbotron",
   Limit: "Limit",
   Municipality: "Municipality",
+  Filters: "Filters",
+  View: "View",
+  Pagination: "Pagination",
   "Jumbotron card": "Jumbotron card",
   "N/A": "N/A",
   "Details page": "Details page",
@@ -59,4 +62,6 @@ export const en = {
   "Scroll table to the right": "Scroll table to the right",
   "No category available": "No category available",
   "No municipality available": "No municipality available",
+  "Woo Request": "Woo Request",
+  "Language select": "Language select",
 };

pwa/src/translations/nl.ts

@@ -16,6 +16,9 @@ export const nl = {
   Jumbotron: "Jumbotron",
   Limit: "Limiet",
   Municipality: "Gemeente",
+  Filters: "Filters",
+  View: "Weergave",
+  Pagination: "Paginering",
   "Jumbotron card": "Jumbotron tegel",
   "N/A": "N.v.t",
   "Details page": "Detailpagina",
@@ -59,4 +62,6 @@ export const nl = {
   "Scroll table to the right": "Scroll tabel naar rechts",
   "No category available": "Geen categorie beschikbaar",
   "No municipality available": "Geen gemeente beschikbaar",
+  "Woo Request": "Woo Verzoek",
+  "Language select": "Taal kiezen",
 };