@conduction/components 2.2.43 → 2.2.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +2 -0
  2. package/lib/components/Pagination/Pagination.d.ts +1 -0
  3. package/lib/components/Pagination/Pagination.js +23 -0
  4. package/lib/components/formFields/select/select.js +3 -0
  5. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +6 -1
  6. package/package.json +1 -1
  7. package/src/components/Pagination/Pagination.tsx +27 -0
  8. package/src/components/formFields/select/select.tsx +3 -0
  9. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +6 -1
package/README.md CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.45: Updated Pagination and select to ensure more WCAG compliancy.
8
+ - 2.2.44: Updated PrimaryTopNav to allow font-weight.
7
9
  - 2.2.43: Updated DownloadCard to allow size as string.
8
10
  - 2.2.42:
9
11
  - Updated PrimaryTopNav to have seperate dropdown tokens.
package/lib/components/Pagination/Pagination.d.ts CHANGED
@@ -4,6 +4,7 @@ interface PaginationProps {
4
4
  currentPage: number;
5
5
  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
6
6
  ariaLabels: {
7
+ pagination: string;
7
8
  nextPage: string;
8
9
  previousPage: string;
9
10
  page: string;
package/lib/components/Pagination/Pagination.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import * as styles from "./Pagination.module.css";
3
4
  import clsx from "clsx";
4
5
  import ReactPaginate from "react-paginate";
@@ -8,5 +9,27 @@ import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons
8
9
  export const Pagination = ({ totalPages, currentPage, setCurrentPage, ariaLabels, layoutClassName, }) => {
9
10
  if (totalPages < 1)
10
11
  return _jsx(_Fragment, {}); // no pages available
12
+ const setAttributes = () => {
13
+ const setRoleToPresentation = (selector) => {
14
+ document.querySelectorAll(selector).forEach((element) => {
15
+ if (element.getAttribute("role") !== "list")
16
+ element.setAttribute("role", "list");
17
+ });
18
+ };
19
+ setRoleToPresentation('ul[role*="navigation"][class*="Pagination"][aria-label="Pagination"]');
20
+ };
21
+ React.useEffect(() => {
22
+ setAttributes();
23
+ }, []);
24
+ React.useEffect(() => {
25
+ const setRoleToPresentation = (selector) => {
26
+ document.querySelectorAll(selector).forEach((element) => {
27
+ if (element.getAttribute("aria-label") !== ariaLabels.pagination) {
28
+ element.setAttribute("aria-label", ariaLabels.pagination);
29
+ }
30
+ });
31
+ };
32
+ setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
33
+ }, [ariaLabels.pagination]);
11
34
  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 }) }) }));
12
35
  };
package/lib/components/formFields/select/select.js CHANGED
@@ -42,6 +42,9 @@ const setAttributes = () => {
42
42
  document.querySelectorAll(selector).forEach((element) => {
43
43
  if (element.getAttribute("role") !== "presentation")
44
44
  element.setAttribute("role", role);
45
+ element.removeAttribute("aria-relevant");
46
+ element.removeAttribute("aria-atomic");
47
+ element.removeAttribute("aria-live");
45
48
  });
46
49
  };
47
50
  setRoleToPresentation('[id*="live-region"]', "presentation");
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -110,6 +110,7 @@
110
110
 
111
111
  .currentLink {
112
112
  color: var(--conduction-primary-top-nav-current-color) !important;
113
+ font-weight: var(--conduction-primary-top-nav-current-font-weight);
113
114
  }
114
115
 
115
116
  .currentLink svg path {
@@ -127,10 +128,12 @@
127
128
 
128
129
  .dropdownCurrent:hover > .dropdownCurrentLink {
129
130
  color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color)) !important;
131
+ font-weight: var(--conduction-primary-top-nav-dropdown-current-font-weight) !important;
130
132
  }
131
133
 
132
134
  .dropdownCurrentLink {
133
135
  color: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
136
+ font-weight: var(--conduction-primary-top-nav-dropdown-current-font-weight);
134
137
  }
135
138
 
136
139
  .dropdownCurrentLink svg path {
@@ -158,8 +161,9 @@
158
161
  fill: var(--conduction-primary-top-nav-color);
159
162
  }
160
163
 
