carbon-react 94.8.0 → 95.1.0

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

@@ -17,8 +17,6 @@ var _iconUnicodes = _interopRequireDefault(require("./icon-unicodes"));
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
-var _palette = _interopRequireDefault(require("../../style/palette"));
-
 var _iconConfig = _interopRequireWildcard(require("./icon-config"));
 
 var _browserTypeCheck = _interopRequireWildcard(require("../../__internal__/utils/helpers/browser-type-check"));
@@ -31,60 +29,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const getBackgroundColor = (theme, bgTheme, disabled, isHover) => {
-  if (bgTheme !== "none") {
-    if (disabled) return theme.icon.disabled;
-  }
-
-  const palette = (0, _palette.default)({
-    statusColor: theme.colors[bgTheme],
-    businessColor: theme.colors.primary
-  });
-  const statuses = ["info", "error", "success", "warning"];
-
-  if (statuses.includes(bgTheme)) {
-    return isHover ? palette.statusColorShade(20) : theme.colors[bgTheme];
-  }
-
-  if (bgTheme === "business") {
-    return isHover ? palette.businessColorShade(20) : theme.colors.primary;
-  }
-
-  return "transparent";
-};
-
-const getIconColor = (bgTheme, theme, iconColor, disabled, isHover) => {
-  if (disabled) return theme.icon.disabled;
-
-  if (bgTheme !== "none") {
-    const whiteIconBackgrounds = ["error", "info", "business"];
-    const darkIconBackgrounds = ["success", "warning"];
-    if (whiteIconBackgrounds.includes(bgTheme)) return theme.colors.white;
-
-    if (darkIconBackgrounds.includes(bgTheme)) {
-      return isHover ? theme.icon.defaultHover : theme.icon.default;
-    }
-  }
-
-  const palette = (0, _palette.default)({
-    businessColor: theme.colors.primary
-  });
-
-  switch (iconColor) {
-    case "on-dark-background":
-      return theme.colors.white;
-
-    case "on-light-background":
-      return isHover ? theme.icon.onLightBackgroundHover : theme.icon.onLightBackground;
-
-    case "business-color":
-      return isHover ? palette.businessColorShade(20) : theme.colors.primary;
-
-    default:
-      return isHover ? theme.icon.defaultHover : theme.icon.default;
-  }
-};
-
 function adjustIconBgSize(fontSize, bgSize) {
   var _replacements$fontSiz;
 
@@ -113,17 +57,16 @@ function adjustIconBgSize(fontSize, bgSize) {
 
 const StyledIcon = _styledComponents.default.span`
   ${({
-  bgTheme,
   theme,
   color,
   bg,
   isInteractive,
-  iconColor,
   bgSize,
   bgShape,
   type,
   fontSize,
-  disabled
+  disabled,
+  hasTooltip
 }) => {
   let finalColor;
   let finalHoverColor;
@@ -131,7 +74,10 @@ const StyledIcon = _styledComponents.default.span`
   let bgHoverColor;
 
   try {
-    if (color) {
+    if (disabled) {
+      finalColor = theme.icon.disabled;
+      finalHoverColor = theme.icon.disabled;
+    } else if (color) {
       const {
         color: renderedColor
       } = (0, _color.default)({
@@ -141,8 +87,8 @@ const StyledIcon = _styledComponents.default.span`
       finalColor = renderedColor;
       finalHoverColor = (0, _polished.shade)(0.2, renderedColor);
     } else {
-      finalColor = getIconColor(bgTheme, theme, iconColor, disabled, false);
-      finalHoverColor = getIconColor(bgTheme, theme, iconColor, disabled, true);
+      finalColor = theme.icon.default;
+      finalHoverColor = theme.icon.defaultHover;
     }
 
     if (bg) {
@@ -154,9 +100,12 @@ const StyledIcon = _styledComponents.default.span`
       });
       bgColor = backgroundColor;
       bgHoverColor = (0, _polished.shade)(0.2, backgroundColor);
+    } else if (disabled) {
+      bgColor = theme.icon.disabled;
+      bgHoverColor = theme.icon.disabled;
     } else {
-      bgColor = getBackgroundColor(theme, bgTheme, disabled, false);
-      bgHoverColor = getBackgroundColor(theme, bgTheme, disabled, true);
+      bgColor = "transparent";
+      bgHoverColor = "transparent";
     }
   } catch (e) {
     // eslint-disable-next-line no-console
@@ -164,11 +113,16 @@ const StyledIcon = _styledComponents.default.span`
   }
 
   return (0, _styledComponents.css)`
-      display: inline-block;
       position: relative;
       color: ${finalColor};
       background-color: ${bgColor};
       vertical-align: middle;
+      align-items: center;
+      display: inline-flex;
+      justify-content: center;
+      height: ${adjustIconBgSize(fontSize, bgSize)};
+      width: ${adjustIconBgSize(fontSize, bgSize)};
+      border-radius: ${_iconConfig.default.backgroundShape[bgShape]};
 
       ${isInteractive && (0, _styledComponents.css)`
         &:hover {
@@ -177,15 +131,6 @@ const StyledIcon = _styledComponents.default.span`
         }
       `}
 
-      ${bgTheme !== "none" && (0, _styledComponents.css)`
-        align-items: center;
-        display: inline-flex;
-        justify-content: center;
-        height: ${adjustIconBgSize(fontSize, bgSize)};
-        width: ${adjustIconBgSize(fontSize, bgSize)};
-        border-radius: ${_iconConfig.default.backgroundShape[bgShape]};
-      `}
-
       &::before {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
@@ -209,6 +154,12 @@ const StyledIcon = _styledComponents.default.span`
         display: block;
       }
 
+      ${hasTooltip && `
+        :focus {
+          outline: 2px solid ${theme.colors.focus};
+        }
+      `}
+
       ${_styledSystem.margin}
     `;
 }}
@@ -220,9 +171,7 @@ StyledIcon.propTypes = {
   disabled: _propTypes.default.bool,
   bgSize: _propTypes.default.oneOf(["extra-small", "small", "medium", "large", "extra-large"]),
   bgShape: _propTypes.default.oneOf(_iconConfig.ICON_SHAPES),
-  bgTheme: _propTypes.default.oneOf([..._iconConfig.ICON_COLORS, ..._iconConfig.ICON_BACKGROUNDS, ""]),
-  fontSize: _propTypes.default.oneOf(["small", "medium", "large", "extra-large"]),
-  iconColor: _propTypes.default.oneOf(_iconConfig.ICON_COLORS)
+  fontSize: _propTypes.default.oneOf(["small", "medium", "large", "extra-large"])
 };
 StyledIcon.defaultProps = {
   theme: _base.default

package/lib/components/link/link.component.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styledComponents = require("styled-components");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../icon"));
@@ -17,6 +19,8 @@ var _link = require("./link.style");
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
+var _themes = require("../../style/themes");
+
 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; }
@@ -44,6 +48,8 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   target,
   ...rest
 }, ref) => {
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
+
   const tabIndex = tabbable && !disabled ? "0" : "-1";
 
   const handleOnKeyDown = ev => {
@@ -66,8 +72,8 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: icon,
-      bgTheme: "none",
-      iconColor: "business-color",
+      bgSize: "extra-small",
+      color: theme.colors.primary,
       disabled: disabled,
       ariaLabel: ariaLabel,
       tooltipMessage: tooltipMessage,

package/lib/components/link/link.style.js

@@ -54,6 +54,7 @@ const StyledLink = _styledComponents.default.span`
       color: ${isSkipLink ? theme.text.color : theme.colors.primary};
       display: inline-block;
       ${_icon.default} {
+        display: inline-block;
         position: relative;
         vertical-align: middle;
         ${iconAlign === "left" && (0, _styledComponents.css)`

package/lib/components/message/type-icon/type-icon.component.js

@@ -23,8 +23,7 @@ const TypeIcon = ({
     variant: variant,
     transparent: transparent
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: variant,
-    bgTheme: "none"
+    type: variant
   }));
 };
 

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/pill/pill.component.js

@@ -32,9 +32,7 @@ const renderCloseIcon = onDelete => /*#__PURE__*/_react.default.createElement(_i
   "data-element": "close",
   "aria-label": "close"
 }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-  type: "cross",
-  bgSize: "small",
-  bgTheme: "none"
+  type: "cross"
 }));
 
 const Pill = ({

package/lib/components/pill/pill.style.js

@@ -173,6 +173,8 @@ const PillStyle = _styledComponents.default.span`
           ${_icon.default} {
             font-size: 12px;
             padding: 0 4px;
+            height: unset;
+            width: unset;
 
             &:hover,
             &:focus {

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/split-button/split-button.component.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styledComponents = require("styled-components");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
@@ -29,6 +31,8 @@ var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 
 var _utils = require("../../style/utils");
 
+var _themes = require("../../style/themes");
+
 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; }
@@ -54,6 +58,8 @@ const SplitButton = ({
   text,
   ...rest
 }) => {
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
+
   const isToggleButtonFocused = (0, _react.useRef)(false);
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
   const additionalButtons = (0, _react.useRef)([]);
@@ -161,8 +167,8 @@ const SplitButton = ({
 
   function getIconColor() {
     const colorsMap = {
-      primary: "on-dark-background",
-      secondary: "business-color"
+      primary: theme.colors.white,
+      secondary: theme.colors.primary
     };
     return colorsMap[buttonType || as];
   }
@@ -180,8 +186,9 @@ const SplitButton = ({
       key: "toggle-button"
     }, toggleButtonProps()), /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "dropdown",
-      bgTheme: "none",
-      iconColor: getIconColor(),
+      bgSize: "extra-small",
+      color: getIconColor(),
+      bg: "transparent",
       disabled: disabled
     }))];
   }

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

@@ -344,10 +344,6 @@ const StyledTabTitle = _styledComponents.default.li`
         padding-bottom: 0px;
       `}
 
-    &:focus {
-      outline: ${isInSidebar ? "none;" : `2px solid ${theme.colors.focus};`}
-    }
-
     &:hover {
       background-color: ${theme.colors.white};
       border-bottom-color: ${alternateStyling ? `${theme.tab.background};` : `${theme.colors.primary};`}
@@ -355,6 +351,16 @@ const StyledTabTitle = _styledComponents.default.li`
       cursor: default;
     }
   `}
+
+  ${({
+  theme,
+  isInSidebar
+}) => `
+    &:focus {
+      outline: ${isInSidebar ? "none;" : `2px solid ${theme.colors.focus};`}
+      z-index: 1;
+    }
+  `}
   
   ${({
   position,

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

@@ -59,9 +59,22 @@ const Tabs = ({
   headerWidth,
   ...rest
 }) => {
-  const tabRefs = (0, _react.useRef)([]);
+  /** The children nodes converted into an Array */
+  const filteredChildren = (0, _react.useMemo)(() => _react.Children.toArray(children).filter(child => child), [children]);
+  /** Array of the tabIds for the child nodes */
+
+  const tabIds = () => {
+    return filteredChildren.map(child => child.props.tabId);
+  };
+  /** Array of refs to the TabTitle nodes */
+
+
+  const tabRefs = (0, _react.useMemo)(() => Array.from({
+    length: filteredChildren.length
+  }).map(() => /*#__PURE__*/(0, _react.createRef)()), [filteredChildren.length]);
   const previousSelectedTabId = (0, _react.useRef)(selectedTabId);
   const [selectedTabIdState, setSelectedTabIdState] = (0, _react.useState)();
+  const [tabStopId, setTabStopId] = (0, _react.useState)();
   const {
     isInSidebar
   } = (0, _react.useContext)(_drawer.DrawerSidebarContext);
@@ -69,7 +82,13 @@ const Tabs = ({
   const [tabsWarnings, setTabsWarnings] = (0, _react.useState)({});
   const [tabsInfos, setTabsInfos] = (0, _react.useState)({});
   (0, _react.useLayoutEffect)(() => {
-    const selectedTab = selectedTabId || _react.default.Children.toArray(children)[0].props.tabId;
+    const selectedTab = selectedTabId || _react.Children.toArray(children)[0].props.tabId;
+
+    if (!tabIds().includes(selectedTabId)) {
+      setTabStopId(_react.default.Children.toArray(children)[0].props.tabId);
+    } else {
+      setTabStopId(selectedTab);
+    }
 
     setSelectedTabIdState(selectedTab); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -94,15 +113,25 @@ const Tabs = ({
       });
     }
   }, [tabsInfos]);
+  /** Returns true/false for if the given tab id is selected. */
+
+  const isTabSelected = (0, _react.useCallback)(tabId => tabId === selectedTabIdState, [selectedTabIdState]);
+  const hasTabStop = (0, _react.useCallback)(tabId => tabId === tabStopId, [tabStopId]);
   /** Updates the currently visible tab */
 
   const updateVisibleTab = (0, _react.useCallback)(tabid => {
-    setSelectedTabIdState(tabid);
+    if (!isTabSelected(tabid)) {
+      setSelectedTabIdState(tabid);
+    }
+
+    if (!hasTabStop(tabid)) {
+      setTabStopId(tabid);
+    }
 
     if (onTabChange) {
       onTabChange(tabid);
     }
-  }, [onTabChange]);
+  }, [onTabChange, isTabSelected, hasTabStop]);
   /** Determines if the tab titles are in a vertical format. */
 
   const isVertical = currentPosition => currentPosition === "left";
@@ -122,17 +151,7 @@ const Tabs = ({
   /** Focuses the tab for the reference specified */
 
 
-  const focusTab = ref => ref.focus();
-  /** The children nodes converted into an Array */
-
-
-  const filteredChildren = _react.default.useMemo(() => _react.default.Children.toArray(children).filter(child => child), [children]);
-  /** Array of the tabIds for the child nodes */
-
-
-  const tabIds = () => {
-    return filteredChildren.map(child => child.props.tabId);
-  };
+  const focusTab = ref => ref.current.focus();
   /** Will trigger the tab at the given index. */
 
 
@@ -148,7 +167,7 @@ const Tabs = ({
     }
 
     const nextTabId = ids[newIndex];
-    const nextRef = tabRefs.current[newIndex];
+    const nextRef = tabRefs[newIndex];
     updateVisibleTab(nextTabId);
     focusTab(nextRef);
   };
@@ -174,16 +193,6 @@ const Tabs = ({
       }
     };
   };
-  /** Returns true/false for if the given tab id is selected. */
-
-
-  const isTabSelected = tabId => tabId === selectedTabIdState;
-
-  const addRef = ref => {
-    if (ref && !tabRefs.current.includes(ref)) {
-      tabRefs.current.push(ref);
-    }
-  };
   /** Build the headers for the tab component */
 
 
@@ -220,8 +229,8 @@ const Tabs = ({
         key: tabId,
         onClick: handleTabClick,
         onKeyDown: handleKeyDown(index),
-        ref: node => addRef(node),
-        tabIndex: isTabSelected(tabId) ? "0" : "-1",
+        ref: tabRefs[index],
+        tabIndex: isTabSelected(tabId) || hasTabStop(tabId) ? "0" : "-1",
         title: title,
         href: href,
         isTabSelected: isTabSelected(tabId),
@@ -239,7 +248,16 @@ const Tabs = ({
         noLeftBorder: ["no left side", "no sides"].includes(borders),
         noRightBorder: ["no right side", "no sides"].includes(borders),
         customLayout: customLayout,
-        isInSidebar: isInSidebar
+        isInSidebar: isInSidebar,
+        onFocus: () => {
+          if (!hasTabStop(tabId)) {
+            setTabStopId(tabId);
+          }
+
+          if (!isTabSelected(tabId)) {
+            updateVisibleTab(tabId);
+          }
+        }
       });
 
       return tabTitle;
@@ -264,7 +282,7 @@ const Tabs = ({
         tab = child;
       }
     });
-    return tab ? /*#__PURE__*/_react.default.cloneElement(tab, {
+    return tab ? /*#__PURE__*/(0, _react.cloneElement)(tab, {
       isTabSelected: isTabSelected(tab.props.tabId)
     }) : null;
   };
@@ -279,7 +297,7 @@ const Tabs = ({
     }
 
     const tabs = filteredChildren.map(child => {
-      return /*#__PURE__*/_react.default.cloneElement(child, { ...child.props,
+      return /*#__PURE__*/(0, _react.cloneElement)(child, { ...child.props,
         role: "tabpanel",
         position,
         isTabSelected: isTabSelected(child.props.tabId),

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> {}