npm - @dbcdk/react-components - Versions diffs - 0.0.202 → 0.0.203 - Mend

@dbcdk/react-components 0.0.202 → 0.0.203

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 (19) hide show

package/dist/components/forms/checkbox/Checkbox.cjs CHANGED Viewed

@@ -7,6 +7,7 @@ var react = require('react');
 var Tooltip = require('../../../components/overlay/tooltip/Tooltip');
 var styles = require('./Checkbox.module.css');
 var InputContainer = require('../input-container/InputContainer');
+var messageIds = require('../input-container/messageIds');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,6 +28,7 @@ function Checkbox({
   containerLabel,
   error,
   helpText,
+  helpTextAddition,
   orientation = "horizontal",
   labelWidth = "160px",
   fullWidth = false,
@@ -67,6 +69,7 @@ function Checkbox({
             "aria-checked": isChecked,
             "aria-disabled": disabled || void 0,
             "aria-invalid": Boolean(error) || void 0,
+            "aria-describedby": noContainer ? void 0 : messageIds.getDescribedBy(controlId, { error, helpText }),
             onClick: toggle,
             className: [
               styles__default.default.checkbox,
@@ -94,6 +97,7 @@ function Checkbox({
       htmlFor: controlId,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       size,
       labelWidth,

package/dist/components/forms/checkbox/Checkbox.d.ts CHANGED Viewed

@@ -32,6 +32,7 @@ interface CheckboxProps {
     containerLabel?: string;
     error?: string;
     helpText?: string;
+    helpTextAddition?: ReactNode;
     orientation?: 'vertical' | 'horizontal';
     labelWidth?: string;
     fullWidth?: boolean;
@@ -42,5 +43,5 @@ interface CheckboxProps {
     tooltip?: ReactNode;
     tooltipPlacement?: TooltipPlacement;
 }
-export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, endAdornment, endAdornmentAriaHidden, labelAction, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, endAdornment, endAdornmentAriaHidden, labelAction, size, modified, containerLabel, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: CheckboxProps): JSX.Element;
 export {};

package/dist/components/forms/checkbox/Checkbox.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { useState, useId } from 'react';
 import { Tooltip } from '../../../components/overlay/tooltip/Tooltip';
 import styles from './Checkbox.module.css';
 import { InputContainer } from '../input-container/InputContainer';
+import { getDescribedBy } from '../input-container/messageIds';
 function Checkbox({
   checked: controlled,
@@ -21,6 +22,7 @@ function Checkbox({
   containerLabel,
   error,
   helpText,
+  helpTextAddition,
   orientation = "horizontal",
   labelWidth = "160px",
   fullWidth = false,
@@ -61,6 +63,7 @@ function Checkbox({
             "aria-checked": isChecked,
             "aria-disabled": disabled || void 0,
             "aria-invalid": Boolean(error) || void 0,
+            "aria-describedby": noContainer ? void 0 : getDescribedBy(controlId, { error, helpText }),
             onClick: toggle,
             className: [
               styles.checkbox,
@@ -88,6 +91,7 @@ function Checkbox({
       htmlFor: controlId,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       size,
       labelWidth,

package/dist/components/forms/form-select/FormSelect.cjs CHANGED Viewed

@@ -7,6 +7,7 @@ var React = require('react');
 var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
 var styles = require('./FormSelect.module.css');
 var InputContainer = require('../input-container/InputContainer');
+var messageIds = require('../input-container/messageIds');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -58,6 +59,7 @@ function FormSelect({
   labelAction,
   error,
   helpText,
+  helpTextAddition,
   orientation = "vertical",
   labelWidth = "160px",
   fullWidth = true,
@@ -83,7 +85,6 @@ function FormSelect({
 }) {
   const generatedId = React__namespace.useId();
   const controlId = id != null ? id : `select-${generatedId}`;
-  const describedById = `${controlId}-desc`;
   const selected = React__namespace.useMemo(
     () => findSelectedOption(options, selectedValue, datakey),
     [options, selectedValue, datakey]
@@ -94,12 +95,11 @@ function FormSelect({
     placement: tooltipPlacement,
     offset: 8
   });
-  const describedBy = (() => {
-    const ids = [];
-    if (error || helpText) ids.push(describedById);
-    if (tooltipEnabled) ids.push(tooltipId);
-    return ids.length ? ids.join(" ") : void 0;
-  })();
+  const describedBy = messageIds.getDescribedBy(
+    controlId,
+    { error, helpText },
+    tooltipEnabled ? tooltipId : void 0
+  );
   const nativeValue = React__namespace.useMemo(() => {
     if (selected && selected.value != null) return serializeValue(selected.value, datakey);
     return "";
@@ -116,7 +116,7 @@ function FormSelect({
     const opt = options.find((o) => serializeValue(o.value, datakey) === raw);
     if (opt) onChange(opt.value);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     InputContainer.InputContainer,
     {
       label,
@@ -125,67 +125,65 @@ function FormSelect({
       fullWidth,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       labelWidth,
       required,
       modified,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: [
-              styles__default.default.container,
-              fullWidth ? styles__default.default.fullWidth : "",
-              canClear ? styles__default.default.withButton : ""
-            ].filter(Boolean).join(" "),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.field, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "select",
-                  {
-                    ...tooltipEnabled ? triggerProps : {},
-                    id: controlId,
-                    name,
-                    className: [styles__default.default.input, styles__default.default[size], styles__default.default[variant]].filter(Boolean).join(" "),
-                    value: nativeValue,
-                    onChange: handleNativeChange,
-                    disabled,
-                    "aria-invalid": Boolean(error) || void 0,
-                    "aria-describedby": describedBy,
-                    "data-cy": dataCy != null ? dataCy : "formselect",
-                    "data-forminput": true,
-                    children: [
-                      includePlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder }),
-                      options.map((opt) => {
-                        const v = serializeValue(opt.value, datakey);
-                        return /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: opt.label }, v);
-                      })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 }) })
-              ] }),
-              canClear && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: [
+            styles__default.default.container,
+            fullWidth ? styles__default.default.fullWidth : "",
+            canClear ? styles__default.default.withButton : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.field, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "select",
                 {
-                  type: "button",
-                  className: styles__default.default.trailingButton,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onClear == null ? void 0 : onClear();
-                  },
-                  "aria-label": "Ryd valg",
-                  disabled: !showClear,
-                  "data-cy": dataCy ? `${dataCy}-clear` : "formselect-clear",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, "aria-hidden": "true" })
+                  ...tooltipEnabled ? triggerProps : {},
+                  id: controlId,
+                  name,
+                  className: [styles__default.default.input, styles__default.default[size], styles__default.default[variant]].filter(Boolean).join(" "),
+                  value: nativeValue,
+                  onChange: handleNativeChange,
+                  disabled,
+                  "aria-invalid": Boolean(error) || void 0,
+                  "aria-describedby": describedBy,
+                  "data-cy": dataCy != null ? dataCy : "formselect",
+                  "data-forminput": true,
+                  children: [
+                    includePlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder }),
+                    options.map((opt) => {
+                      const v = serializeValue(opt.value, datakey);
+                      return /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: opt.label }, v);
+                    })
+                  ]
                 }
-              )
-            ]
-          }
-        ),
-        (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
-      ]
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 }) })
+            ] }),
+            canClear && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: styles__default.default.trailingButton,
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onClear == null ? void 0 : onClear();
+                },
+                "aria-label": "Ryd valg",
+                disabled: !showClear,
+                "data-cy": dataCy ? `${dataCy}-clear` : "formselect-clear",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, "aria-hidden": "true" })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/components/forms/form-select/FormSelect.d.ts CHANGED Viewed

