diff --git a/README.md b/README.md index 348e375..ad3e0ac 100644 --- a/README.md +++ b/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: diff --git a/package.json b/package.json index 524fa83..28e1f36 100644 --- a/package.json +++ b/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": { 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>; ariaLabels: { + pagination: string; nextPage: string; previousPage: string; page: string; @@ -28,6 +29,32 @@ export const Pagination: React.FC = ({ }) => { 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 ( { 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"); }); };