added site improvements

ConductionNL · Jan 29, 2024 · 039c93f · 039c93f
1 parent 51d7a8f
commit 039c93f
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 142 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -82,7 +82,7 @@
     "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",

diff --git a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx b/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}

diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx
@@ -42,7 +42,7 @@ 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") }}
                   totalPages={getItems.data.pages}

diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx b/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)}

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

diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
@@ -35,3 +35,7 @@
 .languageSelectDisabled {
   opacity: 50%;
 }
+
+.languageSeperator {
+  user-select: none;
+}
diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/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>

diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx b/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>

diff --git a/pwa/src/translations/en.ts b/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",
 };
diff --git a/pwa/src/translations/nl.ts b/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",
 };