updated Pagination and select to ensure more WCAG compliancy

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)}

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");
     });
   };