carbon-react 101.1.0 → 101.3.2

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

@@ -52,6 +52,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   isInSidebar,
   href,
   onKeyDown,
+  align,
   ...tabTitleProps
 }, ref) => {
   const keys = (0, _react.useRef)([]);
@@ -74,6 +75,8 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   const handleClick = ev => {
+    var _ref$current;
+
     ev.preventDefault();
     const customEvent = { ...ev,
       target: { ...ev.target,
@@ -86,8 +89,10 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     if (href) {
       onClick(customEvent);
       return window.open(href, "_blank");
-    }
+    } // safari does not focus buttons by default
 
+
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     return onClick(customEvent);
   };
 
@@ -131,18 +136,17 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     error: error,
     warning: warning,
     info: info,
-    size: size,
     noRightBorder: noRightBorder,
     alternateStyling: alternateStyling || isInSidebar,
     borders: borders,
     isInSidebar: isInSidebar
-  }, tabTitleProps, (0, _tags.default)("tab-header", tabTitleProps), {
-    onKeyDown: handleKeyDown
-  }), /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTitleContent, _extends({}, isHref && {
+  }, tabTitleProps, isHref && {
     href,
     target: "_blank",
     as: "a"
-  }, {
+  }, (0, _tags.default)("tab-header", tabTitleProps), {
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTitleContent, {
     error: error,
     warning: warning,
     info: info,
@@ -155,23 +159,29 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     hasSiblings: !!siblings,
     isTabSelected: isTabSelected,
     hasCustomLayout: !!customLayout,
-    alternateStyling: hasAlternateStyling
-  }), renderContent(), isHref && /*#__PURE__*/_react.default.createElement(_icon.default, {
+    alternateStyling: hasAlternateStyling,
+    align: align,
+    hasHref: !!href
+  }, renderContent(), isHref && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "link"
-  }), /*#__PURE__*/_react.default.createElement(_tabTitle.StyledLayoutWrapper, {
+  }), hasFailedValidation && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledLayoutWrapper, {
+    position: position,
     hasCustomSibling: !!customLayout
   }, error && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     onClick: handleClick,
     tooltipPosition: "top",
-    error: errorMessage
+    error: errorMessage,
+    tabIndex: null
   }), !error && warning && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     onClick: handleClick,
     tooltipPosition: "top",
-    warning: warningMessage
+    warning: warningMessage,
+    tabIndex: null
   }), !warning && !error && info && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     onClick: handleClick,
     tooltipPosition: "top",
