carbon-react 117.0.0 → 117.1.0

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 (17) hide show
  1. package/esm/components/select/filterable-select/filterable-select.component.js +11 -1
  2. package/esm/components/select/filterable-select/filterable-select.d.ts +4 -0
  3. package/esm/components/select/multi-select/multi-select.component.js +10 -0
  4. package/esm/components/select/multi-select/multi-select.d.ts +4 -0
  5. package/esm/components/select/select-textbox/select-textbox.component.js +11 -2
  6. package/esm/components/select/select-textbox/select-textbox.d.ts +4 -0
  7. package/esm/components/select/simple-select/simple-select.component.js +10 -0
  8. package/esm/components/select/simple-select/simple-select.d.ts +4 -0
  9. package/lib/components/select/filterable-select/filterable-select.component.js +11 -1
  10. package/lib/components/select/filterable-select/filterable-select.d.ts +4 -0
  11. package/lib/components/select/multi-select/multi-select.component.js +10 -0
  12. package/lib/components/select/multi-select/multi-select.d.ts +4 -0
  13. package/lib/components/select/select-textbox/select-textbox.component.js +11 -2
  14. package/lib/components/select/select-textbox/select-textbox.d.ts +4 -0
  15. package/lib/components/select/simple-select/simple-select.component.js +10 -0
  16. package/lib/components/select/simple-select/simple-select.d.ts +4 -0
  17. package/package.json +1 -1
package/esm/components/select/filterable-select/filterable-select.component.js CHANGED
@@ -18,6 +18,8 @@ import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibi
18
18
  let deprecateInputRefWarnTriggered = false;
19
19
  const FilterableSelectList = withFilter(SelectList);
20
20
  const FilterableSelect = /*#__PURE__*/React.forwardRef(({
21
+ "aria-label": ariaLabel,
22
+ "aria-labelledby": ariaLabelledby,
21
23
  value,
22
24
  defaultValue,
23
25
  id,
@@ -458,7 +460,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
458
460
  ref: containerRef
459
461
  }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
460
462
  activeDescendantId: activeDescendantId,
461
- labelId: labelId,
463
+ ariaLabel: ariaLabel,
464
+ ariaLabelledby: ariaLabelledby,
465
+ labelId: label ? labelId : undefined,
462
466
  "aria-controls": selectListId.current,
463
467
  isOpen: isOpen,
464
468
  hasTextCursor: true,
@@ -467,6 +471,12 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
467
471
  });