161
- .primary .li:hover .link {
164
+ .primary .li:hover > .link {
162
165
  color: var(--conduction-primary-top-nav-hover-color);
166
+ font-weight: var(--conduction-primary-top-nav-hover-font-weight);
163
167
  }
164
168
 
165
169
  .primary .li:hover svg path {
@@ -203,6 +207,7 @@
203
207
 
204
208
  .primary .dropdown .li:hover .link {
205
209
  color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
210
+ font-weight: var(--conduction-primary-top-nav-dropdown-hover-font-weight);
206
211
  }
207
212
 
208
213
  .dropdown .li:hover {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.43",
3
+ "version": "2.2.45",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/Pagination/Pagination.tsx CHANGED
@@ -12,6 +12,7 @@ interface PaginationProps {
12
12
  currentPage: number;
13
13
  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
14
14
  ariaLabels: {
15
+ pagination: string;
15
16
  nextPage: string;
16
17
  previousPage: string;
17
18
  page: string;
@@ -28,6 +29,32 @@ export const Pagination: React.FC<PaginationProps> = ({
28
29
  }) => {
29
30
  if (totalPages < 1) return <></>; // no pages available
30
31
 
32
+ const setAttributes = (): void => {
33
+ const setRoleToPresentation = (selector: string) => {
34
+ document.querySelectorAll(selector).forEach((element) => {
35
+ if (element.getAttribute("role") !== "list") element.setAttribute("role", "list");
36
+ });
37
+ };
38
+
39
+ setRoleToPresentation('ul[role*="navigation"][class*="Pagination"][aria-label="Pagination"]');
40
+ };
41
+
42
+ React.useEffect(() => {
43
+ setAttributes();
44
+ }, []);
45
+
46
+ React.useEffect(() => {
47
+ const setRoleToPresentation = (selector: string) => {
48
+ document.querySelectorAll(selector).forEach((element) => {
49
+ if (element.getAttribute("aria-label") !== ariaLabels.pagination) {
50
+ element.setAttribute("aria-label", ariaLabels.pagination);
51
+ }
52
+ });
53
+ };
54
+
55
+ setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
56
+ }, [ariaLabels.pagination]);
57
+
31
58
  return (
32
59
  <ReactPaginate
33
60
  className={clsx(styles.container, layoutClassName && layoutClassName)}
package/src/components/formFields/select/select.tsx CHANGED
@@ -62,6 +62,9 @@ const setAttributes = (): void => {
62
62
  const setRoleToPresentation = (selector: string, role: string) => {
63
63
  document.querySelectorAll(selector).forEach((element) => {
64
64
  if (element.getAttribute("role") !== "presentation") element.setAttribute("role", role);
65
+ element.removeAttribute("aria-relevant");
66
+ element.removeAttribute("aria-atomic");
67
+ element.removeAttribute("aria-live");
65
68
  });
66
69
  };
67
70
 
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -110,6 +110,7 @@
110
110
 
111
111
  .currentLink {
112
112
  color: var(--conduction-primary-top-nav-current-color) !important;
113
+ font-weight: var(--conduction-primary-top-nav-current-font-weight);
113
114
  }
114
115
 
115
116
  .currentLink svg path {
@@ -127,10 +128,12 @@
127
128
 
128
129
  .dropdownCurrent:hover > .dropdownCurrentLink {
129
130
  color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color)) !important;
131
+ font-weight: var(--conduction-primary-top-nav-dropdown-current-font-weight) !important;
130
132
  }
131
133
 
132
134
  .dropdownCurrentLink {
133
135
  color: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
136
+ font-weight: var(--conduction-primary-top-nav-dropdown-current-font-weight);
134
137
  }
135
138
 
136
139
  .dropdownCurrentLink svg path {
@@ -158,8 +161,9 @@
158
161
  fill: var(--conduction-primary-top-nav-color);
159
162
  }
160
163
 
161
- .primary .li:hover .link {
164
+ .primary .li:hover > .link {
162
165
  color: var(--conduction-primary-top-nav-hover-color);
166
+ font-weight: var(--conduction-primary-top-nav-hover-font-weight);
163
167
  }
164
168
 
165
169
  .primary .li:hover svg path {
@@ -203,6 +207,7 @@
203
207
 
204
208
  .primary .dropdown .li:hover .link {
205
209
  color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
210
+ font-weight: var(--conduction-primary-top-nav-dropdown-hover-font-weight);
206
211
  }
207
212
 
208
213
  .dropdown .li:hover {