@@ -31,5 +31,5 @@ export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor
      */
     allowClearWhenRequired?: boolean;
 };
-export declare function FormSelect<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
+export declare function FormSelect<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/form-select/FormSelect.js CHANGED Viewed

@@ -1,10 +1,11 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronDown, X } from 'lucide-react';
 import * as React from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from './FormSelect.module.css';
 import { InputContainer } from '../input-container/InputContainer';
+import { getDescribedBy } from '../input-container/messageIds';
 function isEqualValue(a, b, datakey) {
   if (a === b) return true;
@@ -33,6 +34,7 @@ function FormSelect({
   labelAction,
   error,
   helpText,
+  helpTextAddition,
   orientation = "vertical",
   labelWidth = "160px",
   fullWidth = true,
@@ -58,7 +60,6 @@ function FormSelect({
 }) {
   const generatedId = React.useId();
   const controlId = id != null ? id : `select-${generatedId}`;
-  const describedById = `${controlId}-desc`;
   const selected = React.useMemo(
     () => findSelectedOption(options, selectedValue, datakey),
     [options, selectedValue, datakey]
@@ -69,12 +70,11 @@ function FormSelect({
     placement: tooltipPlacement,
     offset: 8
   });
-  const describedBy = (() => {
-    const ids = [];
-    if (error || helpText) ids.push(describedById);
-    if (tooltipEnabled) ids.push(tooltipId);
-    return ids.length ? ids.join(" ") : void 0;
-  })();
+  const describedBy = getDescribedBy(
+    controlId,
+    { error, helpText },
+    tooltipEnabled ? tooltipId : void 0
+  );
   const nativeValue = React.useMemo(() => {
     if (selected && selected.value != null) return serializeValue(selected.value, datakey);
     return "";
@@ -91,7 +91,7 @@ function FormSelect({
     const opt = options.find((o) => serializeValue(o.value, datakey) === raw);
     if (opt) onChange(opt.value);
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     InputContainer,
     {
       label,
@@ -100,67 +100,65 @@ function FormSelect({
       fullWidth,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       labelWidth,
       required,
       modified,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: [
-              styles.container,
-              fullWidth ? styles.fullWidth : "",
-              canClear ? styles.withButton : ""
-            ].filter(Boolean).join(" "),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
-                /* @__PURE__ */ jsxs(
-                  "select",
-                  {
-                    ...tooltipEnabled ? triggerProps : {},
-                    id: controlId,
-                    name,
-                    className: [styles.input, styles[size], styles[variant]].filter(Boolean).join(" "),
-                    value: nativeValue,
-                    onChange: handleNativeChange,
-                    disabled,
-                    "aria-invalid": Boolean(error) || void 0,
-                    "aria-describedby": describedBy,
-                    "data-cy": dataCy != null ? dataCy : "formselect",
-                    "data-forminput": true,
-                    children: [
-                      includePlaceholderOption && /* @__PURE__ */ jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder }),
-                      options.map((opt) => {
-                        const v = serializeValue(opt.value, datakey);
-                        return /* @__PURE__ */ jsx("option", { value: v, children: opt.label }, v);
-                      })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: styles.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) })
-              ] }),
-              canClear && /* @__PURE__ */ jsx(
-                "button",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: [
+            styles.container,
+            fullWidth ? styles.fullWidth : "",
+            canClear ? styles.withButton : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+              /* @__PURE__ */ jsxs(
+                "select",
                 {
-                  type: "button",
-                  className: styles.trailingButton,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onClear == null ? void 0 : onClear();
-                  },
-                  "aria-label": "Ryd valg",
-                  disabled: !showClear,
-                  "data-cy": dataCy ? `${dataCy}-clear` : "formselect-clear",
-                  children: /* @__PURE__ */ jsx(X, { size: 18, "aria-hidden": "true" })
+                  ...tooltipEnabled ? triggerProps : {},
+                  id: controlId,
+                  name,
+                  className: [styles.input, styles[size], styles[variant]].filter(Boolean).join(" "),
+                  value: nativeValue,
+                  onChange: handleNativeChange,
+                  disabled,
+                  "aria-invalid": Boolean(error) || void 0,
+                  "aria-describedby": describedBy,
+                  "data-cy": dataCy != null ? dataCy : "formselect",
+                  "data-forminput": true,
+                  children: [
+                    includePlaceholderOption && /* @__PURE__ */ jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder }),
+                    options.map((opt) => {
+                      const v = serializeValue(opt.value, datakey);
+                      return /* @__PURE__ */ jsx("option", { value: v, children: opt.label }, v);
+                    })
+                  ]
                 }
-              )
-            ]
-          }
-        ),
-        (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
-      ]
+              ),
+              /* @__PURE__ */ jsx("span", { className: styles.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) })
+            ] }),
+            canClear && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.trailingButton,
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onClear == null ? void 0 : onClear();
+                },
+                "aria-label": "Ryd valg",
+                disabled: !showClear,
+                "data-cy": dataCy ? `${dataCy}-clear` : "formselect-clear",
+                children: /* @__PURE__ */ jsx(X, { size: 18, "aria-hidden": "true" })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/components/forms/input/Input.cjs CHANGED Viewed