468
472
  FilterableSelect.propTypes = { ...formInputPropTypes,
469
473
 
474
+ /** Prop to specify the aria-label attribute of the component input */
475
+ "aria-label": PropTypes.string,
476
+
477
+ /** Prop to specify the aria-labeledby property of the component input */
478
+ "aria-labelledby": PropTypes.string,
479
+
470
480
  /** Identifier used for testing purposes, applied to the root element of the component. */
471
481
  "data-component": PropTypes.string,
472
482
 
package/esm/components/select/filterable-select/filterable-select.d.ts CHANGED
@@ -5,6 +5,10 @@ import { FormInputPropTypes } from "../select-textbox/select-textbox";
5
5
 
6
6
  export interface FilterableSelectProps
7
7
  extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
8
+ /** Prop to specify the aria-label attribute of the component input */
9
+ "aria-label"?: string;
10
+ /** Prop to specify the aria-labeledby property of the component input */
11
+ "aria-labelledby"?: string;
8
12
  /** Identifier used for testing purposes, applied to the root element of the component. */
9
13
  "data-component"?: string;
10
14
  /** Identifier used for testing purposes, applied to the root element of the component. */
package/esm/components/select/multi-select/multi-select.component.js CHANGED
@@ -20,6 +20,8 @@ import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibi
20
20
  let deprecateInputRefWarnTriggered = false;
21
21
  const FilterableSelectList = withFilter(SelectList);
22
22
  const MultiSelect = /*#__PURE__*/React.forwardRef(({
23
+ "aria-label": ariaLabel,
24
+ "aria-labelledby": ariaLabelledby,
23
25
  value,
24
26
  defaultValue,
25
27
  id,
@@ -478,6 +480,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
478
480
  accessibilityLabelId: accessibilityLabelId.current,
479
481
  activeDescendantId: activeDescendantId,
480
482
  "aria-controls": selectListId.current,
483
+ ariaLabel: ariaLabel,
484
+ ariaLabelledby: ariaLabelledby,
481
485
  hasTextCursor: true,
482
486
  isOpen: isOpen,
483
487
  labelId: labelId,
@@ -486,6 +490,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
486
490
  });
487
491
  MultiSelect.propTypes = { ...formInputPropTypes,
488
492
 
493
+ /** Prop to specify the aria-label attribute of the component input */
494
+ "aria-label": PropTypes.string,
495
+
496
+ /** Prop to specify the aria-labeledby property of the component input */
497
+ "aria-labelledby": PropTypes.string,
498
+
489
499
  /** Identifier used for testing purposes, applied to the root element of the component. */
490
500
  "data-component": PropTypes.string,
491
501
 
package/esm/components/select/multi-select/multi-select.d.ts CHANGED
@@ -4,6 +4,10 @@ import { FormInputPropTypes } from "../select-textbox/select-textbox";
4
4
 
5
5
  export interface MultiSelectProps
6
6
  extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
7
+ /** Prop to specify the aria-label attribute of the component input */
8
+ "aria-label"?: string;
9
+ /** Prop to specify the aria-labeledby property of the component input */
10
+ "aria-labelledby"?: string;
7
11
  /** Identifier used for testing purposes, applied to the root element of the component. */
8
12
  "data-component"?: string;
9
13
  /** Identifier used for testing purposes, applied to the root element of the component. */
package/esm/components/select/select-textbox/select-textbox.component.js CHANGED
@@ -23,6 +23,8 @@ const floatingMiddleware = [offset(({
23
23
 
24
24
  })];
25
25
  const SelectTextbox = /*#__PURE__*/React.forwardRef(({
26
+ ariaLabel,
27
+ ariaLabelledBy,
26
28
  accessibilityLabelId,
27
29
  labelId,
28
30
  "aria-controls": ariaControls,
@@ -105,10 +107,10 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
105
107
  function getInputAriaAttributes() {
106
108
  const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
107
109
 
108
- const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
110
+ const combinedAriaLabelledBy = hasTextCursor ? joinIds(ariaLabelledBy || labelId, accessibilityLabelId || textId.current) : joinIds(ariaLabelledBy || labelId, textId.current);
109
111
  return {
110
112
  "aria-expanded": readOnly ? undefined : isOpen,
111
- "aria-labelledby": ariaLabelledby || undefined,
113
+ "aria-labelledby": ariaLabel && !ariaLabelledBy ? undefined : combinedAriaLabelledBy,
112
114
  "aria-activedescendant": activeDescendantId,
113
115
  "aria-controls": ariaControls,
114
116
  "aria-autocomplete": hasTextCursor ? "both" : undefined,
@@ -140,6 +142,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
140
142
  }
141
143
 
142
144
  return /*#__PURE__*/React.createElement(Textbox, _extends({
145
+ "aria-label": ariaLabel,
143
146
  "data-element": "select-input",
144
147
  inputIcon: "dropdown",
145
148
  autoComplete: "off",
@@ -161,6 +164,12 @@ const formInputPropTypes = {
161
164
  */
162
165
  accessibilityLabelId: PropTypes.string,
163
166
 
167
+ /** Prop to specify the aria-label attribute of the component input */
168
+ ariaLabel: PropTypes.string,
169
+
170
+ /** Prop to specify the aria-labeledby property of the component input */
171
+ ariaLabelledBy: PropTypes.string,
172
+
164
173
  /** Id attribute of the input element */
165
174
  id: PropTypes.string,
166
175
 
package/esm/components/select/select-textbox/select-textbox.d.ts CHANGED
@@ -8,6 +8,10 @@ export interface FormInputPropTypes
8
8
  Omit<CommonTextboxProps, "onClick"> {
9
9
  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
10
10
  adaptiveLabelBreakpoint?: number;
11
+ /** Prop to specify the aria-label attribute of the component input */
12
+ ariaLabel?: string;
13
+ /** Prop to specify the aria-labeledby property of the component input */
14
+ ariaLabelledBy?: string;
11
15
  /** If true the Component will be focused when rendered */
12
16
  autoFocus?: boolean;
13
17
  /** If true, the component will be disabled */
package/esm/components/select/simple-select/simple-select.component.js CHANGED
@@ -17,6 +17,8 @@ import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
17
17
  import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
18
18
  let deprecateInputRefWarnTriggered = false;
19
19
  const SimpleSelect = /*#__PURE__*/React.forwardRef(({
20
+ "aria-label": ariaLabel,
21
+ "aria-labelledby": ariaLabelledby,
20
22
  value,
21
23
  defaultValue,
22
24
  id,
@@ -378,8 +380,10 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
378
380
  }, marginProps), /*#__PURE__*/React.createElement("div", {
379
381
  ref: containerRef
380
382
  }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
383
+ ariaLabel: ariaLabel,
381
384
  "aria-controls": selectListId.current,
382
385
  activeDescendantId: activeDescendantId,
386
+ ariaLabelledby: ariaLabelledby,
383
387
  isOpen: isOpen,
384
388
  textboxRef: textboxRef
385
389
  }, getTextboxProps()))), selectList);
@@ -389,6 +393,12 @@ SimpleSelect.propTypes = {
389
393
  ...propTypes.space,
390
394
  ...formInputPropTypes,
391
395
 
396
+ /** Prop to specify the aria-label attribute of the component input */
397
+ "aria-label": PropTypes.string,
398
+
399
+ /** Prop to specify the aria-labeledby property of the component input */
400
+ "aria-labelledby": PropTypes.string,
401
+
392
402
  /** Identifier used for testing purposes, applied to the root element of the component. */
393
403
  "data-component": PropTypes.string,
394
404
 
package/esm/components/select/simple-select/simple-select.d.ts CHANGED
@@ -4,6 +4,10 @@ import { FormInputPropTypes } from "../select-textbox/select-textbox";
4
4
 
5
5
  export interface SimpleSelectProps
6
6
  extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
7
+ /** Prop to specify the aria-label attribute of the component input */
8
+ "aria-label"?: string;
9
+ /** Prop to specify the aria-labeledby property of the component input */
10
+ "aria-labelledby"?: string;
7
11
  /** Identifier used for testing purposes, applied to the root element of the component. */
8
12
  "data-component"?: string;
9
13
  /** Identifier used for testing purposes, applied to the root element of the component. */
package/lib/components/select/filterable-select/filterable-select.component.js CHANGED
@@ -47,6 +47,8 @@ let deprecateInputRefWarnTriggered = false;
47
47
  const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
48
48
 
49
49
  const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
50
+ "aria-label": ariaLabel,
51
+ "aria-labelledby": ariaLabelledby,
50
52
  value,
51
53
  defaultValue,
52
54
  id,
@@ -489,7 +491,9 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
489
491
  ref: containerRef
490
492
  }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
491
493
  activeDescendantId: activeDescendantId,
492
- labelId: labelId,
494
+ ariaLabel: ariaLabel,
495
+ ariaLabelledby: ariaLabelledby,
496
+ labelId: label ? labelId : undefined,
493
497
  "aria-controls": selectListId.current,
494
498
  isOpen: isOpen,
495
499
  hasTextCursor: true,
@@ -499,6 +503,12 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
499
503
 
500
504
  FilterableSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
501
505
 
506
+ /** Prop to specify the aria-label attribute of the component input */
507
+ "aria-label": _propTypes.default.string,
508
+
509
+ /** Prop to specify the aria-labeledby property of the component input */
510
+ "aria-labelledby": _propTypes.default.string,
511
+
502
512
  /** Identifier used for testing purposes, applied to the root element of the component. */
503
513
  "data-component": _propTypes.default.string,
504
514
 
package/lib/components/select/filterable-select/filterable-select.d.ts CHANGED
@@ -5,6 +5,10 @@ import { FormInputPropTypes } from "../select-textbox/select-textbox";
5
5
 
6
6
  export interface FilterableSelectProps
7
7
  extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
8
+ /** Prop to specify the aria-label attribute of the component input */
9
+ "aria-label"?: string;
10
+ /** Prop to specify the aria-labeledby property of the component input */
11
+ "aria-labelledby"?: string;
8
12
  /** Identifier used for testing purposes, applied to the root element of the component. */
9
13
  "data-component"?: string;
10
14
  /** Identifier used for testing purposes, applied to the root element of the component. */
package/lib/components/select/multi-select/multi-select.component.js CHANGED
@@ -51,6 +51,8 @@ let deprecateInputRefWarnTriggered = false;
51
51
  const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
52
52
 
53
53
  const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
54
+ "aria-label": ariaLabel,
55
+ "aria-labelledby": ariaLabelledby,
54
56
  value,
55
57
  defaultValue,
56
58
  id,
@@ -512,6 +514,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
512
514
  accessibilityLabelId: accessibilityLabelId.current,
513
515
  activeDescendantId: activeDescendantId,
514
516
  "aria-controls": selectListId.current,
517
+ ariaLabel: ariaLabel,
518
+ ariaLabelledby: ariaLabelledby,
515
519
  hasTextCursor: true,
516
520
  isOpen: isOpen,
517
521
  labelId: labelId,
@@ -521,6 +525,12 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
521
525
 
522
526
  MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
523
527
 
528
+ /** Prop to specify the aria-label attribute of the component input */
529
+ "aria-label": _propTypes.default.string,
530
+
531
+ /** Prop to specify the aria-labeledby property of the component input */
532
+ "aria-labelledby": _propTypes.default.string,
533
+
524
534
  /** Identifier used for testing purposes, applied to the root element of the component. */
525
535
  "data-component": _propTypes.default.string,
526
536
 
package/lib/components/select/multi-select/multi-select.d.ts CHANGED
@@ -4,6 +4,10 @@ import { FormInputPropTypes } from "../select-textbox/select-textbox";
4
4
 
5
5
  export interface MultiSelectProps
6
6
  extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
7
+ /** Prop to specify the aria-label attribute of the component input */
8
+ "aria-label"?: string;
9
+ /** Prop to specify the aria-labeledby property of the component input */
10
+ "aria-labelledby"?: string;
7
11
  /** Identifier used for testing purposes, applied to the root element of the component. */
8
12
  "data-component"?: string;
9
13
  /** Identifier used for testing purposes, applied to the root element of the component. */
package/lib/components/select/select-textbox/select-textbox.component.js CHANGED
@@ -45,6 +45,8 @@ const floatingMiddleware = [(0, _dom.offset)(({
45
45
  })];
46
46
 
47
47
  const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
48
+ ariaLabel,
49
+ ariaLabelledBy,
48
50
  accessibilityLabelId,
49
51
  labelId,
50
52
  "aria-controls": ariaControls,
@@ -127,10 +129,10 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
127
129
  function getInputAriaAttributes() {
128
130
  const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
129
131
 
130
- const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
132
+ const combinedAriaLabelledBy = hasTextCursor ? joinIds(ariaLabelledBy || labelId, accessibilityLabelId || textId.current) : joinIds(ariaLabelledBy || labelId, textId.current);
131
133
  return {
132
134
  "aria-expanded": readOnly ? undefined : isOpen,
133
- "aria-labelledby": ariaLabelledby || undefined,
135
+ "aria-labelledby": ariaLabel && !ariaLabelledBy ? undefined : combinedAriaLabelledBy,
134
136
  "aria-activedescendant": activeDescendantId,
135
137
  "aria-controls": ariaControls,
136
138
  "aria-autocomplete": hasTextCursor ? "both" : undefined,
@@ -162,6 +164,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
162
164
  }
163
165
 
164
166
  return /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
167
+ "aria-label": ariaLabel,
165
168
  "data-element": "select-input",
166
169
  inputIcon: "dropdown",
167
170
  autoComplete: "off",
@@ -184,6 +187,12 @@ const formInputPropTypes = {
184
187
  */
185
188
  accessibilityLabelId: _propTypes.default.string,
186
189
 
190
+ /** Prop to specify the aria-label attribute of the component input */
191
+ ariaLabel: _propTypes.default.string,
192
+
193
+ /** Prop to specify the aria-labeledby property of the component input */
194
+ ariaLabelledBy: _propTypes.default.string,
195
+
187
196
  /** Id attribute of the input element */
188
197
  id: _propTypes.default.string,
189
198
 
package/lib/components/select/select-textbox/select-textbox.d.ts CHANGED
@@ -8,6 +8,10 @@ export interface FormInputPropTypes
8
8
  Omit<CommonTextboxProps, "onClick"> {
9
9
  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
10
10
  adaptiveLabelBreakpoint?: number;
11
+ /** Prop to specify the aria-label attribute of the component input */
12
+ ariaLabel?: string;
13
+ /** Prop to specify the aria-labeledby property of the component input */
14
+ ariaLabelledBy?: string;
11
15
  /** If true the Component will be focused when rendered */
12
16
  autoFocus?: boolean;
13
17
  /** If true, the component will be disabled */
package/lib/components/select/simple-select/simple-select.component.js CHANGED
@@ -46,6 +46,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
46
46
  let deprecateInputRefWarnTriggered = false;
47
47
 
48
48
  const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
49
+ "aria-label": ariaLabel,
50
+ "aria-labelledby": ariaLabelledby,
49
51
  value,
50
52
  defaultValue,
51
53
  id,
@@ -409,8 +411,10 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
409
411
  }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
410
412
  ref: containerRef
411
413
  }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
414
+ ariaLabel: ariaLabel,
412
415
  "aria-controls": selectListId.current,
413
416
  activeDescendantId: activeDescendantId,
417
+ ariaLabelledby: ariaLabelledby,
414
418
  isOpen: isOpen,
415
419
  textboxRef: textboxRef
416
420
  }, getTextboxProps()))), selectList);
@@ -421,6 +425,12 @@ SimpleSelect.propTypes = {
421
425
  ..._propTypes2.default.space,
422
426
  ..._selectTextbox.formInputPropTypes,
423
427
 
428
+ /** Prop to specify the aria-label attribute of the component input */
429
+ "aria-label": _propTypes.default.string,
430
+
431
+ /** Prop to specify the aria-labeledby property of the component input */
432
+ "aria-labelledby": _propTypes.default.string,
433
+
424
434
  /** Identifier used for testing purposes, applied to the root element of the component. */
425
435
  "data-component": _propTypes.default.string,
426
436
 
package/lib/components/select/simple-select/simple-select.d.ts CHANGED
@@ -4,6 +4,10 @@ import { FormInputPropTypes } from "../select-textbox/select-textbox";
4
4
 
5
5
  export interface SimpleSelectProps
6
6
  extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
7
+ /** Prop to specify the aria-label attribute of the component input */
8
+ "aria-label"?: string;
9
+ /** Prop to specify the aria-labeledby property of the component input */
10
+ "aria-labelledby"?: string;
7
11
  /** Identifier used for testing purposes, applied to the root element of the component. */
8
12
  "data-component"?: string;
9
13
  /** Identifier used for testing purposes, applied to the root element of the component. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "117.0.0",
3
+ "version": "117.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",