carbon-react 104.52.0 → 104.52.1

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 (7) hide show
  1. package/esm/components/select/filterable-select/filterable-select.component.js +5 -3
  2. package/esm/components/select/select-textbox/select-textbox.component.d.ts +3 -3
  3. package/esm/components/select/select-textbox/select-textbox.component.js +6 -3
  4. package/lib/components/select/filterable-select/filterable-select.component.js +5 -3
  5. package/lib/components/select/select-textbox/select-textbox.component.d.ts +3 -3
  6. package/lib/components/select/select-textbox/select-textbox.component.js +6 -3
  7. package/package.json +1 -1
package/esm/components/select/filterable-select/filterable-select.component.js CHANGED
@@ -16,6 +16,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
16
16
  defaultValue,
17
17
  id,
18
18
  name,
19
+ label,
19
20
  children,
20
21
  onOpen,
21
22
  onChange,
@@ -45,7 +46,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
45
46
  }, inputRef) => {
46
47
  const [activeDescendantId, setActiveDescendantId] = useState();
47
48
  const selectListId = useRef(guid());
48
- const labelId = useRef(guid());
49
+ const labelId = useRef(label ? guid() : undefined);
49
50
  const containerRef = useRef();
50
51
  const listboxRef = useRef();
51
52
  const isControlled = useRef(value !== undefined);
@@ -366,6 +367,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
366
367
  return {
367
368
  id,
368
369
  name,
370
+ label,
369
371
  disabled,
370
372
  readOnly,
371
373
  inputRef: assignInput,
@@ -391,7 +393,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
391
393
  const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
392
394
  ref: listboxRef,
393
395
  id: selectListId.current,
394
- labelId: labelId.current,
396
+ labelId: label ? labelId.current : undefined,
395
397
  anchorElement: textboxRef && textboxRef.parentElement,
396
398
  onSelect: onSelectOption,
397
399
  onSelectListClose: onSelectListClose,
@@ -426,10 +428,10 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
426
428
  ref: containerRef
427
429
  }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
428
430
  activeDescendantId: activeDescendantId,
431
+ labelId: label ? labelId.current : undefined,
429
432
  "aria-controls": isOpen ? selectListId.current : undefined,
430
433
  isOpen: isOpen,
431
434
  hasTextCursor: true,
432
- labelId: labelId.current,
433
435
  textboxRef: textboxRef
434
436
  }, getTextboxProps()))), isOpen && selectList);
435
437
  });
