Merge pull request #179 from ConductionNL/feature/WOO-56/WCAG-improve…

…ments

feature/WOO-56/WCAG-improvements

README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.45: Updated Pagination and select to ensure more WCAG compliancy.
   - 2.2.44: Updated PrimaryTopNav to allow font-weight.
   - 2.2.43: Updated DownloadCard to allow size as string.
   - 2.2.42:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.44",
+  "version": "2.2.45",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

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