From 8df53e598919c97b80bb41dfbfeaf1e199ab811f Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 30 Jan 2024 12:34:12 +0100
Subject: [PATCH] updated Pagination and select to ensure more WCAG compliancy

---
 src/components/Pagination/Pagination.tsx    | 27 +++++++++++++++++++++
 src/components/formFields/select/select.tsx |  3 +++
 2 files changed, 30 insertions(+)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index ea4fa74..aa241ce 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -12,6 +12,7 @@ interface PaginationProps {
   currentPage: number;
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
   ariaLabels: {
+    pagination: string;
     nextPage: string;
     previousPage: string;
     page: string;
@@ -28,6 +29,32 @@ export const Pagination: React.FC<PaginationProps> = ({
 }) => {
   if (totalPages < 1) return <></>; // no pages available
 
+  const setAttributes = (): void => {
+    const setRoleToPresentation = (selector: string) => {
+      document.querySelectorAll(selector).forEach((element) => {
+        if (element.getAttribute("role") !== "list") element.setAttribute("role", "list");
+      });
+    };
+
+    setRoleToPresentation('ul[role*="navigation"][class*="Pagination"][aria-label="Pagination"]');
+  };
+
+  React.useEffect(() => {
+    setAttributes();
+  }, []);
+
+  React.useEffect(() => {
+    const setRoleToPresentation = (selector: string) => {
+      document.querySelectorAll(selector).forEach((element) => {
+        if (element.getAttribute("aria-label") !== ariaLabels.pagination) {
+          element.setAttribute("aria-label", ariaLabels.pagination);
+        }
+      });
+    };
+
+    setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
+  }, [ariaLabels.pagination]);
+
   return (
     <ReactPaginate
       className={clsx(styles.container, layoutClassName && layoutClassName)}
diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
index 8a4a1d5..4717fbc 100644
--- a/src/components/formFields/select/select.tsx
+++ b/src/components/formFields/select/select.tsx
@@ -62,6 +62,9 @@ const setAttributes = (): void => {
   const setRoleToPresentation = (selector: string, role: string) => {
     document.querySelectorAll(selector).forEach((element) => {
       if (element.getAttribute("role") !== "presentation") element.setAttribute("role", role);
+      element.removeAttribute("aria-relevant");
+      element.removeAttribute("aria-atomic");
+      element.removeAttribute("aria-live");
     });
   };