package/esm/components/select/select-textbox/select-textbox.component.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  export default SelectTextbox;
2
- declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
2
+ declare function SelectTextbox({ accessibilityLabelId, labelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
3
3
  [x: string]: any;
4
- accessibilityLabelId?: string | undefined;
4
+ accessibilityLabelId: any;
5
+ labelId: any;
5
6
  "aria-controls": any;
6
7
  value: any;
7
8
  disabled: any;
8
9
  isOpen: any;
9
10
  readOnly: any;
10
11
  placeholder: any;
11
- labelId: any;
12
12
  size: any;
13
13
  onClick: any;
14
14
  onFocus: any;
package/esm/components/select/select-textbox/select-textbox.component.js CHANGED
@@ -45,14 +45,14 @@ const modifiers = [{
45
45
  }];
46
46
 
47
47
  const SelectTextbox = ({
48
- accessibilityLabelId = "",
48
+ accessibilityLabelId,
49
+ labelId,
49
50
  "aria-controls": ariaControls,
50
51
  value,
51
52
  disabled,
52
53
  isOpen,
53
54
  readOnly,
54
55
  placeholder,
55
- labelId,
56
56
  size,
57
57
  onClick,
58
58
  onFocus,
@@ -133,9 +133,12 @@ const SelectTextbox = ({
133
133
  }
134
134
 
135
135
  function getInputAriaAttributes() {
136
+ const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
137
+
138
+ const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
136
139
  return {
137
140
  "aria-expanded": isOpen,
138
- "aria-labelledby": hasTextCursor ? `${labelId} ${accessibilityLabelId}` : `${labelId} ${textId.current}`,
141
+ "aria-labelledby": ariaLabelledby || undefined,
139
142
  "aria-activedescendant": activeDescendantId,
140
143
  "aria-controls": ariaControls,
141
144
  "aria-autocomplete": hasTextCursor ? "both" : undefined,
package/lib/components/select/filterable-select/filterable-select.component.js CHANGED
@@ -40,6 +40,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
40
40
  defaultValue,
41
41
  id,
42
42
  name,
43
+ label,
43
44
  children,
44
45
  onOpen,
45
46
  onChange,
@@ -69,7 +70,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
69
70
  }, inputRef) => {
70
71
  const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
71
72
  const selectListId = (0, _react.useRef)((0, _guid.default)());
72
- const labelId = (0, _react.useRef)((0, _guid.default)());
73
+ const labelId = (0, _react.useRef)(label ? (0, _guid.default)() : undefined);
73
74
  const containerRef = (0, _react.useRef)();
74
75
  const listboxRef = (0, _react.useRef)();
75
76
  const isControlled = (0, _react.useRef)(value !== undefined);
@@ -390,6 +391,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
390
391
  return {
391
392
  id,
392
393
  name,
394
+ label,
393
395
  disabled,
394
396
  readOnly,
395
397
  inputRef: assignInput,
@@ -415,7 +417,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
415
417
  const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
416
418
  ref: listboxRef,
417
419
  id: selectListId.current,
418
- labelId: labelId.current,
420
+ labelId: label ? labelId.current : undefined,
419
421
  anchorElement: textboxRef && textboxRef.parentElement,
420
422
  onSelect: onSelectOption,
421
423
  onSelectListClose: onSelectListClose,
@@ -451,10 +453,10 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
451
453
  ref: containerRef
452
454
  }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
453
455
  activeDescendantId: activeDescendantId,
456
+ labelId: label ? labelId.current : undefined,
454
457
  "aria-controls": isOpen ? selectListId.current : undefined,
455
458
  isOpen: isOpen,
456
459
  hasTextCursor: true,
457
- labelId: labelId.current,
458
460
  textboxRef: textboxRef
459
461
  }, getTextboxProps()))), isOpen && selectList);
460
462
  });
package/lib/components/select/select-textbox/select-textbox.component.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  export default SelectTextbox;
2
- declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
2
+ declare function SelectTextbox({ accessibilityLabelId, labelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
3
3
  [x: string]: any;
4
- accessibilityLabelId?: string | undefined;
4
+ accessibilityLabelId: any;
5
+ labelId: any;
5
6
  "aria-controls": any;
6
7
  value: any;
7
8
  disabled: any;
8
9
  isOpen: any;
9
10
  readOnly: any;
10
11
  placeholder: any;
11
- labelId: any;
12
12
  size: any;
13
13
  onClick: any;
14
14
  onFocus: any;
package/lib/components/select/select-textbox/select-textbox.component.js CHANGED
@@ -66,14 +66,14 @@ const modifiers = [{
66
66
  }];
67
67
 
68
68
  const SelectTextbox = ({
69
- accessibilityLabelId = "",
69
+ accessibilityLabelId,
70
+ labelId,
70
71
  "aria-controls": ariaControls,
71
72
  value,
72
73
  disabled,
73
74
  isOpen,
74
75
  readOnly,
75
76
  placeholder,
76
- labelId,
77
77
  size,
78
78
  onClick,
79
79
  onFocus,
@@ -154,9 +154,12 @@ const SelectTextbox = ({
154
154
  }
155
155
 
156
156
  function getInputAriaAttributes() {
157
+ const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
158
+
159
+ const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
157
160
  return {
158
161
  "aria-expanded": isOpen,
159
- "aria-labelledby": hasTextCursor ? `${labelId} ${accessibilityLabelId}` : `${labelId} ${textId.current}`,
162
+ "aria-labelledby": ariaLabelledby || undefined,
160
163
  "aria-activedescendant": activeDescendantId,
161
164
  "aria-controls": ariaControls,
162
165
  "aria-autocomplete": hasTextCursor ? "both" : undefined,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "104.52.0",
3
+ "version": "104.52.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {