carbon-react 143.2.1 → 143.2.2

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 (3) hide show
  1. package/esm/components/switch/switch.component.js +30 -11
  2. package/lib/components/switch/switch.component.js +29 -10
  3. package/package.json +1 -1
package/esm/components/switch/switch.component.js CHANGED
@@ -1,4 +1,5 @@
1
- import React, { useState, useCallback, useContext } from "react";
1
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
+ import React, { useState, useCallback, useContext, useRef } from "react";
2
3
  import PropTypes from "prop-types";
3
4
  import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style";
4
5
  import CheckableInput from "../../__internal__/checkable-input";
@@ -11,6 +12,7 @@ import NewValidationContext from "../carbon-provider/__internal__/new-validation
11
12
  import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
12
13
  import Box from "../box";
13
14
  import Label from "../../__internal__/label";
15
+ import guid from "../../__internal__/utils/helpers/guid";
14
16
  let deprecateUncontrolledWarnTriggered = false;
15
17
  const Switch = /*#__PURE__*/React.forwardRef(({
16
18
  autoFocus,
@@ -25,6 +27,8 @@ const Switch = /*#__PURE__*/React.forwardRef(({
25
27
  disabled,
26
28
  loading,
27
29
  reverse = true,
30
+ required,
31
+ isOptional,
28
32
  validationOnLabel = false,
29
33
  labelInline = false,
30
34
  labelSpacing,
@@ -47,6 +51,9 @@ const Switch = /*#__PURE__*/React.forwardRef(({
47
51
  const {
48
52
  validationRedesignOptIn
49
53
  } = useContext(NewValidationContext);
54
+ const labelId = useRef(`${guid()}-label`);
55
+ const inputHintId = useRef(`${guid()}-hint`);
56
+ const validationMessageId = useRef(`${guid()}-message`);
50
57
  const [checkedInternal, setCheckedInternal] = useState(defaultChecked || false);
51
58
  if (!deprecateUncontrolledWarnTriggered && !onChange) {
52
59
  deprecateUncontrolledWarnTriggered = true;
@@ -113,6 +120,8 @@ const Switch = /*#__PURE__*/React.forwardRef(({
113
120
  // switched to preserve backward compatibility
114
121
  validationOnLabel: shouldValidationBeOnLabel && !disabled,
115
122
  ref,
123
+ required,
124
+ isOptional,
116
125
  ...rest
117
126
  };
118
127
 
@@ -136,8 +145,8 @@ const Switch = /*#__PURE__*/React.forwardRef(({
136
145
  };
137
146
  const inputPropsForNewValidation = {
138
147
  autoFocus,
139
- error,
140
- warning,
148
+ // set aria-invalid but prevent validationIconId from being added to aria-describedby
149
+ error: !!error,
141
150
  disabled: disabled || loading,
142
151
  loading,
143
152
  checked: isControlled ? checked : checkedInternal,
@@ -150,23 +159,33 @@ const Switch = /*#__PURE__*/React.forwardRef(({
150
159
  type: "checkbox",
151
160
  role: "switch",
152
161
  ref,
162
+ required,
163
+ isOptional,
153
164
  ...rest
154
165
  };
155
166
  const applyValidation = error || warning;
156
- return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Box, {
157
- "data-role": "hint-text-wrapper",
158
- mb: labelHelp ? 0 : 1
159
- }, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, {
160
- "data-role": "hint-text"
161
- }, labelHelp)), /*#__PURE__*/React.createElement(Box, {
167
+ const ariaDescribedBy = [labelHelp && inputHintId.current, applyValidation && validationMessageId.current].filter(Boolean).join(" ");
168
+ return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, {
169
+ labelId: labelId.current,
170
+ disabled: disabled,
171
+ isRequired: required,
172
+ optional: isOptional
173
+ }, label), labelHelp && /*#__PURE__*/React.createElement(StyledHintText, {
174
+ "data-role": "hint-text",
175
+ id: inputHintId.current
176
+ }, labelHelp), /*#__PURE__*/React.createElement(Box, {
162
177
  position: "relative"
163
178
  }, /*#__PURE__*/React.createElement(ValidationMessage, {
164
179
  error: error,
165
- warning: warning
180
+ warning: warning,
181
+ validationId: validationMessageId.current
166
182
  }), applyValidation && /*#__PURE__*/React.createElement(ErrorBorder, {
167
183
  "data-role": "error-border",
168
184
  warning: !!(!error && warning)
169
- }), /*#__PURE__*/React.createElement(CheckableInput, inputPropsForNewValidation, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
185
+ }), /*#__PURE__*/React.createElement(CheckableInput, _extends({
186
+ ariaLabelledBy: `${label && labelId.current}`,
187
+ ariaDescribedBy: ariaDescribedBy
188
+ }, inputPropsForNewValidation), /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation)))) : /*#__PURE__*/React.createElement(TooltipProvider, {
170
189
  helpAriaLabel: helpAriaLabel,
171
190
  tooltipPosition: tooltipPosition
172
191
  }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps)))));
package/lib/components/switch/switch.component.js CHANGED
@@ -17,9 +17,11 @@ var _newValidation = _interopRequireDefault(require("../carbon-provider/__intern
17
17
  var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
18
18
  var _box = _interopRequireDefault(require("../box"));
19
19
  var _label = _interopRequireDefault(require("../../__internal__/label"));
20
+ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
20
21
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
21
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
22
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
24
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
23
25
  let deprecateUncontrolledWarnTriggered = false;
24
26
  const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
25
27
  autoFocus,
@@ -34,6 +36,8 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
34
36
  disabled,
35
37
  loading,
36
38
  reverse = true,
39
+ required,
40
+ isOptional,
37
41
  validationOnLabel = false,
38
42
  labelInline = false,
39
43
  labelSpacing,
@@ -56,6 +60,9 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
56
60
  const {
57
61
  validationRedesignOptIn
58
62
  } = (0, _react.useContext)(_newValidation.default);
63
+ const labelId = (0, _react.useRef)(`${(0, _guid.default)()}-label`);
64
+ const inputHintId = (0, _react.useRef)(`${(0, _guid.default)()}-hint`);
65
+ const validationMessageId = (0, _react.useRef)(`${(0, _guid.default)()}-message`);
59
66
  const [checkedInternal, setCheckedInternal] = (0, _react.useState)(defaultChecked || false);
60
67
  if (!deprecateUncontrolledWarnTriggered && !onChange) {
61
68
  deprecateUncontrolledWarnTriggered = true;
@@ -122,6 +129,8 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
122
129
  // switched to preserve backward compatibility
123
130
  validationOnLabel: shouldValidationBeOnLabel && !disabled,
124
131
  ref,
132
+ required,
133
+ isOptional,
125
134
  ...rest
126
135
  };
127
136
 
@@ -145,8 +154,8 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
145
154
  };
146
155
  const inputPropsForNewValidation = {
147
156
  autoFocus,
148
- error,
149
- warning,
157
+ // set aria-invalid but prevent validationIconId from being added to aria-describedby
158
+ error: !!error,
150
159
  disabled: disabled || loading,
151
160
  loading,
152
161
  checked: isControlled ? checked : checkedInternal,
@@ -159,23 +168,33 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
159
168
  type: "checkbox",
160
169
  role: "switch",
161
170
  ref,
171
+ required,
172
+ isOptional,
162
173
  ...rest
163
174
  };
164
175
  const applyValidation = error || warning;
165
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, null, /*#__PURE__*/_react.default.createElement(_box.default, {
166
- "data-role": "hint-text-wrapper",
167
- mb: labelHelp ? 0 : 1
168
- }, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, {
169
- "data-role": "hint-text"
170
- }, labelHelp)), /*#__PURE__*/_react.default.createElement(_box.default, {
176
+ const ariaDescribedBy = [labelHelp && inputHintId.current, applyValidation && validationMessageId.current].filter(Boolean).join(" ");
177
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, {
178
+ labelId: labelId.current,
179
+ disabled: disabled,
180
+ isRequired: required,
181
+ optional: isOptional
182
+ }, label), labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, {
183
+ "data-role": "hint-text",
184
+ id: inputHintId.current
185
+ }, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
171
186
  position: "relative"
172
187
  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
173
188
  error: error,
174
- warning: warning
189
+ warning: warning,
190
+ validationId: validationMessageId.current
175
191
  }), applyValidation && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
176
192
  "data-role": "error-border",
177
193
  warning: !!(!error && warning)
178
- }), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputPropsForNewValidation, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
194
+ }), /*#__PURE__*/_react.default.createElement(_checkableInput.default, _extends({
195
+ ariaLabelledBy: `${label && labelId.current}`,
196
+ ariaDescribedBy: ariaDescribedBy
197
+ }, inputPropsForNewValidation), /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation)))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
179
198
  helpAriaLabel: helpAriaLabel,
180
199
  tooltipPosition: tooltipPosition
181
200
  }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps)))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "143.2.1",
3
+ "version": "143.2.2",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",