@@ -8,6 +8,7 @@ var ClearButton = require('../../../components/clear-button/ClearButton');
 var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
 var styles = require('../input/Input.module.css');
 var InputContainer = require('../input-container/InputContainer');
+var messageIds = require('../input-container/messageIds');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,6 +28,7 @@ const Input = react.forwardRef(function Input2({
   labelAction,
   error,
   helpText,
+  helpTextAddition,
   orientation = "vertical",
   labelWidth = "160px",
   fullWidth = false,
@@ -97,6 +99,7 @@ const Input = react.forwardRef(function Input2({
       fullWidth,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       labelWidth,
       required,
@@ -138,6 +141,11 @@ const Input = react.forwardRef(function Input2({
                     {
                       ...inputProps,
                       id: inputId,
+                      "aria-describedby": messageIds.getDescribedBy(
+                        inputId,
+                        { error, helpText },
+                        inputProps["aria-describedby"]
+                      ),
                       ref: mergeRefs(inputRef, ref),
                       className: [styles__default.default.input, inputSize ? styles__default.default[inputSize] : "", inputClassName != null ? inputClassName : ""].filter(Boolean).join(" ")
                     }

package/dist/components/forms/input/Input.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { ClearButton } from '../../../components/clear-button/ClearButton';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from '../input/Input.module.css';
 import { InputContainer } from '../input-container/InputContainer';
+import { getDescribedBy } from '../input-container/messageIds';
 function mergeRefs(...refs) {
   return (node) => {
@@ -21,6 +22,7 @@ const Input = forwardRef(function Input2({
   labelAction,
   error,
   helpText,
+  helpTextAddition,
   orientation = "vertical",
   labelWidth = "160px",
   fullWidth = false,
@@ -91,6 +93,7 @@ const Input = forwardRef(function Input2({
       fullWidth,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       labelWidth,
       required,
@@ -132,6 +135,11 @@ const Input = forwardRef(function Input2({
                     {
                       ...inputProps,
                       id: inputId,
+                      "aria-describedby": getDescribedBy(
+                        inputId,
+                        { error, helpText },
+                        inputProps["aria-describedby"]
+                      ),
                       ref: mergeRefs(inputRef, ref),
                       className: [styles.input, inputSize ? styles[inputSize] : "", inputClassName != null ? inputClassName : ""].filter(Boolean).join(" ")
                     }

package/dist/components/forms/input-container/InputContainer.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var styles = require('./InputContainer.module.css');
+var messageIds = require('./messageIds');
 var InlineStatus = require('../../inline-status/InlineStatus');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,10 +32,14 @@ function InputContainer({
     ] }),
     labelAction && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-input-container-label-action": "true", children: labelAction })
   ] });
-  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${error ? styles__default.default.errorText : styles__default.default.helpText} ${styles__default.default.messageRow}`, children: error ? /* @__PURE__ */ jsxRuntime.jsx(InlineStatus.InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText }),
-    helpTextAddition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helpTextAddition, children: helpTextAddition })
-  ] }) });
+  const messageIds$1 = htmlFor ? messageIds.getMessageIds(htmlFor) : void 0;
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xxs", children: [
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: messageIds$1 == null ? void 0 : messageIds$1.errorId, className: `${styles__default.default.errorText} ${styles__default.default.messageRow}`, children: /* @__PURE__ */ jsxRuntime.jsx(InlineStatus.InlineStatus, { severity: "error", disableIcon: true, children: error }) }),
+    (helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.helpText} ${styles__default.default.messageRow}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { id: messageIds$1 == null ? void 0 : messageIds$1.helpTextId, children: helpText }),
+      helpTextAddition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helpTextAddition, children: helpTextAddition })
+    ] })
+  ] });
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",

package/dist/components/forms/input-container/InputContainer.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from './InputContainer.module.css';
+import { getMessageIds } from './messageIds';
 import { InlineStatus } from '../../inline-status/InlineStatus';
 function InputContainer({
@@ -25,10 +26,14 @@ function InputContainer({
     ] }),
     labelAction && /* @__PURE__ */ jsx("span", { "data-input-container-label-action": "true", children: labelAction })
   ] });
-  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsx("div", { className: `${error ? styles.errorText : styles.helpText} ${styles.messageRow}`, children: error ? /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: helpText }),
-    helpTextAddition && /* @__PURE__ */ jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })
-  ] }) });
+  const messageIds = htmlFor ? getMessageIds(htmlFor) : void 0;
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xxs", children: [
+    error && /* @__PURE__ */ jsx("div", { id: messageIds == null ? void 0 : messageIds.errorId, className: `${styles.errorText} ${styles.messageRow}`, children: /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) }),
+    (helpText || helpTextAddition) && /* @__PURE__ */ jsxs("div", { className: `${styles.helpText} ${styles.messageRow}`, children: [
+      /* @__PURE__ */ jsx("span", { id: messageIds == null ? void 0 : messageIds.helpTextId, children: helpText }),
+      helpTextAddition && /* @__PURE__ */ jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })
+    ] })
+  ] });
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxs(
       "div",

package/dist/components/forms/input-container/messageIds.cjs ADDED Viewed

@@ -0,0 +1,15 @@
+'use strict';
+function getMessageIds(controlId) {
+  return { errorId: `${controlId}-error`, helpTextId: `${controlId}-help` };
+}
+function getDescribedBy(controlId, { error, helpText }, ...extraIds) {
+  const { errorId, helpTextId } = getMessageIds(controlId);
+  const ids = [error ? errorId : void 0, helpText ? helpTextId : void 0, ...extraIds].filter(
+    Boolean
+  );
+  return ids.length ? ids.join(" ") : void 0;
+}
+exports.getDescribedBy = getDescribedBy;
+exports.getMessageIds = getMessageIds;

package/dist/components/forms/input-container/messageIds.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/** Ids of the error and help text that InputContainer renders for a control with id `controlId`. */
+export declare function getMessageIds(controlId: string): {
+    errorId: string;
+    helpTextId: string;
+};
+/**
+ * aria-describedby value for a control inside InputContainer: the rendered error and help text,
+ * followed by any extra ids (e.g. a tooltip or the consumer's own aria-describedby).
+ */
+export declare function getDescribedBy(controlId: string, { error, helpText }: {
+    error?: unknown;
+    helpText?: unknown;
+}, ...extraIds: Array<string | undefined | null | false>): string | undefined;

package/dist/components/forms/input-container/messageIds.js ADDED Viewed

@@ -0,0 +1,12 @@
+function getMessageIds(controlId) {
+  return { errorId: `${controlId}-error`, helpTextId: `${controlId}-help` };
+}
+function getDescribedBy(controlId, { error, helpText }, ...extraIds) {
+  const { errorId, helpTextId } = getMessageIds(controlId);
+  const ids = [error ? errorId : void 0, helpText ? helpTextId : void 0, ...extraIds].filter(
+    Boolean
+  );
+  return ids.length ? ids.join(" ") : void 0;
+}
+export { getDescribedBy, getMessageIds };

package/dist/components/forms/select/Select.cjs CHANGED Viewed

@@ -10,6 +10,7 @@ var ClearButton = require('../../clear-button/ClearButton');
 var Menu = require('../../menu/Menu');
 var Popover = require('../../popover/Popover');
 var InputContainer = require('../input-container/InputContainer');
+var messageIds = require('../input-container/messageIds');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,6 +21,7 @@ function Select({
   labelAction,
   error,
   helpText,
+  helpTextAddition,
   orientation = "vertical",
   labelWidth = "160px",
   fullWidth = true,
@@ -43,7 +45,6 @@ function Select({
 }) {
   const generatedId = react.useId();
   const controlId = id != null ? id : `select-${generatedId}`;
-  const describedById = `${controlId}-desc`;
   const listboxId = `${controlId}-listbox`;
   const popoverRef = react.useRef(null);
   const triggerRef = react.useRef(null);
@@ -179,13 +180,12 @@ function Select({
     placement: tooltipPlacement,
     offset: 8
   });
-  const describedBy = (() => {
-    const ids = [];
-    if (error || helpText) ids.push(describedById);
-    if (tooltipEnabled) ids.push(tooltipId);
-    return ids.length ? ids.join(" ") : void 0;
-  })();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const describedBy = messageIds.getDescribedBy(
+    controlId,
+    { error, helpText },
+    tooltipEnabled ? tooltipId : void 0
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
     InputContainer.InputContainer,
     {
       label,
@@ -194,116 +194,114 @@ function Select({
       fullWidth,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       labelWidth,
       required,
       modified,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Popover.Popover,
-          {
-            ref: popoverRef,
-            anchorRef: triggerRef,
-            open,
-            fullWidth,
-            onOpenChange: (next) => {
-              setOpen(next);
-              if (next) resetActiveToSelected();
-            },
-            contentId: listboxId,
-            autoFocusContent: false,
-            returnFocus: true,
-            trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
-              Button.Button,
-              {
-                disabled,
-                ...tooltipEnabled ? triggerProps : {},
-                ref: (node) => {
-                  triggerRef.current = node;
-                  if (tooltipEnabled) triggerProps.ref(node);
-                },
-                id: controlId,
-                "data-cy": dataCy != null ? dataCy : "select-button",
-                onKeyDown: handleKeyDown,
-                fullWidth,
-                variant,
-                onClick: (e) => {
-                  resetActiveToSelected();
-                  toggle(e);
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Popover.Popover,
+        {
+          ref: popoverRef,
+          anchorRef: triggerRef,
+          open,
+          fullWidth,
+          onOpenChange: (next) => {
+            setOpen(next);
+            if (next) resetActiveToSelected();
+          },
+          contentId: listboxId,
+          autoFocusContent: false,
+          returnFocus: true,
+          trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              disabled,
+              ...tooltipEnabled ? triggerProps : {},
+              ref: (node) => {
+                triggerRef.current = node;
+                if (tooltipEnabled) triggerProps.ref(node);
+              },
+              id: controlId,
+              "data-cy": dataCy != null ? dataCy : "select-button",
+              onKeyDown: handleKeyDown,
+              fullWidth,
+              variant,
+              onClick: (e) => {
+                resetActiveToSelected();
+                toggle(e);
+              },
+              size,
+              style: minWidth != null ? { minWidth } : void 0,
+              type: "button",
+              "data-forminput": true,
+              "aria-haspopup": "listbox",
+              "aria-expanded": !!isOpen,
+              "aria-controls": listboxId,
+              "aria-invalid": Boolean(error) || void 0,
+              "aria-describedby": describedBy,
+              className: modified ? styles__default.default.triggerModified : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                  style: { width: "100%" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                      onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(
+                        ClearButton.ClearButton,
+                        {
+                          onClick: onClear,
+                          variant: variant === "header" ? "header" : "default",
+                          as: "span",
+                          revealOnHover: true
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
+                    ] })
+                  ]
+                }
+              )
+            }
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDownCapture: handleKeyDown, role: "listbox", className: styles__default.default.menu, children: [
+            menuHeader ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: menuHeader }) : null,
+            options.map((opt, index) => {
+              const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
+              const isActive = index === activeIndex;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                Menu.Menu.Item,
+                {
+                  active: isActive,
+                  selected: isSelected,
+                  itemRole: "option",
+                  className: isSelected ? styles__default.default.selectedOption : void 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      ref: (el) => {
+                        optionRefs.current[index] = el;
+                      },
+                      type: "button",
+                      tabIndex: isActive ? 0 : -1,
+                      onClick: () => {
+                        var _a;
+                        onChange(opt.value);
+                        (_a = popoverRef.current) == null ? void 0 : _a.close();
+                      },
+                      onFocus: () => setActiveIndex(index),
+                      style: { display: "flex", alignItems: "center", width: "100%" },
+                      children: opt.label
+                    }
+                  )
                 },
-                size,
-                style: minWidth != null ? { minWidth } : void 0,
-                type: "button",
-                "data-forminput": true,
-                "aria-haspopup": "listbox",
-                "aria-expanded": !!isOpen,
-                "aria-controls": listboxId,
-                "aria-invalid": Boolean(error) || void 0,
-                "aria-describedby": describedBy,
-                className: modified ? styles__default.default.triggerModified : void 0,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
-                    style: { width: "100%" },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
-                        onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(
-                          ClearButton.ClearButton,
-                          {
-                            onClick: onClear,
-                            variant: variant === "header" ? "header" : "default",
-                            as: "span",
-                            revealOnHover: true
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
-                      ] })
-                    ]
-                  }
-                )
-              }
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDownCapture: handleKeyDown, role: "listbox", className: styles__default.default.menu, children: [
-              menuHeader ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: menuHeader }) : null,
-              options.map((opt, index) => {
-                const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
-                const isActive = index === activeIndex;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  Menu.Menu.Item,
-                  {
-                    active: isActive,
-                    selected: isSelected,
-                    itemRole: "option",
-                    className: isSelected ? styles__default.default.selectedOption : void 0,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        ref: (el) => {
-                          optionRefs.current[index] = el;
-                        },
-                        type: "button",
-                        tabIndex: isActive ? 0 : -1,
-                        onClick: () => {
-                          var _a;
-                          onChange(opt.value);
-                          (_a = popoverRef.current) == null ? void 0 : _a.close();
-                        },
-                        onFocus: () => setActiveIndex(index),
-                        style: { display: "flex", alignItems: "center", width: "100%" },
-                        children: opt.label
-                      }
-                    )
-                  },
-                  String(opt.value)
-                );
-              })
-            ] })
-          }
-        ),
-        (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
-      ]
+                String(opt.value)
+              );
+            })
+          ] })
+        }
+      )
     }
   );
 }

package/dist/components/forms/select/Select.d.ts CHANGED Viewed

@@ -20,5 +20,5 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/select/Select.js CHANGED Viewed

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId, useRef, useMemo, useState, useEffect } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from './Select.module.css';
@@ -8,12 +8,14 @@ import { ClearButton } from '../../clear-button/ClearButton';
 import { Menu } from '../../menu/Menu';
 import { Popover } from '../../popover/Popover';
 import { InputContainer } from '../input-container/InputContainer';
+import { getDescribedBy } from '../input-container/messageIds';
 function Select({
   label,
   labelAction,
   error,
   helpText,
+  helpTextAddition,
   orientation = "vertical",
   labelWidth = "160px",
   fullWidth = true,
@@ -37,7 +39,6 @@ function Select({
 }) {
   const generatedId = useId();
   const controlId = id != null ? id : `select-${generatedId}`;
-  const describedById = `${controlId}-desc`;
   const listboxId = `${controlId}-listbox`;
   const popoverRef = useRef(null);
   const triggerRef = useRef(null);
@@ -173,13 +174,12 @@ function Select({
     placement: tooltipPlacement,
     offset: 8
   });
-  const describedBy = (() => {
-    const ids = [];
-    if (error || helpText) ids.push(describedById);
-    if (tooltipEnabled) ids.push(tooltipId);
-    return ids.length ? ids.join(" ") : void 0;
-  })();
-  return /* @__PURE__ */ jsxs(
+  const describedBy = getDescribedBy(
+    controlId,
+    { error, helpText },
+    tooltipEnabled ? tooltipId : void 0
+  );
+  return /* @__PURE__ */ jsx(
     InputContainer,
     {
       label,
@@ -188,116 +188,114 @@ function Select({
       fullWidth,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       labelWidth,
       required,
       modified,
-      children: [
-        /* @__PURE__ */ jsx(
-          Popover,
-          {
-            ref: popoverRef,
-            anchorRef: triggerRef,
-            open,
-            fullWidth,
-            onOpenChange: (next) => {
-              setOpen(next);
-              if (next) resetActiveToSelected();
-            },
-            contentId: listboxId,
-            autoFocusContent: false,
-            returnFocus: true,
-            trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsx(
-              Button,
-              {
-                disabled,
-                ...tooltipEnabled ? triggerProps : {},
-                ref: (node) => {
-                  triggerRef.current = node;
-                  if (tooltipEnabled) triggerProps.ref(node);
-                },
-                id: controlId,
-                "data-cy": dataCy != null ? dataCy : "select-button",
-                onKeyDown: handleKeyDown,
-                fullWidth,
-                variant,
-                onClick: (e) => {
-                  resetActiveToSelected();
-                  toggle(e);
+      children: /* @__PURE__ */ jsx(
+        Popover,
+        {
+          ref: popoverRef,
+          anchorRef: triggerRef,
+          open,
+          fullWidth,
+          onOpenChange: (next) => {
+            setOpen(next);
+            if (next) resetActiveToSelected();
+          },
+          contentId: listboxId,
+          autoFocusContent: false,
+          returnFocus: true,
+          trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled,
+              ...tooltipEnabled ? triggerProps : {},
+              ref: (node) => {
+                triggerRef.current = node;
+                if (tooltipEnabled) triggerProps.ref(node);
+              },
+              id: controlId,
+              "data-cy": dataCy != null ? dataCy : "select-button",
+              onKeyDown: handleKeyDown,
+              fullWidth,
+              variant,
+              onClick: (e) => {
+                resetActiveToSelected();
+                toggle(e);
+              },
+              size,
+              style: minWidth != null ? { minWidth } : void 0,
+              type: "button",
+              "data-forminput": true,
+              "aria-haspopup": "listbox",
+              "aria-expanded": !!isOpen,
+              "aria-controls": listboxId,
+              "aria-invalid": Boolean(error) || void 0,
+              "aria-describedby": describedBy,
+              className: modified ? styles.triggerModified : void 0,
+              children: /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                  style: { width: "100%" },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
+                    /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                      onClear && selected && /* @__PURE__ */ jsx(
+                        ClearButton,
+                        {
+                          onClick: onClear,
+                          variant: variant === "header" ? "header" : "default",
+                          as: "span",
+                          revealOnHover: true
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
+                    ] })
+                  ]
+                }
+              )
+            }
+          ),
+          children: /* @__PURE__ */ jsxs(Menu, { onKeyDownCapture: handleKeyDown, role: "listbox", className: styles.menu, children: [
+            menuHeader ? /* @__PURE__ */ jsx(Menu.Header, { children: menuHeader }) : null,
+            options.map((opt, index) => {
+              const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
+              const isActive = index === activeIndex;
+              return /* @__PURE__ */ jsx(
+                Menu.Item,
+                {
+                  active: isActive,
+                  selected: isSelected,
+                  itemRole: "option",
+                  className: isSelected ? styles.selectedOption : void 0,
+                  children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      ref: (el) => {
+                        optionRefs.current[index] = el;
+                      },
+                      type: "button",
+                      tabIndex: isActive ? 0 : -1,
+                      onClick: () => {
+                        var _a;
+                        onChange(opt.value);
+                        (_a = popoverRef.current) == null ? void 0 : _a.close();
+                      },
+                      onFocus: () => setActiveIndex(index),
+                      style: { display: "flex", alignItems: "center", width: "100%" },
+                      children: opt.label
+                    }
+                  )
                 },
-                size,
-                style: minWidth != null ? { minWidth } : void 0,
-                type: "button",
-                "data-forminput": true,
-                "aria-haspopup": "listbox",
-                "aria-expanded": !!isOpen,
-                "aria-controls": listboxId,
-                "aria-invalid": Boolean(error) || void 0,
-                "aria-describedby": describedBy,
-                className: modified ? styles.triggerModified : void 0,
-                children: /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
-                    style: { width: "100%" },
-                    children: [
-                      /* @__PURE__ */ jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
-                      /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
-                        onClear && selected && /* @__PURE__ */ jsx(
-                          ClearButton,
-                          {
-                            onClick: onClear,
-                            variant: variant === "header" ? "header" : "default",
-                            as: "span",
-                            revealOnHover: true
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
-                      ] })
-                    ]
-                  }
-                )
-              }
-            ),
-            children: /* @__PURE__ */ jsxs(Menu, { onKeyDownCapture: handleKeyDown, role: "listbox", className: styles.menu, children: [
-              menuHeader ? /* @__PURE__ */ jsx(Menu.Header, { children: menuHeader }) : null,
-              options.map((opt, index) => {
-                const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
-                const isActive = index === activeIndex;
-                return /* @__PURE__ */ jsx(
-                  Menu.Item,
-                  {
-                    active: isActive,
-                    selected: isSelected,
-                    itemRole: "option",
-                    className: isSelected ? styles.selectedOption : void 0,
-                    children: /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        ref: (el) => {
-                          optionRefs.current[index] = el;
-                        },
-                        type: "button",
-                        tabIndex: isActive ? 0 : -1,
-                        onClick: () => {
-                          var _a;
-                          onChange(opt.value);
-                          (_a = popoverRef.current) == null ? void 0 : _a.close();
-                        },
-                        onFocus: () => setActiveIndex(index),
-                        style: { display: "flex", alignItems: "center", width: "100%" },
-                        children: opt.label
-                      }
-                    )
-                  },
-                  String(opt.value)
-                );
-              })
-            ] })
-          }
-        ),
-        (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
-      ]
+                String(opt.value)
+              );
+            })
+          ] })
+        }
+      )
     }
   );
 }

package/dist/components/forms/text-area/Textarea.cjs CHANGED Viewed

@@ -6,6 +6,7 @@ var react = require('react');
 var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
 var styles = require('./Textarea.module.css');
 var InputContainer = require('../input-container/InputContainer');
+var messageIds = require('../input-container/messageIds');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -77,10 +78,11 @@ const Textarea = function Textarea2({
         value,
         onChange: onInput,
         disabled,
-        "aria-invalid": Boolean(error) || void 0
+        "aria-invalid": Boolean(error) || void 0,
+        "aria-describedby": messageIds.getDescribedBy(textareaId, { error, helpText }, rest["aria-describedby"])
       }
     ),
-    [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]
+    [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error, helpText]
   );
   const tooltipEnabled = Boolean(tooltip) && (showTooltip != null ? showTooltip : true);
   const { triggerProps } = useTooltipTrigger.useTooltipTrigger({

package/dist/components/forms/text-area/Textarea.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { useId, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from './Textarea.module.css';
 import { InputContainer } from '../input-container/InputContainer';
+import { getDescribedBy } from '../input-container/messageIds';
 const Textarea = function Textarea2({
   value,
@@ -71,10 +72,11 @@ const Textarea = function Textarea2({
         value,
         onChange: onInput,
         disabled,
-        "aria-invalid": Boolean(error) || void 0
+        "aria-invalid": Boolean(error) || void 0,
+        "aria-describedby": getDescribedBy(textareaId, { error, helpText }, rest["aria-describedby"])
       }
     ),
-    [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]
+    [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error, helpText]
   );
   const tooltipEnabled = Boolean(tooltip) && (showTooltip != null ? showTooltip : true);
   const { triggerProps } = useTooltipTrigger({

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.202",
+  "version": "0.0.203",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",