@conduction/components 2.2.55 → 2.2.56

package/README.md

@@ -4,10 +4,12 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.56: Fixed WCAG issue in Pagination by adding aria labels to buttons
   - 2.2.55: 
     - Updated Logo to accept aria-label for accessibility.
     - Fixed bug in DisplaySwitch where layoutClassName is added even when empty.
     - Fixed color of the Select dropdown icon to be WCAG-AA compliant.
+    - Added more WCAG roles and support to Select box.
   - 2.2.54: Updated CardHeader to allow padding-block-end on title.
   - 2.2.53: Updated Pagination and PrimaryTopNav components to allow text-decorations and border-bottoms.
   - 2.2.52: Added hover filter to Logo component.

package/lib/components/Pagination/Pagination.js

@@ -31,5 +31,5 @@ export const Pagination = ({ totalPages, currentPage, setCurrentPage, ariaLabels
         };
         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 }) }) }));
+    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, "aria-label": ariaLabels.nextPage, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { tabIndex: -1, className: styles.button, "aria-label": ariaLabels.previousPage, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
 };

package/package.json

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

package/src/components/Pagination/Pagination.tsx

@@ -1,87 +1,87 @@
-import * as React from "react";
-import * as styles from "./Pagination.module.css";
-import clsx from "clsx";
-
-import ReactPaginate from "react-paginate";
-import { Button } from "@utrecht/component-library-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-
-interface PaginationProps {
-  totalPages: number;
-  currentPage: number;
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
-  ariaLabels: {
-    pagination: string;
-    nextPage: string;
-    previousPage: string;
-    page: string;
-  };
-  layoutClassName?: string;
-}
-
-export const Pagination: React.FC<PaginationProps> = ({
-  totalPages,
-  currentPage,
-  setCurrentPage,
-  ariaLabels,
-  layoutClassName,
-}) => {
-  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)}
-      disabledClassName={styles.disabled}
-      activeClassName={styles.currentPage}
-      onPageChange={(e: any) => setCurrentPage(e.selected + 1)}
-      forcePage={currentPage - 1}
-      pageRangeDisplayed={3}
-      pageCount={totalPages}
-      disableInitialCallback
-      marginPagesDisplayed={2}
-      breakLabel="..."
-      nextClassName={styles.next}
-      previousClassName={styles.previous}
-      nextAriaLabel={ariaLabels.nextPage}
-      previousAriaLabel={ariaLabels.previousPage}
-      ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
-      nextLabel={
-        <Button tabIndex={-1} className={styles.button}>
-          <FontAwesomeIcon icon={faChevronRight} />
-        </Button>
-      }
-      previousLabel={
-        <Button tabIndex={-1} className={styles.button}>
-          <FontAwesomeIcon icon={faChevronLeft} />
-        </Button>
-      }
-    />
-  );
-};
+import * as React from "react";
+import * as styles from "./Pagination.module.css";
+import clsx from "clsx";
+
+import ReactPaginate from "react-paginate";
+import { Button } from "@utrecht/component-library-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+
+interface PaginationProps {
+  totalPages: number;
+  currentPage: number;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  ariaLabels: {
+    pagination: string;
+    nextPage: string;
+    previousPage: string;
+    page: string;
+  };
+  layoutClassName?: string;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  totalPages,
+  currentPage,
+  setCurrentPage,
+  ariaLabels,
+  layoutClassName,
+}) => {
+  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)}
+      disabledClassName={styles.disabled}
+      activeClassName={styles.currentPage}
+      onPageChange={(e: any) => setCurrentPage(e.selected + 1)}
+      forcePage={currentPage - 1}
+      pageRangeDisplayed={3}
+      pageCount={totalPages}
+      disableInitialCallback
+      marginPagesDisplayed={2}
+      breakLabel="..."
+      nextClassName={styles.next}
+      previousClassName={styles.previous}
+      nextAriaLabel={ariaLabels.nextPage}
+      previousAriaLabel={ariaLabels.previousPage}
+      ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
+      nextLabel={
+        <Button tabIndex={-1} className={styles.button} aria-label={ariaLabels.nextPage}>
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      }
+      previousLabel={
+        <Button tabIndex={-1} className={styles.button} aria-label={ariaLabels.previousPage}>
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      }
+    />
+  );
+};