@conduction/components 2.2.44 → 2.2.45

package/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/lib/components/Pagination/Pagination.d.ts

@@ -4,6 +4,7 @@ interface PaginationProps {
     currentPage: number;
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     ariaLabels: {
+        pagination: string;
         nextPage: string;
         previousPage: string;
         page: string;

package/lib/components/Pagination/Pagination.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import * as styles from "./Pagination.module.css";
 import clsx from "clsx";
 import ReactPaginate from "react-paginate";
@@ -8,5 +9,27 @@ import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons
 export const Pagination = ({ totalPages, currentPage, setCurrentPage, ariaLabels, layoutClassName, }) => {
     if (totalPages < 1)
         return _jsx(_Fragment, {}); // no pages available
+    const setAttributes = () => {
+        const setRoleToPresentation = (selector) => {
+            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) => {
+            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 (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextClassName: styles.next, previousClassName: styles.previous, nextAriaLabel: ariaLabels.nextPage, previousAriaLabel: ariaLabels.previousPage, ariaLabelBuilder: (currentPage) => `${ariaLabels.page} ${currentPage}`, nextLabel: _jsx(Button, { tabIndex: -1, className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { tabIndex: -1, className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
 };

package/lib/components/formFields/select/select.js

@@ -42,6 +42,9 @@ const setAttributes = () => {
         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");
         });
     };
     setRoleToPresentation('[id*="live-region"]', "presentation");

package/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": {

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

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