carbon-react 95.0.2 → 95.1.3

package/lib/__internal__/tooltip-provider/index.d.ts

@@ -9,6 +9,8 @@ export interface TooltipProviderProps {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** Control whether the tooltip is visible */
   children: React.ReactNode;
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare const ToolbarContext: React.Context<ToolbarContextProps>;

package/lib/__internal__/tooltip-provider/index.js

@@ -17,15 +17,18 @@ exports.TooltipContext = TooltipContext;
 
 const TooltipProvider = ({
   children,
-  tooltipPosition
+  tooltipPosition,
+  helpAriaLabel
 }) => /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
   value: {
-    tooltipPosition
+    tooltipPosition,
+    helpAriaLabel
   }
 }, children);
 
 exports.TooltipProvider = TooltipProvider;
 TooltipProvider.propTypes = {
   children: _propTypes.default.node.isRequired,
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+  helpAriaLabel: _propTypes.default.string
 };

package/lib/__internal__/validations/validation-icon.component.js

@@ -100,7 +100,9 @@ const ValidationIcon = ({
     tooltipVisible: hasFocus || hasMouseOver || groupHasFocus || groupHasMouseOver || triggeredByIcon,
     tooltipFlipOverrides: isPartOfInput && !tooltipFlipOverrides ? ["top", "bottom"] : tooltipFlipOverrides,
     isPartOfInput: isPartOfInput,
-    inputSize: size
+    inputSize: size,
+    "aria-hidden": "true",
+    focusable: false
   }));
 };
 

package/lib/components/button-toggle-group/button-toggle-group.component.js

@@ -25,6 +25,8 @@ var _inputBehaviour = require("../../__internal__/input-behaviour");
 
 var _utils = require("../../style/utils");
 
