@conduction/components 2.2.11 → 2.2.12

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 (5) hide show
  1. package/README.md +1 -0
  2. package/lib/components/formFields/select/select.d.ts +4 -3
  3. package/lib/components/formFields/select/select.js +58 -6
  4. package/package.json +1 -1
  5. package/src/components/formFields/select/select.tsx +58 -0
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.12: Updated Select components to WCAG with aria-label and role.
7
8
  - 2.2.11: Updated Primary and Secondary topnav to NLDS.
8
9
  - 2.2.10: Added z-index to tooltip.
9
10
  - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index.
package/lib/components/formFields/select/select.d.ts CHANGED
@@ -9,6 +9,7 @@ interface ISelectProps {
9
9
  value: string;
10
10
  }[];
11
11
  name: string;
12
+ ariaLabel?: string;
12
13
  id?: string;
13
14
  defaultValue?: any;
14
15
  disabled?: boolean;
@@ -17,7 +18,7 @@ interface ISelectProps {
17
18
  menuPlacement?: MenuPlacement;
18
19
  placeholder?: string;
19
20
  }
20
- export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
21
- export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
22
- export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
21
+ export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
22
+ export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
23
+ export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
23
24
  export {};
package/lib/components/formFields/select/select.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import * as styles from "./select.module.css";
3
4
  import { Controller } from "react-hook-form";
4
5
  import ReactSelect from "react-select";
@@ -41,18 +42,69 @@ const selectMultiStyles = {
41
42
  color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
42
43
  }),
43
44
  };
44
- export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
45
+ export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
46
+ React.useEffect(() => {
47
+ document.querySelectorAll('[id*="live-region"]').forEach((element) => {
48
+ if (element?.role !== "presentation") {
49
+ element.setAttribute("role", "presentation");
50
+ }
51
+ });
52
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
53
+ if (element.role !== "presentation") {
54
+ element.setAttribute("role", "presentation");
55
+ }
56
+ });
57
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
58
+ if (element.role !== "presentation") {
59
+ element.setAttribute("role", "presentation");
60
+ }
61
+ });
62
+ }, []);
45
63
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
46
- return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
64
+ return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
47
65
  } }));
48
66
  };
49
- export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
67
+ export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
68
+ React.useEffect(() => {
69
+ document.querySelectorAll('[id*="live-region"]').forEach((element) => {
70
+ if (element.role !== "presentation") {
71
+ element.setAttribute("role", "presentation");
72
+ }
73
+ });
74
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
75
+ if (element.role !== "presentation") {
76
+ element.setAttribute("role", "presentation");
77
+ }
78
+ });
79
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
80
+ if (element.role !== "presentation") {
81
+ element.setAttribute("role", "presentation");
82
+ }
83
+ });
84
+ }, []);
50
85
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
51
- return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
86
+ return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
52
87
  } }));
53
88
  };
54
- export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
89
+ export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
90
+ React.useEffect(() => {
91
+ document.querySelectorAll('[id*="live-region"]').forEach((element) => {
92
+ if (element.role !== "presentation") {
93
+ element.setAttribute("role", "presentation");
94
+ }
95
+ });
96
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
97
+ if (element.role !== "presentation") {
98
+ element.setAttribute("role", "presentation");
99
+ }
100
+ });
101
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
102
+ if (element.role !== "presentation") {
103
+ element.setAttribute("role", "presentation");
104
+ }
105
+ });
106
+ }, []);
55
107
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
56
- return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
108
+ return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
57
109
  } }));
58
110
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.11",
3
+ "version": "2.2.12",
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/formFields/select/select.tsx CHANGED
@@ -11,6 +11,7 @@ interface ISelectProps {
11
11
  control: Control<FieldValues, any>;
12
12
  options: { label: string; value: string }[];
13
13
  name: string;
14
+ ariaLabel?: string;
14
15
  id?: string;
15
16
  defaultValue?: any;
16
17
  disabled?: boolean;
@@ -72,7 +73,25 @@ export const SelectMultiple = ({
72
73
  hideErrorMessage,
73
74
  menuPlacement,
74
75
  placeholder,
76
+ ariaLabel,
75
77
  }: ISelectProps & IReactHookFormProps): JSX.Element => {
78
+ React.useEffect(() => {
79
+ document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
80
+ if (element?.role !== "presentation") {
81
+ element.setAttribute("role", "presentation");
82
+ }
83
+ });
84
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
85
+ if (element.role !== "presentation") {
86
+ element.setAttribute("role", "presentation");
87
+ }
88
+ });
89
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
90
+ if (element.role !== "presentation") {
91
+ element.setAttribute("role", "presentation");
92
+ }
93
+ });
94
+ }, []);
76
95
  return (
77
96
  <Controller
78
97
  {...{ control, name, defaultValue }}
@@ -81,6 +100,7 @@ export const SelectMultiple = ({
81
100
  return (
82
101
  <>
83
102
  <ReactSelect
103
+ aria-label={ariaLabel}
84
104
  inputId={id}
85
105
  value={value ?? ""}
86
106
  className={clsx(styles.select, errors[name] && styles.error)}
@@ -112,7 +132,25 @@ export const SelectCreate = ({
112
132
  hideErrorMessage,
113
133
  menuPlacement,
114
134
  placeholder,
135
+ ariaLabel,
115
136
  }: ISelectProps & IReactHookFormProps): JSX.Element => {
137
+ React.useEffect(() => {
138
+ document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
139
+ if (element.role !== "presentation") {
140
+ element.setAttribute("role", "presentation");
141
+ }
142
+ });
143
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
144
+ if (element.role !== "presentation") {
145
+ element.setAttribute("role", "presentation");
146
+ }
147
+ });
148
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
149
+ if (element.role !== "presentation") {
150
+ element.setAttribute("role", "presentation");
151
+ }
152
+ });
153
+ }, []);
116
154
  return (
117
155
  <Controller
118
156
  {...{ control, name, defaultValue }}
@@ -121,6 +159,7 @@ export const SelectCreate = ({
121
159
  return (
122
160
  <>
123
161
  <CreatableSelect
162
+ aria-label={ariaLabel}
124
163
  inputId={id}
125
164
  value={value ?? ""}
126
165
  placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
@@ -153,7 +192,25 @@ export const SelectSingle = ({
153
192
  hideErrorMessage,
154
193
  menuPlacement,
155
194
  placeholder,
195
+ ariaLabel,
156
196
  }: ISelectProps & IReactHookFormProps): JSX.Element => {
197
+ React.useEffect(() => {
198
+ document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
199
+ if (element.role !== "presentation") {
200
+ element.setAttribute("role", "presentation");
201
+ }
202
+ });
203
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
204
+ if (element.role !== "presentation") {
205
+ element.setAttribute("role", "presentation");
206
+ }
207
+ });
208
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
209
+ if (element.role !== "presentation") {
210
+ element.setAttribute("role", "presentation");
211
+ }
212
+ });
213
+ }, []);
157
214
  return (
158
215
  <Controller
159
216
  {...{ control, name, defaultValue }}
@@ -162,6 +219,7 @@ export const SelectSingle = ({
162
219
  return (
163
220
  <>
164
221
  <ReactSelect
222
+ aria-label={ariaLabel}
165
223
  inputId={id}
166
224
  value={value ?? ""}
167
225
  className={clsx(styles.select, errors[name] && styles.error)}