-    info: infoMessage
+    info: infoMessage,
+    tabIndex: null
   }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledSelectedIndicator, {
     "data-element": "tab-selected-indicator",
     position: position,
@@ -204,7 +214,8 @@ TabTitle.propTypes = {
   noRightBorder: _propTypes.default.bool,
   customLayout: _propTypes.default.node,
   isInSidebar: _propTypes.default.bool,
-  href: _propTypes.default.string
+  href: _propTypes.default.string,
+  align: _propTypes.default.oneOf(["left", "right"])
 };
 var _default = TabTitle;
 exports.default = _default;

package/lib/components/tabs/__internal__/tab-title/tab-title.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+export interface TabTitleProps {
+  title: string;
+  id?: string;
+  dataTabId?: string;
+  className?: string;
+  children?: React.ReactNode;
+  isTabSelected?: boolean;
+  position?: "top" | "left";
+  errorMessage?: string;
+  warningMessage?: string;
+  infoMessage?: string;
+  errors?: boolean;
+  warning?: boolean;
+  info?: boolean;
+  borders?: boolean;
+  noLeftBorder?: boolean;
+  noRightBorder?: boolean;
+  alternateStyling?: boolean;
+  isInSidebar?: boolean;
+  siblings?: React.ReactNode[];
+  titlePosition?: "before" | "after";
+  href?: string;
+  tabIndex?: string;
+  size?: "default" | "large";
+  align?: "left" | "right";
+  customLayout?: React.ReactNode;
+  onClick?: (
+    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+  ) => void;
+  onKeyDown?: (
+    ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>
+  ) => void;
+}
+
+declare function TabTitle(props: TabTitleProps): JSX.Element;
+
+export default TabTitle;

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

@@ -21,8 +21,9 @@ 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 StyledTitleContent = _styledComponents.default.div`
+const StyledTitleContent = _styledComponents.default.span`
   outline: none;
+  display: inline-block;
 
   ${({
   theme,
@@ -32,17 +33,22 @@ const StyledTitleContent = _styledComponents.default.div`
   noLeftBorder,
   noRightBorder,
   isTabSelected,
-  hasSiblings,
-  href,
+  hasHref,
   error,
-  warning,
-  info,
-  alternateStyling
+  alternateStyling,
+  align
 }) => (0, _styledComponents.css)`
     line-height: 20px;
     margin: 0;
+    text-align: ${align};
+
+    ${position === "left" && (0, _styledComponents.css)`
+      display: flex;
+      width: 100%;
+      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
+    `}
 
-    ${href && (0, _styledComponents.css)`
+    ${hasHref && (0, _styledComponents.css)`
       color: ${theme.text.color};
       display: block;
       text-decoration: none;
@@ -81,10 +87,8 @@ const StyledTitleContent = _styledComponents.default.div`
 
     ${size === "large" && position === "top" && (0, _styledComponents.css)`
       padding: 10px 24px;
+      ${borders && `padding-bottom: 9px;`}
       font-size: 16px;
-      ${isTabSelected && !hasSiblings && !(error || warning || info) && (0, _styledComponents.css)`
-        padding-bottom: 6px;
-      `}
     `}
 
     ${size === "large" && position === "left" && (0, _styledComponents.css)`
@@ -95,11 +99,12 @@ const StyledTitleContent = _styledComponents.default.div`
 
     ${size === "default" && (0, _styledComponents.css)`
       padding: 10px 16px;
-      ${isTabSelected && !(error || warning || info) && position === "top" && (0, _styledComponents.css)`
-        padding-bottom: 8px;
-      `}
 
-      ${position === "left" && !isTabSelected && !alternateStyling && error && `margin-right: -2px;`}
+      ${borders && `padding-bottom: 9px;`}
+
+      ${position === "left" && !isTabSelected && !alternateStyling && error && `
+        margin-right: -2px;
+      `}
     `}
   `}
 
@@ -131,7 +136,7 @@ const StyledTitleContent = _styledComponents.default.div`
         padding-right: ${size === "large" ? "26px;" : "18px;"};
       `}
       
-    &:hover {
+      &:hover {
         outline: 1px solid;
         outline-offset: -1px;
 
@@ -174,10 +179,10 @@ const StyledTitleContent = _styledComponents.default.div`
 
       ${position === "left" && (0, _styledComponents.css)`
         border-right-color: transparent;
-        padding-right: ${size === "large" ? "26px;" : "18px;"};
+        padding-right: ${size === "large" ? "26px" : "18px"};
       `}
     
-    &:hover {
+      &:hover {
         outline: 2px solid ${theme.colors.error};
         outline-offset: -2px;
         ${position === "top" && (0, _styledComponents.css)`
@@ -190,7 +195,7 @@ const StyledTitleContent = _styledComponents.default.div`
 
         ${position === "left" && (0, _styledComponents.css)`
           border-right-color: transparent;
-          padding-right: ${size === "large" ? "26px;" : "18px;"};
+          padding-right: ${size === "large" ? "26px" : "18px"};
         `}
       }
     `}
@@ -206,23 +211,11 @@ const StyledTitleContent = _styledComponents.default.div`
   position
 }) => hasSiblings && !hasCustomLayout && position === "top" && (0, _styledComponents.css)`
       height: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
 
-      ${size === "default" && (0, _styledComponents.css)`
-        padding-top: 10px;
-        padding-bottom: 10px;
-
-        ${!(error || warning || info) && isTabSelected && (0, _styledComponents.css)`
-          padding-bottom: 8px;
-        `}
-      `}
-
-      ${size === "large" && (0, _styledComponents.css)`
-        padding-top: 10px;
-        padding-bottom: 10px;
-
-        ${!(error || warning || info) && isTabSelected && (0, _styledComponents.css)`
-          padding-bottom: 6px;
-        `}
+      ${size === "large" && !(error || warning || info) && isTabSelected && (0, _styledComponents.css)`
+        padding-bottom: 6px;
       `}
     `}
 
@@ -238,13 +231,13 @@ const StyledTitleContent = _styledComponents.default.div`
       display: flex;
 
       ${position === "left" && (0, _styledComponents.css)`
-        padding: ${size === "large" ? "2px;" : "0px;"}
-          ${isTabSelected && (0, _styledComponents.css)`
-            padding-right: 0px;
-          `}
-          ${(error || warning || info) && (0, _styledComponents.css)`
-            padding-right: ${size === "large" ? "26px" : "18px"};
-          `};
+        padding: ${size === "large" ? "2px" : "0px"};
+        ${isTabSelected && (0, _styledComponents.css)`
+          padding-right: 0px;
+        `}
+        ${(error || warning || info) && (0, _styledComponents.css)`
+          padding-right: ${size === "large" ? "26px" : "18px"};
+        `}
       `}
 
       ${position === "top" && (0, _styledComponents.css)`
@@ -253,49 +246,63 @@ const StyledTitleContent = _styledComponents.default.div`
             padding-bottom: 0px;
           `}
           ${(error || warning || info) && (0, _styledComponents.css)`
-        padding-bottom: ${size === "large" ? "4px;" : "2px;"}
-        padding-right: ${size === "large" ? "18px;" : "14px;"}
-
-        &:hover {
           padding-bottom: ${size === "large" ? "4px;" : "2px;"}
-        }
-      `};
+          padding-right: ${size === "large" ? "18px;" : "14px;"}
+
+          &:hover {
+            padding-bottom: ${size === "large" ? "4px;" : "2px;"}
+          }
+        `};
       `}
     `}
 `;
 exports.StyledTitleContent = StyledTitleContent;
-const StyledTabTitle = _styledComponents.default.li`
+const StyledTabTitle = _styledComponents.default.button`
   background-color: transparent;
   display: inline-block;
   font-weight: bold;
-  height: 100%;
   position: relative;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0px;
+  text-decoration: none;
+  outline-offset: 0px;
+  margin: 0;
+
+  a:visited {
+    color: inherit;
+  }
 
   ${({
   position,
   borders,
   noRightBorder,
   noLeftBorder
-}) => `
-      ${position === "top" && (0, _styledComponents.css)`
-          ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
-            &:not(:first-of-type) {
-              margin-left: -1px;
-            }
-          `}
-        `}
-      ${position === "left" && (0, _styledComponents.css)`
-          ${borders && (0, _styledComponents.css)`
-            &:not(:first-of-type) {
-              margin-top: -1px;
-            }
-          `}
-        `}
-    `}
+}) => (0, _styledComponents.css)`
+    ${position === "top" && (0, _styledComponents.css)`
+      height: 40px;
 
-  &:first-child {
-    margin-left: 0;
-  }
+      ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
+        &:nth-of-type(n + 1) {
+          margin-left: -1px;
+        }
+        &:first-child {
+          margin-left: 0;
+        }
+      `}
+    `}
+    ${position === "left" && (0, _styledComponents.css)`
+      ${borders && (0, _styledComponents.css)`
+        &:nth-of-type(n + 1) {
+          margin-top: -1px;
+        }
+        &:first-child {
+          margin-top: 0;
+        }
+      `}
+    `}
+  `}
 
   ${({
   isTabSelected,
@@ -319,27 +326,12 @@ const StyledTabTitle = _styledComponents.default.li`
   error,
   warning,
   info,
-  size,
-  isInSidebar,
-  position
+  isInSidebar
 }) => isTabSelected && (0, _styledComponents.css)`
     ${!isInSidebar && "z-index: 1;"}
     color: ${theme.text.color};
     background-color: ${theme.colors.white};
 
-    ${alternateStyling && (0, _styledComponents.css)`
-        border-bottom: 2px solid ${theme.tab.background};
-      `}
-
-    ${!alternateStyling && (0, _styledComponents.css)`
-        padding-bottom: 2px;
-      `}
-
-    ${size === "large" && (0, _styledComponents.css)`
-        ${position === "top" && `
-          padding-bottom: ${alternateStyling ? "3px" : "4px"};
-          `}
-      `}
     ${(error || warning || info) && (0, _styledComponents.css)`
         padding-bottom: 0px;
       `}
@@ -364,7 +356,6 @@ const StyledTabTitle = _styledComponents.default.li`
   
   ${({
   position,
-  size,
   borders,
   theme,
   alternateStyling,
@@ -387,7 +378,7 @@ const StyledTabTitle = _styledComponents.default.li`
         }
       `}
 
-      display: block;
+      display: flex;
       height: auto;
       margin-left: 0px;
 
@@ -422,12 +413,6 @@ const StyledTabTitle = _styledComponents.default.li`
     
           background-color: ${theme.colors.white};
 
-          ${size === "large" && (0, _styledComponents.css)`
-            & ${StyledTitleContent} {
-              padding-right: 22px;
-            }
-          `}
-
           &:hover {
             ${alternateStyling && ` border-right-color: ${theme.tab.background};`}
             background-color: ${theme.colors.white};
@@ -473,7 +458,8 @@ const StyledLayoutWrapper = _styledComponents.default.div`
   ${({
   hasCustomLayout,
   titlePosition,
-  hasCustomSibling
+  hasCustomSibling,
+  position
 }) => !hasCustomLayout && (0, _styledComponents.css)`
       display: inline-flex;
 
@@ -500,7 +486,7 @@ const StyledLayoutWrapper = _styledComponents.default.div`
         ${_icon.default} {
           height: 16px;
           left: -2px;
-          top: 3px;
+          top: ${position === "left" ? "1px" : "3px"};
         }
       }
     `}

package/lib/components/tabs/__internal__/tabs-header/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./tab-header";

package/lib/components/tabs/__internal__/tabs-header/tab-header.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface TabHeaderProps {
+  role?: string;
+  position?: "top" | "left";
+  extendedLine?: boolean;
+  noRightBorder?: boolean;
+  alternateStyling?: boolean;
+  isInSidebar?: boolean;
+  children: React.ReactNode;
+  align?: "left" | "right";
+}
+
+declare function TabHeader(props: TabHeaderProps): JSX.Element;
+
+export default TabHeader;

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

@@ -50,7 +50,7 @@ const StyledTabsHeaderWrapper = _styledComponents.default.div`
     `}
 `;
 exports.StyledTabsHeaderWrapper = StyledTabsHeaderWrapper;
-const StyledTabsHeaderList = _styledComponents.default.ul`
+const StyledTabsHeaderList = _styledComponents.default.div`
   display: flex;
   box-shadow: inset 0px ${computeLineWidth} 0px 0px
     ${({

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

@@ -249,6 +249,7 @@ const Tabs = ({
         noRightBorder: ["no right side", "no sides"].includes(borders),
         customLayout: customLayout,
         isInSidebar: isInSidebar,
+        align: align,
         onFocus: () => {
           if (!hasTabStop(tabId)) {
             setTabStopId(tabId);

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

@@ -33,6 +33,8 @@ var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-conte
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
+
 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; }
@@ -101,6 +103,21 @@ const Textarea = ({
     }
   };
 
+  const {
+    labelId,
+    tooltipId,
+    fieldHelpId,
+    ariaDescribedBy,
+    ariaLabelledBy
+  } = (0, _useInputAccessibility.default)({
+    id,
+    error,
+    warning,
+    info,
+    label,
+    labelHelp,
+    fieldHelp
+  });
   (0, _react.useEffect)(() => {
     if (expandable) {
       expandTextarea();
@@ -146,10 +163,12 @@ const Textarea = ({
     "data-element": dataElement
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_formField.default, {
     fieldHelp: fieldHelp,
+    fieldHelpId: fieldHelpId,
     error: error,
     warning: warning,
     info: info,
     label: label,
+    labelId: labelId,
     disabled: disabled,
     id: id,
     labelInline: labelInline,
@@ -157,6 +176,7 @@ const Textarea = ({
     labelWidth: labelWidth,
     labelHelp: labelHelp,
     labelSpacing: labelSpacing,
+    tooltipId: tooltipId,
     isRequired: props.required,
     useValidationIcon: validationOnLabel,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint
@@ -169,9 +189,11 @@ const Textarea = ({
     warning: warning,
     info: info
   }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
+    "aria-invalid": !!error,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
     autoFocus: autoFocus,
     name: name,
-    "aria-invalid": !!error,
     ref: inputRef,
     maxLength: enforceCharacterLimit && characterLimit ? characterLimit : undefined,
     onChange: onChange,

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

@@ -29,6 +29,8 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
 
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
+
 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); }
@@ -42,7 +44,7 @@ const Textbox = ({
   disabled,
   inputIcon,
   leftChildren,
-  labelId,
+  labelId: externalLabelId,
   label,
   labelAlign,
   labelHelp,
@@ -90,12 +92,29 @@ const Textbox = ({
   ...props
 }) => {
   const [maxLength, characterCount] = (0, _useCharacterCount.default)(value, characterLimit, warnOverLimit, enforceCharacterLimit);
+  const {
+    labelId: internalLabelId,
+    tooltipId,
+    fieldHelpId,
+    ariaDescribedBy
+  } = (0, _useInputAccessibility.default)({
+    id,
+    error,
+    warning,
+    info,
+    label,
+    labelHelp,
+    fieldHelp
+  });
+  const labelId = externalLabelId || internalLabelId;
   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({
+    tooltipId: tooltipId,
     disabled: disabled,
     fieldHelp: fieldHelp,
+    fieldHelpId: fieldHelpId,
     error: error,
     warning: warning,
     info: info,
@@ -132,6 +151,8 @@ const Textbox = ({
   }, {
     align: align,
     "aria-invalid": !!error,
+    "aria-labelledby": labelId,
+    "aria-describedby": ariaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
@@ -160,7 +181,8 @@ const Textbox = ({
     readOnly: readOnly,
     size: size,
     useValidationIcon: !validationOnLabel,
-    warning: warning
+    warning: warning,
+    tooltipId: tooltipId
   }))), characterCount));
 };
 

package/lib/hooks/__internal__/useInputAccessibility/index.d.ts

@@ -0,0 +1,24 @@
+interface InputAccessibilityProperties {
+  labelId?: string;
+  tooltipId?: string;
+  fieldHelpId?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+}
+
+export default function useInputAccessibility(
+  /** Input id -  */
+  id: string,
+  /** Error validation message */
+  error?: string,
+  /** Warning validation message */
+  warning?: string,
+  /** Info validation message */
+  info?: string,
+  /** Label */
+  label?: string,
+  /** labelHelp message */
+  labelHelp?: string,
+  /** fieldHelp message */
+  fieldHelp?: string
+): void;

package/lib/hooks/__internal__/useInputAccessibility/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useInputAccessibility.default;
+  }
+});
+
+var _useInputAccessibility = _interopRequireDefault(require("./useInputAccessibility"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useInputAccessibility;
+
+function useInputAccessibility({
+  id,
+  error,
+  warning,
+  info,
+  label,
+  labelHelp,
+  fieldHelp
+}) {
+  const labelId = label ? `${id}-label` : undefined;
+  const tooltipId = [error, warning, info, labelHelp].filter(validation => typeof validation === "string").length ? `${id}-tooltip` : undefined;
+  const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
+  const ariaDescribedBy = [fieldHelpId, tooltipId].filter(Boolean).join(" ");
+  const ariaLabelledBy = labelId;
+  return {
+    labelId,
+    tooltipId,
+    fieldHelpId,
+    ariaDescribedBy,
+    ariaLabelledBy
+  };
+}