+var _tooltipProvider = require("../../__internal__/tooltip-provider");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -53,6 +55,7 @@ const ButtonToggleGroup = ({
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
+  helpAriaLabel,
   ...props
 }) => {
   const validationProps = {
@@ -60,7 +63,9 @@ const ButtonToggleGroup = ({
     warning,
     info
   };
-  return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel
+  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
     useValidationIcon: validationOnLabel,
     label: label,
     labelHelp: labelHelp,
@@ -84,7 +89,7 @@ const ButtonToggleGroup = ({
     value: value
   }, children), !validationOnLabel && /*#__PURE__*/_react.default.createElement(_validationIcon.default, _extends({}, validationProps, {
     tooltipFlipOverrides: ["top", "bottom"]
-  })))));
+  }))))));
 };
 
 ButtonToggleGroup.propTypes = { ...marginPropTypes,
@@ -171,7 +176,10 @@ ButtonToggleGroup.propTypes = { ...marginPropTypes,
   onBlur: _propTypes.default.func,
 
   /** The value of the Button Toggle Group */
-  value: _propTypes.default.string
+  value: _propTypes.default.string,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 ButtonToggleGroup.defaultProps = {
   validationOnLabel: false,

package/lib/components/button-toggle-group/button-toggle-group.d.ts

@@ -49,6 +49,8 @@ export interface ButtonToggleGroupProps
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
   /** The value of the Button Toggle Group */
   value?: string;
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare function ButtonToggleGroup(props: ButtonToggleGroupProps): JSX.Element;

package/lib/components/checkbox/checkbox.component.js

@@ -60,6 +60,7 @@ const Checkbox = ({
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
+  helpAriaLabel,
   ...props
 }) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
@@ -93,6 +94,7 @@ const Checkbox = ({
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
     "data-component": dataComponent,
@@ -206,7 +208,10 @@ Checkbox.propTypes = {
   required: _propTypes.default.bool,
 
   /** Overrides the default tooltip position */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 Checkbox.defaultProps = {
   reverse: false,

package/lib/components/checkbox/checkbox.d.ts

@@ -15,6 +15,8 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
   value?: string;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare function Checkbox(props: CheckboxProps): JSX.Element;

package/lib/components/date/date.component.js

@@ -619,7 +619,8 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
         }),
         inputRef: this.assignInput,
         adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-        tooltipPosition: tooltipPosition
+        tooltipPosition: tooltipPosition,
+        helpAriaLabel: this.props.helpAriaLabel
       }, events)), this.renderHiddenInput(), this.renderDatePicker({
         minDate,
         maxDate

package/lib/components/decimal/decimal.component.js

@@ -361,7 +361,10 @@ Decimal.propTypes = {
   /**
    * Override the locale string, default from I18nProvider
    */
-  locale: _propTypes.default.string
+  locale: _propTypes.default.string,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 Decimal.defaultProps = {
   align: "right",

package/lib/components/grouped-character/grouped-character.component.js

@@ -164,7 +164,10 @@ GroupedCharacter.propTypes = { ...marginPropTypes,
   onBlur: _propTypes.default.func,
 
   /** Flag to configure component as mandatory */
-  required: _propTypes.default.bool
+  required: _propTypes.default.bool,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 var _default = GroupedCharacter;
 exports.default = _default;

package/lib/components/heading/heading.component.js

@@ -71,7 +71,8 @@ let Heading = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderHelp, {
         "data-element": "help",
         tooltipPosition: "right",
-        href: this.props.helpLink
+        href: this.props.helpLink,
+        ariaLabel: this.props.helpAriaLabel
       }, this.props.help);
     }
     /**
@@ -255,7 +256,12 @@ Heading.propTypes = { ...marginPropTypes,
   /**
    * Pills that will be added after the title.
    */
-  pills: _propTypes.default.node
+  pills: _propTypes.default.node,
+
+  /**
+   * Aria label for rendered help component
+   */
+  helpAriaLabel: _propTypes.default.string
 };
 Heading.defaultProps = {
   divider: true,

package/lib/components/help/help.component.js

@@ -19,6 +19,8 @@ var _help = _interopRequireDefault(require("./help.style"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
+var _tooltipProvider = require("../../__internal__/tooltip-provider");
+
 var _utils = require("../../style/utils");
 
 var _help2 = require("./help.config");
@@ -46,10 +48,14 @@ const Help = ({
   tooltipBgColor,
   tooltipFontColor,
   tooltipFlipOverrides,
+  ariaLabel,
   ...rest
 }) => {
   const helpElement = (0, _react.useRef)(null);
   const [isTooltipVisible, updateTooltipVisible] = (0, _react.useState)(false);
+  const {
+    helpAriaLabel
+  } = (0, _react.useContext)(_tooltipProvider.TooltipContext);
   (0, _react.useEffect)(() => {
     document.addEventListener("keydown", handleKeyPress);
     return function cleanup() {
@@ -72,13 +78,10 @@ const Help = ({
   }
 
   return /*#__PURE__*/_react.default.createElement(_help.default, _extends({
-    role: "tooltip",
     className: className,
     as: tagType,
     href: href,
     id: helpId,
-    target: "_blank",
-    rel: "noopener noreferrer",
     ref: helpElement,
     onClick: () => {
       helpElement.current.focus();
@@ -89,15 +92,26 @@ const Help = ({
     onMouseLeave: handleFocusBlur(false)
   }, (0, _tags.default)("help", rest), {
     tabIndex: tabIndex
-  }, (0, _utils.filterStyledSystemMarginProps)(rest), rest), /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }, href ? {
+    target: "_blank",
+    rel: "noopener noreferrer"
+  } : {
+    role: "tooltip",
+    "aria-label": ariaLabel || helpAriaLabel
+  }, (0, _utils.filterStyledSystemMarginProps)(rest), rest), /*#__PURE__*/_react.default.createElement(_icon.default, _extends({
     type: type,
     tooltipMessage: children,
     tooltipPosition: tooltipPosition,
     tooltipVisible: isFocused || isTooltipVisible,
     tooltipBgColor: tooltipBgColor,
     tooltipFontColor: tooltipFontColor,
-    tooltipFlipOverrides: tooltipFlipOverrides
-  }));
+    tooltipFlipOverrides: tooltipFlipOverrides,
+    focusable: false,
+    "aria-hidden": "true"
+  }, href && {
+    role: "tooltip",
+    ariaLabel: ariaLabel || helpAriaLabel
+  })));
 };
 
 Help.propTypes = { ...marginPropTypes,
@@ -150,7 +164,10 @@ Help.propTypes = { ...marginPropTypes,
 
     return new Error( // eslint-disable-next-line max-len
     `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
-  }
+  },
+
+  /** Aria label */
+  ariaLabel: _propTypes.default.string
 };
 Help.defaultProps = {
   tooltipPosition: "top",

package/lib/components/help/help.d.ts

@@ -30,6 +30,8 @@ export interface HelpProps extends MarginProps {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** Help Icon type */
   type?: IconType;
+  /** Aria label */
+  ariaLabel?: string;
 }
 
 declare function Help(props: HelpProps): JSX.Element;

package/lib/components/icon/icon-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ICONS = exports.ICON_SIZES = exports.ICON_SHAPES = exports.ICON_TOOLTIP_POSITIONS = void 0;
+exports.default = exports.ICONS = exports.ICON_FONT_SIZES = exports.ICON_SIZES = exports.ICON_SHAPES = exports.ICON_TOOLTIP_POSITIONS = void 0;
 const dlsConfig = {
   backgroundSize: {
     "extra-small": "16px",
@@ -30,6 +30,8 @@ const ICON_SHAPES = ["circle", "rounded-rect", "square"];
 exports.ICON_SHAPES = ICON_SHAPES;
 const ICON_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
 exports.ICON_SIZES = ICON_SIZES;
+const ICON_FONT_SIZES = ["small", "medium", "large", "extra-large"];
+exports.ICON_FONT_SIZES = ICON_FONT_SIZES;
 const ICONS = ["add", "alert", "analysis", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_up", "attach", "bank", "basket", "basket_with_squares", "bin", "blocked", "blocked_square", "block_arrow_right", "bold", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "camera", "card_view", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "copy", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "delete", "delivery", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "gift", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger", "ledger_arrow_left", "ledger_arrow_right", "link", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "messages", "minus", "minus_large", "mobile", "money_bag", "pause", "pause_circle", "pdf", "people", "people_switch", "person", "person_info", "person_tick", "phone", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "question", "refresh", "refresh_clock", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "three_boxes", "tick", "tick_circle", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning", "admin", "arrow", "contacts", "create", "disconnect", "entry", "go", "lightbulb_off", "lightbulb_on", "none", "old_warning", "piggy_bank", "question_hollow", "question_mark", "settings_old", "talk", "true_tick"];
 exports.ICONS = ICONS;
 var _default = dlsConfig;

package/lib/components/icon/icon.component.js

@@ -51,6 +51,9 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   tabIndex,
   isPartOfInput,
   inputSize,
+  role,
+  ariaLabel,
+  focusable = true,
   ...rest
 }, ref) => {
   const isInteractive = !!tooltipMessage && !disabled;
@@ -80,6 +83,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     }
   };
 
+  const hasTooltip = !disabled && tooltipMessage && focusable;
   const styleProps = {
     bg,
     bgSize,
@@ -88,8 +92,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     disabled,
     fontSize,
     isInteractive,
-    tabIndex,
     type: iconType(),
+    tabIndex: hasTooltip && tabIndex === undefined ? 0 : tabIndex,
     ...(0, _utils.filterStyledSystemMarginProps)(rest)
   };
 
@@ -98,7 +102,11 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     key: "icon",
     className: className || null,
     "data-element": iconType()
-  }, (0, _tags.default)("icon", rest), styleProps));
+  }, (0, _tags.default)("icon", rest), styleProps, {
+    hasTooltip: hasTooltip,
+    "aria-label": ariaLabel,
+    role: hasTooltip && role === undefined ? "tooltip" : role
+  }));
 
   const {
     tooltipPosition: tooltipPositionFromContext
@@ -197,7 +205,10 @@ Icon.propTypes = { ...marginPropTypes,
   inputSize: _propTypes.default.oneOf(["small", "medium", "large"]),
 
   /** @ignore @private */
-  tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.number])
+  tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /** @ignore @private */
+  focusable: _propTypes.default.bool
 };
 Icon.defaultProps = {
   bgSize: "small",

package/lib/components/icon/icon.style.js

@@ -65,7 +65,8 @@ const StyledIcon = _styledComponents.default.span`
   bgShape,
   type,
   fontSize,
-  disabled
+  disabled,
+  hasTooltip
 }) => {
   let finalColor;
   let finalHoverColor;
@@ -153,6 +154,12 @@ const StyledIcon = _styledComponents.default.span`
         display: block;
       }
 
+      ${hasTooltip && `
+        :focus {
+          outline: 2px solid ${theme.colors.focus};
+        }
+      `}
+
       ${_styledSystem.margin}
     `;
 }}

package/lib/components/numeral-date/numeral-date.component.js

@@ -29,6 +29,8 @@ var _formField = _interopRequireDefault(require("../../__internal__/form-field")
 
 var _inputBehaviour = require("../../__internal__/input-behaviour");
 
+var _tooltipProvider = require("../../__internal__/tooltip-provider");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -82,6 +84,7 @@ const NumeralDate = ({
   enableInternalError,
   enableInternalWarning,
   tooltipPosition,
+  helpAriaLabel,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -165,7 +168,9 @@ const NumeralDate = ({
   const internalMessage = Object.keys(internalMessages).reduce((string, key) => internalMessages[key] ? `${string + internalMessages[key]}\n` : string, "");
   const internalError = enableInternalError ? internalMessage + error : error;
   const internalWarning = enableInternalWarning ? internalMessage + warning : warning;
-  return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel
+  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
     "data-component": dataComponent,
     "data-element": dataElement,
     "data-role": dataRole,
@@ -225,7 +230,7 @@ const NumeralDate = ({
       size: size,
       tooltipPosition: tooltipPosition
     })));
-  }))));
+  })))));
 };
 
 NumeralDate.propTypes = {
@@ -338,7 +343,10 @@ NumeralDate.propTypes = {
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 
   /** Overrides the default tooltip position */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 var _default = NumeralDate;
 exports.default = _default;

package/lib/components/numeral-date/numeral-date.d.ts

@@ -88,6 +88,8 @@ export interface NumeralDateProps extends ValidationPropTypes, MarginProps {
   validationOnLabel?: boolean;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare function NumeralDate(props: NumeralDateProps): JSX.Element;

package/lib/components/radio-button/radio-button.component.js

@@ -68,6 +68,7 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
+  helpAriaLabel,
   ...props
 }, ref) => {
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
@@ -113,6 +114,7 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef(({
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_radioButton.default, _extends({
     "data-component": dataComponent,
@@ -209,6 +211,9 @@ RadioButton.propTypes = { ...marginPropTypes,
 
   /** Overrides the default tooltip position */
   tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string,
   ...radioButtonGroupPassedProps
 };
 RadioButton.defaultProps = {

package/lib/components/radio-button/radio-button.d.ts

@@ -18,6 +18,8 @@ export interface RadioButtonProps
   value: string;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare function RadioButton(

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -78,7 +78,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpen] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)("");
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const createCustomEvent = (0, _react.useCallback)(newValue => {
@@ -187,21 +187,33 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [setMatchingText, selectedValue]);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
     (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
-    setSelectedValue(prevValue => {
-      if (value && isControlled.current && prevValue !== newValue) {
-        setMatchingText(newValue);
+
+    if (isControlled.current) {
+      setSelectedValue(prevValue => {
+        if (value && prevValue !== value) {
+          setMatchingText(value);
+        }
+
+        return value;
+      });
+      setHighlightedValue(value);
+    } else {
+      if (textValue !== selectedValue) {
+        setMatchingText(selectedValue);
       }
 
-      return newValue;
-    });
-    setHighlightedValue(newValue); // prevent value update on filter change
+      if (highlightedValue !== selectedValue) {
+        setHighlightedValue(selectedValue);
+      }
+    } // prevent value update on filter change
+    // selectedValue and highlightedValue omitted from deps, only want uncontrolled change if onChange/children update
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, defaultValue, onChange, children]);
+
+  }, [value, onChange, children]);
   (0, _react.useEffect)(() => {
     if (!isOpen) {
       setFilterText("");
@@ -215,8 +227,11 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     (0, _invariant.default)(!hasListActionButton || hasListActionButton && onListAction, onListActionMissingMessage);
   }, [listActionButton, onListAction]);
   (0, _react.useEffect)(() => {
-    setMatchingText(value || defaultValue); // update text value only when children are changing
+    if (isControlled.current) {
+      setMatchingText(value);
+    } // update text value only when children are changing
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [value, children]);
   (0, _react.useEffect)(() => {
     if (onFilterChange) {

package/lib/components/select/multi-select/multi-select.component.js

@@ -82,7 +82,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || []);
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const [placeholderOverride, setPlaceholderOverride] = (0, _react.useState)();
@@ -124,7 +124,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     setSelectedValue(previousValue => {
       isClickTriggeredBySelect.current = true;
 
-      if (previousValue.length === 0) {
+      if (!previousValue.length) {
         return previousValue;
       }
 
@@ -185,7 +185,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const mapValuesToPills = (0, _react.useCallback)(() => {
     const canDelete = !disabled && !readOnly;
 
-    if (selectedValue.length === 0) {
+    if (!selectedValue.length) {
       return "";
     }
 
@@ -205,31 +205,28 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       const {
         title
       } = pillProps;
+      const key = title + ((matchingOption === null || matchingOption === void 0 ? void 0 : matchingOption.props.value) || index);
       return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
-        key: title
+        key: key
       }, /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
         onDelete: canDelete ? () => removeSelectedValue(index) : undefined
       }, pillProps), title));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, selectedValue]);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    const onChageMissingMessage = "onChange prop required when using a controlled input element";
+    const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChageMissingMessage);
-    setSelectedValue(previousValue => {
-      if (!newValue && previousValue.length === 0) {
-        return previousValue;
-      }
+    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
 
-      return newValue;
-    });
-  }, [value, defaultValue, onChange]); // removes placeholder when a value is present
+    if (isControlled.current) {
+      setSelectedValue(value);
+    }
+  }, [value, onChange]); // removes placeholder when a value is present
 
   (0, _react.useEffect)(() => {
-    const hasValue = value && value.length > 0;
-    const hasSelectedValue = selectedValue && selectedValue.length > 0;
+    const hasValue = value === null || value === void 0 ? void 0 : value.length;
+    const hasSelectedValue = selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length;
 
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");

package/lib/components/select/simple-select/simple-select.component.js

@@ -77,7 +77,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)("");
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const createCustomEvent = (0, _react.useCallback)(newValue => {
     const customEvent = {
@@ -176,13 +176,15 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     isClickTriggeredBySelect.current = false;
   }, []);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
     (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
-    setSelectedValue(newValue);
-  }, [value, defaultValue, onChange]);
+
+    if (isControlled.current) {
+      setSelectedValue(value);
+    }
+  }, [value, onChange]);
   (0, _react.useEffect)(() => {
     const matchingOption = childOptions.find(child => (0, _isExpectedOption.default)(child, selectedValue));
     let newText = "";

package/lib/components/select/simple-select/simple-select.d.ts

@@ -55,7 +55,7 @@ export interface SimpleSelectProps
     | "left-start"
     | "left-end";
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled?: bool;
+  flipEnabled?: boolean;
 }
 
 declare function SimpleSelect(

package/lib/components/select/utils/is-expected-option.js

@@ -22,5 +22,13 @@ function isExpectedOption(element, expectedValue) {
     return false;
   }
 
+  const {
+    length
+  } = typeof expectedValue === "string" ? expectedValue : Object.keys(expectedValue);
+
+  if (!length) {
+    return false;
+  }
+
   return (0, _isExpectedValue.default)(element.props.value, expectedValue);
 }

package/lib/components/switch/switch.component.js

@@ -59,6 +59,7 @@ const Switch = ({
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
+  helpAriaLabel,
   ...rest
 }) => {
   const isControlled = checked !== undefined;
@@ -123,6 +124,7 @@ const Switch = ({
     ...rest
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps))));
 };
@@ -241,7 +243,10 @@ Switch.propTypes = {
   required: _propTypes.default.bool,
 
   /** Overrides the default tooltip position */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 Switch.defaultProps = {
   labelInline: false,

package/lib/components/switch/switch.d.ts

@@ -29,6 +29,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
   value?: string;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare function Switch(props: SwitchProps): JSX.Element;

package/lib/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -90,7 +90,7 @@ const StyledTitleContent = _styledComponents.default.div`
     ${size === "large" && position === "left" && (0, _styledComponents.css)`
       font-size: 16px;
       padding: 22px 24px;
-      ${!isTabSelected && !alternateStyling && (error || warning || info) && `margin-right: -2px;`}
+      ${!isTabSelected && !alternateStyling && error && `margin-right: -2px;`}
     `}
 
     ${size === "default" && (0, _styledComponents.css)`
@@ -99,7 +99,7 @@ const StyledTitleContent = _styledComponents.default.div`
         padding-bottom: 8px;
       `}
 
-      ${position === "left" && !isTabSelected && !alternateStyling && (error || warning || info) && `margin-right: -2px;`}
+      ${position === "left" && !isTabSelected && !alternateStyling && error && `margin-right: -2px;`}
     `}
   `}
 
@@ -370,21 +370,23 @@ const StyledTabTitle = _styledComponents.default.li`
   alternateStyling,
   error,
   warning,
-  info
+  info,
+  isInSidebar
 }) => position === "left" && (0, _styledComponents.css)`
       background-color: transparent;
       border-bottom: 0px;
 
+      ${!isInSidebar && (0, _styledComponents.css)`
+        border-right: ${alternateStyling ? "1px" : "2px"} solid
+          ${theme.tab.background};
+      `}
+
       ${!borders && (0, _styledComponents.css)`
         ${StyledTitleContent} {
           border-bottom: none;
         }
       `}
 
-      ${!alternateStyling && (0, _styledComponents.css)`
-        border-right: 2px solid ${theme.tab.background};
-      `}
-
       display: block;
       height: auto;
       margin-left: 0px;
@@ -397,6 +399,10 @@ const StyledTabTitle = _styledComponents.default.li`
         ${alternateStyling && `border-right-color: ${theme.tab.background};`}
       }
 
+      ${(warning || info) && (0, _styledComponents.css)`
+        border-right: none;
+      `}
+
       ${({
   isTabSelected
 }) => isTabSelected && (0, _styledComponents.css)`

package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -75,11 +75,10 @@ const StyledTabsHeaderList = _styledComponents.default.ul`
 
   ${({
   position,
-  noRightBorder,
-  theme
+  noRightBorder
 }) => position === "left" && (0, _styledComponents.css)`
       flex-direction: column;
-      box-shadow: inset ${computeLineWidth} 0px 0px 0px ${theme.tab.background};
+      box-shadow: none;
 
       ${noRightBorder && (0, _styledComponents.css)`
         box-shadow: none;

package/lib/components/tabs/tabs.component.js

@@ -282,8 +282,15 @@ const Tabs = ({
         tab = child;
       }
     });
-    return tab ? /*#__PURE__*/(0, _react.cloneElement)(tab, {
-      isTabSelected: isTabSelected(tab.props.tabId)
+    return tab ? /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
+      role: "tabpanel",
+      position,
+      isTabSelected: isTabSelected(tab.props.tabId),
+      key: `${tab.props.tabId}-tab`,
+      ariaLabelledby: `${tab.props.tabId}-tab`,
+      updateErrors,
+      updateWarnings,
+      updateInfos
     }) : null;
   };
   /** Builds all tabs where non selected tabs have class of hidden */

package/lib/components/textarea/textarea.component.js

@@ -190,9 +190,11 @@ let Textarea = /*#__PURE__*/function (_React$Component) {
         "data-component": dataComponent,
         "data-element": dataElement,
         "data-role": dataRole,
+        helpAriaLabel,
         ...props
       } = this.props;
       return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+        helpAriaLabel: helpAriaLabel,
         tooltipPosition: tooltipPosition
       }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_textarea.default, _extends({
         labelInline: labelInline,
@@ -374,7 +376,10 @@ Textarea.propTypes = { ...marginPropTypes,
   required: _propTypes.default.bool,
 
   /** Overrides the default tooltip position */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 Textarea.defaultProps = {
   labelWidth: 30,

package/lib/components/textarea/textarea.d.ts

@@ -70,6 +70,8 @@ export interface TextareaProps
   warnOverLimit?: boolean;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare class Textarea extends React.Component<TextareaProps> {}

package/lib/components/textbox/textbox.component.js

@@ -86,10 +86,12 @@ const Textbox = ({
   enforceCharacterLimit = true,
   characterLimit,
   warnOverLimit = false,
+  helpAriaLabel,
   ...props
 }) => {
   const [maxLength, characterCount] = (0, _useCharacterCount.default)(value, characterLimit, warnOverLimit, enforceCharacterLimit);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
     disabled: disabled,
@@ -218,10 +220,10 @@ Textbox.propTypes = {
   /** Event handler for the mouse down event */
   onMouseDown: _propTypes.default.func,
 
-  /** Defered callback called after the onChange event */
+  /** Deferred callback called after the onChange event */
   onChangeDeferred: _propTypes.default.func,
 
-  /** Integer to determine timeout for defered callback */
+  /** Integer to determine timeout for deferred callback */
   deferTimeout: _propTypes.default.number,
 
   /** Unique identifier for the input. Will use a randomly generated GUID if none is provided */
@@ -347,7 +349,10 @@ Textbox.propTypes = {
   characterLimit: _propTypes.default.string,
 
   /** Whether to display the character count message in red */
-  warnOverLimit: _propTypes.default.bool
+  warnOverLimit: _propTypes.default.bool,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 Textbox.defaultProps = {
   labelWidth: 30,

package/lib/components/textbox/textbox.d.ts

@@ -57,7 +57,7 @@ export interface CommonTextboxProps
   labelWidth?: number;
   /** Specify a callback triggered on change */
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Defered callback to be called after the onChange event */
+  /** Deferred callback to be called after the onChange event */
   onChangeDeferred?: () => void;
   /** Specify a callback triggered on click */
   onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
@@ -95,6 +95,8 @@ export interface CommonTextboxProps
   inputRef?: (input: React.RefObject<HTMLInputElement>) => void;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 export interface TextboxProps extends CommonTextboxProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "95.0.2",
+  "version": "95.1.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -8,10 +8,12 @@
     "node": ">=14.16.0"
   },
   "files": [
-    "lib"
+    "lib",
+    "scripts/check_carbon_version.js",
+    "scripts/check_rfcs.js"
   ],
   "scripts": {
-    "start": "node ./check_version.js && start-storybook -p 9001 -s .assets -c .storybook",
+    "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -s .assets -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
@@ -22,6 +24,7 @@
     "lint": "eslint ./src",
     "precompile": "npm run clean-lib && npm run copy-files && npm run babel",
     "prepublishOnly": "npm run precompile",
+    "postinstall": "node ./scripts/check_carbon_version.js && node ./scripts/check_rfcs.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "build-storybook -c .storybook -s .assets",
     "start:static": "npx http-server -p 9001 ./storybook-static",
@@ -132,16 +135,19 @@
     "typescript": "^3.9.5"
   },
   "dependencies": {
+    "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
     "@sage/design-tokens": "^1.73.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "classnames": "~2.2.6",
     "crypto-js": "~3.3.0",
+    "dotenv": "^10.0.0",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
     "moment": "~2.20.1",
+    "node-fetch": "^2.6.1",
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-day-picker": "~6.1.1",

package/scripts/check_carbon_version.js

@@ -0,0 +1,30 @@
+/* eslint-disable no-console */
+const fetch = require("node-fetch");
+const dotenv = require("dotenv");
+const chalk = require("chalk");
+const { version } = require("../package.json");
+
+dotenv.config();
+const majorVersion = version.split(".")[0];
+
+const checkCarbonVersion = () => {
+  fetch("https://registry.npmjs.com/carbon-react")
+    .then((res) => res.json())
+    .then((data) => {
+      const { latest } = data["dist-tags"];
+      const latestMajor = latest.split(".")[0];
+
+      const diff = Number(latestMajor) - Number(majorVersion);
+
+      if (diff > 1) {
+        console.log(
+          `carbon-react version installed is currently ${chalk.yellow(
+            diff
+          )} major versions behind the latest.`
+        );
+      }
+    })
+    .catch((err) => console.log(err));
+};
+
+if (!process.env.CARBON_INSTALL) checkCarbonVersion();

package/scripts/check_rfcs.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-console */
+const { Octokit } = require("@octokit/rest");
+const dotenv = require("dotenv");
+const chalk = require("chalk");
+
+dotenv.config();
+const octokit = new Octokit({
+  baseUrl: "https://api.github.com",
+});
+
+const method = "GET";
+const owner = "sage";
+const path = "pulls";
+const repo = "carbon";
+const url = "/repos/{owner}/{repo}/{path}";
+
+const getOpenRfcs = async () => {
+  const { data } = await octokit.request({
+    owner,
+    repo,
+    url,
+    method,
+    path,
+  });
+
+  return data.filter((item) => {
+    const labels = item.labels.filter((label) => label.name === "RFC");
+
+    return labels.length > 0;
+  });
+};
+
+const getRfcTitle = (rfc) => rfc.title.split(": ")[1];
+
+const checkRfcs = async () => {
+  const openRfcs = await getOpenRfcs();
+
+  if (openRfcs.length > 0) {
+    console.log("\ncarbon-react currently has open RFCs:");
+
+    openRfcs.forEach((item) => {
+      const title = getRfcTitle(item);
+      console.log(`- ${title}: ${chalk.cyan(item.html_url)}`);
+    });
+    console.log("\n");
+  }
+};
+
+if (!process.env.CARBON_INSTALL) checkRfcs();