From 03c129d0b3272eca16c4c48133c2580a288feced Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Tue, 11 Jun 2024 17:56:00 +0200
Subject: [PATCH] Fix(web-twig): Make ValidationText and HelperText ID optional
 #DS-1336

Set aria-describedby to form elements when helperText
or validationText set.
---
 .../components/Checkbox/Checkbox.twig         | 20 ++++++++++------
 .../checkboxDefault.twig.snap.html            |  6 +++--
 .../checkboxDefaultPure.twig.snap.html        |  3 +--
 .../__snapshots__/checkboxItem.twig.snap.html |  2 +-
 .../components/Field/HelperText.twig          |  2 +-
 .../components/Field/ValidationText.twig      |  2 +-
 .../__tests__/__fixtures__/helperText.twig    |  3 +--
 .../__fixtures__/validationText.twig          |  5 +---
 .../__snapshots__/helperText.twig.snap.html   |  2 +-
 .../validationText.twig.snap.html             |  4 ++--
 .../components/FieldGroup/FieldGroup.twig     |  6 ++---
 .../__snapshots__/fieldGroup.twig.snap.html   | 12 +++++-----
 .../FileUploader/FileUploaderInput.twig       | 20 ++++++++++------
 .../fileUploaderInput.twig.snap.html          | 14 +++++------
 .../src/Resources/components/Item/Item.twig   | 10 ++++----
 .../src/Resources/components/Radio/Radio.twig | 18 ++++++++------
 .../Resources/components/Select/Select.twig   | 14 +++++++----
 .../selectHelperText.twig.snap.html           |  4 ++--
 .../selectValidationState.twig.snap.html      | 12 +++++-----
 .../textAreaDefault.twig.snap.html            |  4 ++--
 .../textAreaWithAutoResize.twig.snap.html     |  4 ++--
 .../textAreaWithHelperText.twig.snap.html     |  4 ++--
 ...extAreaWithMultilineMessage.twig.snap.html |  4 ++--
 .../passwordFieldDefault.twig.snap.html       |  4 ++--
 .../textFieldDefault.twig.snap.html           |  4 ++--
 .../textFieldDefaultPure.twig.snap.html       |  4 ++--
 .../textFieldWithHelperText.twig.snap.html    |  4 ++--
 ...xtFieldWithMultilineMessage.twig.snap.html |  4 ++--
 .../textFieldWithUnsafe.twig.snap.html        |  6 ++---
 .../TextFieldBase/TextFieldBase.twig          | 24 +++++++++++++------
 .../textFieldBaseDefault.twig.snap.html       |  4 ++--
 .../textFieldBaseMultiline.twig.snap.html     |  4 ++--
 32 files changed, 131 insertions(+), 102 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
index 15b7c12aaa..d4874283b9 100644
--- a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
+++ b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
@@ -30,19 +30,22 @@
 {%- set _helperTextClassName = _spiritClassPrefix ~ 'Checkbox__helperText' -%}
 {%- set _validationTextClassName = _spiritClassPrefix ~ 'Checkbox__validationText' -%}
 
-{# Attributes #}
-{%- set _checkedAttr = _isChecked ? 'checked' : null -%}
-{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
-{%- set _nameAttr = _name ? 'name="' ~ _name | escape('html_attr') ~ '"' : null -%}
-{%- set _requiredAttr = _isRequired ? 'required' : null -%}
-{%- set _valueAttr = _value ? 'value=' ~ _value : null -%}
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
+{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
 {%- set _labelClassName = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 {%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
+{%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}
+
+{# Attributes #}
+{%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
+{%- set _checkedAttr = _isChecked ? 'checked' : null -%}
+{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
+{%- set _nameAttr = _name ? 'name="' ~ _name | escape('html_attr') ~ '"' : null -%}
+{%- set _requiredAttr = _isRequired ? 'required' : null -%}
+{%- set _valueAttr = _value ? 'value=' ~ _value : null -%}
 
 <label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <input
@@ -55,6 +58,7 @@
         {{ _nameAttr | raw }}
         {{ _requiredAttr }}
         {{ _valueAttr }} {# Intentionally without `raw` to prevent XSS. #}
+        {{ _ariaDescribedByAttr | raw }}
     />
     <span class="{{ _textClassName }}">
         <span {{ classProp(_labelClassName) }}>
@@ -68,11 +72,13 @@
             className="{{ _helperTextClassName }}"
             elementType="span"
             helperText="{{ _helperText }}"
+            id="{{ _helperTextId }}"
             UNSAFE_helperText="{{ _unsafeHelperText }}"
         />
         <ValidationText
             className="{{ _validationTextClassName }}"
             elementType="span"
+            id="{{ _validationTextId }}"
             validationState="{{ _validationState }}"
             validationText="{{ _validationText }}"
             UNSAFE_validationText="{{ _unsafeValidationText }}"
diff --git a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
index 8db82384da..ff78e7c0d9 100644
--- a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
@@ -12,10 +12,12 @@
     <!-- Render checked -->
      <label for="example-id-checked" class="Checkbox"><input type="checkbox" id="example-id-checked" class="Checkbox__input" checked> <span class="Checkbox__text"><span class="Checkbox__label">Example
     label</span></span></label> <!-- Render with helper text -->
-     <label for="example-id-helper" class="Checkbox"><input type="checkbox" id="example-id-helper" class="Checkbox__input"> <span class="Checkbox__text"><span class="Checkbox__label">Example label</span> <span class="Checkbox__helperText">Example helper text</span></span></label> <!-- Render with hidden label -->
+     <label for="example-id-helper" class="Checkbox"><input type="checkbox" id="example-id-helper" class="Checkbox__input" aria-describedby="example-id-helper-helper-text"> <span class="Checkbox__text"><span class="Checkbox__label">Example label</span> <span class="Checkbox__helperText" id="example-id-helper-helper-text">Example helper text</span></span></label> <!-- Render with hidden label -->
      <label for="example-id-hidden" class="Checkbox"><input type="checkbox" id="example-id-hidden" class="Checkbox__input"> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden">Example
     label</span></span></label> <!-- Render with all props -->
-     <label for="example-id-all" class="Checkbox Checkbox--disabled Checkbox--item Checkbox--danger"><input data-validate="true" type="checkbox" id="example-id-all" class="Checkbox__input" checked disabled name="example-name" required="" value=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden Checkbox__label--required">UNSAFE label</span> <span class="Checkbox__helperText">UNSAFE helper text</span> <span class="Checkbox__validationText">Example validation
+     <label for="example-id-all" class="Checkbox Checkbox--disabled Checkbox--item Checkbox--danger"><input data-validate="true" type="checkbox" id="example-id-all" class="Checkbox__input" checked disabled name="example-name" required="" value="" aria-describedby="example-id-all-helper-text example-id-all-validation-text"> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden Checkbox__label--required">UNSAFE
+    label</span> <span class="Checkbox__helperText" id="example-id-all-helper-text">UNSAFE helper text</span>
+    <span class="Checkbox__validationText" id="example-id-all-validation-text">Example validation
     text</span></span></label>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefaultPure.twig.snap.html b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefaultPure.twig.snap.html
index 07555e2aa6..7ba62e6a4e 100644
--- a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefaultPure.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefaultPure.twig.snap.html
@@ -5,7 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="Checkbox Checkbox--danger"><input type="checkbox" id="example" class="Checkbox__input" name="example" required=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--required">some label</span> <span class="Checkbox__validationText">validation
-    failed</span></span></label>
+    <label for="example" class="Checkbox Checkbox--danger"><input type="checkbox" id="example" class="Checkbox__input" name="example" required="" aria-describedby="example-validation-text"> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--required">some label</span> <span class="Checkbox__validationText" id="example-validation-text">validation failed</span></span></label>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxItem.twig.snap.html b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxItem.twig.snap.html
index a1b8bd05dc..e7731ac76a 100644
--- a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxItem.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxItem.twig.snap.html
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="Checkbox Checkbox--item"><input type="checkbox" id="example" class="Checkbox__input" name="example"> <span class="Checkbox__text"><span class="Checkbox__label">item</span> <span class="Checkbox__helperText">helperText</span></span></label>
+    <label for="example" class="Checkbox Checkbox--item"><input type="checkbox" id="example" class="Checkbox__input" name="example" aria-describedby="example-helper-text"> <span class="Checkbox__text"><span class="Checkbox__label">item</span> <span class="Checkbox__helperText" id="example-helper-text">helperText</span></span></label>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Field/HelperText.twig b/packages/web-twig/src/Resources/components/Field/HelperText.twig
index 80e1dee275..97973abc3c 100644
--- a/packages/web-twig/src/Resources/components/Field/HelperText.twig
+++ b/packages/web-twig/src/Resources/components/Field/HelperText.twig
@@ -3,7 +3,7 @@
 {%- set _className = props.className -%}
 {%- set _elementType = props.elementType | default('div') -%}
 {%- set _helperText = props.helperText | default(null) -%}
-{%- set _id = props.id -%}
+{%- set _id = props.id | default(null) -%}
 {%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%}
 
 {# Attributes #}
diff --git a/packages/web-twig/src/Resources/components/Field/ValidationText.twig b/packages/web-twig/src/Resources/components/Field/ValidationText.twig
index 5c803711d7..357d9f1dfd 100644
--- a/packages/web-twig/src/Resources/components/Field/ValidationText.twig
+++ b/packages/web-twig/src/Resources/components/Field/ValidationText.twig
@@ -2,7 +2,7 @@
 {%- set props = props | default([]) -%}
 {%- set _className = props.className -%}
 {%- set _elementType = props.elementType | default('div') -%}
-{%- set _id = props.id -%}
+{%- set _id = props.id | default(null) -%}
 {%- set _unsafeValidationText = props.UNSAFE_validationText | default(null) -%}
 {%- set _validationState = props.validationState | default(null) -%}
 {%- set _validationText = props.validationText | default(null) -%}
diff --git a/packages/web-twig/src/Resources/components/Field/__tests__/__fixtures__/helperText.twig b/packages/web-twig/src/Resources/components/Field/__tests__/__fixtures__/helperText.twig
index 4cf339c11a..e063fa9aac 100644
--- a/packages/web-twig/src/Resources/components/Field/__tests__/__fixtures__/helperText.twig
+++ b/packages/web-twig/src/Resources/components/Field/__tests__/__fixtures__/helperText.twig
@@ -1,11 +1,10 @@
 <!-- DO NOT render when there is nothing to display -->
-<HelperText className="myClass" id="helper-text-no-helper" />
+<HelperText className="myClass" />
 
 <!-- Render with plain helper text -->
 <HelperText
     className="myClass"
     helperText="Helper text"
-    id="helper-text-plain"
 />
 
 <!-- Render with all props -->
diff --git a/packages/web-twig/src/Resources/components/Field/__tests__/__fixtures__/validationText.twig b/packages/web-twig/src/Resources/components/Field/__tests__/__fixtures__/validationText.twig
index 2f98b50d03..2f0f142959 100644
--- a/packages/web-twig/src/Resources/components/Field/__tests__/__fixtures__/validationText.twig
+++ b/packages/web-twig/src/Resources/components/Field/__tests__/__fixtures__/validationText.twig
@@ -1,17 +1,15 @@
 <!-- DO NOT render when there is nothing to display -->
-<ValidationText className="myClass" id="validation-text-no-validation" />
+<ValidationText className="myClass" />
 
 <!-- DO NOT render when validationState is not set -->
 <ValidationText
     className="myClass"
-    id="validation-text-no-validation-state"
     validationText="Validation text"
 />
 
 <!-- Render with plain validation text -->
 <ValidationText
     className="myClass"
-    id="validation-text-plain"
     validationState="success"
     validationText="Validation text"
 />
@@ -19,7 +17,6 @@
 <!-- Render with iterable validation text -->
 <ValidationText
     className="myClass"
-    id="validation-text-iterable"
     validationState="success"
     validationText="{{ ['Validation text 1', 'Validation text 2'] }}"
 />
diff --git a/packages/web-twig/src/Resources/components/Field/__tests__/__snapshots__/helperText.twig.snap.html b/packages/web-twig/src/Resources/components/Field/__tests__/__snapshots__/helperText.twig.snap.html
index d85ff90caf..aa8a08494c 100644
--- a/packages/web-twig/src/Resources/components/Field/__tests__/__snapshots__/helperText.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Field/__tests__/__snapshots__/helperText.twig.snap.html
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div class="myClass" id="helper-text-plain">
+    <div class="myClass">
       Helper text
     </div>
     <!-- Render with all props -->
diff --git a/packages/web-twig/src/Resources/components/Field/__tests__/__snapshots__/validationText.twig.snap.html b/packages/web-twig/src/Resources/components/Field/__tests__/__snapshots__/validationText.twig.snap.html
index 46c836a7c5..b3a97c73f0 100644
--- a/packages/web-twig/src/Resources/components/Field/__tests__/__snapshots__/validationText.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Field/__tests__/__snapshots__/validationText.twig.snap.html
@@ -5,12 +5,12 @@
     </title>
   </head>
   <body>
-    <div class="myClass" id="validation-text-plain">
+    <div class="myClass">
       Validation text
     </div>
     <!-- Render with iterable validation text -->
 
-    <ul class="myClass" id="validation-text-iterable">
+    <ul class="myClass">
       <li>Validation text 1
       </li>
 
diff --git a/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig b/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig
index bd885c4083..88f4d69248 100644
--- a/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig
+++ b/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig
@@ -27,11 +27,11 @@
 {%- set _styleProps = useStyleProps(props) -%} {# Must be (anywhere) before _rootClassNames #}
 {%- set _allowedAttributes = [ 'form', 'name' ] -%}
 {%- set _ariaDescribedByIds = [] -%}
-{%- set _helperTextId = _id ~ '__helperText' -%}
+{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
 {%- set _labelClassNames = [ _labelClassName, _labelRequiredClassName ] -%}
 {%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['aria-describedby']) -%}
 {%- set _rootClassNames = [ _rootClassName, _rootFluidClassName, _rootValidationStateClassName, _styleProps.className ] -%}
-{%- set _validationTextId = _id ~ '__validationText' -%}
+{%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}
 {%- set _labelRendered -%}
     {%- if _label -%}
         {{ _label }}
@@ -69,8 +69,8 @@
     </div>
     <HelperText
         className="{{ _helperTextClassName }}"
-        id="{{ _helperTextId }}"
         helperText="{{ _helperText }}"
+        id="{{ _helperTextId }}"
         UNSAFE_helperText="{{ _unsafeHelperText }}"
     />
     <ValidationText
diff --git a/packages/web-twig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html b/packages/web-twig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html
index 1826e4dcc6..afb2af3f85 100644
--- a/packages/web-twig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html
@@ -74,7 +74,7 @@
     </fieldset>
     <!-- Render with UNSAFE props -->
 
-    <fieldset id="fieldGroupWithUnsafeProps" class="FieldGroup FieldGroup--danger" aria-describedby="fieldGroupWithUnsafeProps__helperText fieldGroupWithUnsafeProps__validationText">
+    <fieldset id="fieldGroupWithUnsafeProps" class="FieldGroup FieldGroup--danger" aria-describedby="fieldGroupWithUnsafeProps-helper-text fieldGroupWithUnsafeProps-validation-text">
       <legend class="accessibility-hidden"><span>UNSAFE label text</span></legend>
       <div class="FieldGroup__label" aria-hidden="true">
         <span>UNSAFE label text</span>
@@ -94,17 +94,17 @@
         </div>
       </div>
 
-      <div class="FieldGroup__helperText" id="fieldGroupWithUnsafeProps__helperText">
+      <div class="FieldGroup__helperText" id="fieldGroupWithUnsafeProps-helper-text">
         <span>UNSAFE helper text</span>
       </div>
 
-      <div class="FieldGroup__validationText" id="fieldGroupWithUnsafeProps__validationText">
+      <div class="FieldGroup__validationText" id="fieldGroupWithUnsafeProps-validation-text">
         <span>UNSAFE validation text</span>
       </div>
     </fieldset>
     <!-- Render with all props -->
 
-    <fieldset id="fieldGroupValidationSuccess" class="FieldGroup FieldGroup--fluid FieldGroup--success" aria-describedby="fieldGroupValidationSuccess__helperText fieldGroupValidationSuccess__validationText" disabled>
+    <fieldset id="fieldGroupValidationSuccess" class="FieldGroup FieldGroup--fluid FieldGroup--success" aria-describedby="fieldGroupValidationSuccess-helper-text fieldGroupValidationSuccess-validation-text" disabled>
       <legend class="accessibility-hidden">Label</legend>
       <div class="FieldGroup__fields">
         <div>
@@ -120,11 +120,11 @@
         </div>
       </div>
 
-      <div class="FieldGroup__helperText" id="fieldGroupValidationSuccess__helperText">
+      <div class="FieldGroup__helperText" id="fieldGroupValidationSuccess-helper-text">
         <span>UNSAFE helper text</span>
       </div>
 
-      <div class="FieldGroup__validationText" id="fieldGroupValidationSuccess__validationText">
+      <div class="FieldGroup__validationText" id="fieldGroupValidationSuccess-validation-text">
         <span>UNSAFE validation text</span>
       </div>
     </fieldset>
diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig
index cf523da78c..fa5c48a410 100644
--- a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig
+++ b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig
@@ -36,19 +36,22 @@
 {%- set _linkUnderlinedClassName = _spiritClassPrefix ~ 'link-underlined' -%}
 {%- set _validationTextClassName = _spiritClassPrefix ~ 'FileUploaderInput__validationText' -%}
 
-{# Attributes #}
-{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
-{%- set _nameAttr = _name ? 'name="' ~ _name | escape('html_attr') ~ '"' : null -%}
-{%- set _dataMaxFileSizeAttr = _maxFileSize ? 'data-spirit-max-file-size=' ~ _maxFileSize : null -%}
-{%- set _dataMaxUploadedFilesAttr = _maxUploadedFiles ? 'data-spirit-file-queue-limit=' ~ _maxUploadedFiles : null -%}
-{%- set _dataQueueLimitBehaviorAttr = _queueLimitBehavior ? 'data-spirit-queue-limit-behavior=' ~ _queueLimitBehavior : null -%}
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _allowedAttributes = [ 'accept', 'multiple' ] -%}
+{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
 {%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
 {%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-element', 'id']) -%}
 {%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootValidationStateClassName, _styleProps.className ] -%}
+{%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}
+
+{# Attributes #}
+{%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
+{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
+{%- set _nameAttr = _name ? 'name="' ~ _name | escape('html_attr') ~ '"' : null -%}
+{%- set _dataMaxFileSizeAttr = _maxFileSize ? 'data-spirit-max-file-size=' ~ _maxFileSize : null -%}
+{%- set _dataMaxUploadedFilesAttr = _maxUploadedFiles ? 'data-spirit-file-queue-limit=' ~ _maxUploadedFiles : null -%}
+{%- set _dataQueueLimitBehaviorAttr = _queueLimitBehavior ? 'data-spirit-queue-limit-behavior=' ~ _queueLimitBehavior : null -%}
 
 <div
     {{ mainProps(_mainPropsWithoutReservedAttributes) }}
@@ -74,6 +77,7 @@
         data-spirit-element="input"
         {{ _nameAttr | raw }}
         {{ _disabledAttr }}
+        {{ _ariaDescribedByAttr | raw }}
     />
     <div class="{{ _dropzoneClassName }}" data-spirit-element="dropZone">
         <Icon name="{{ _iconName }}" isReusable={ false } />
@@ -88,11 +92,13 @@
         <HelperText
             className="{{ _helperTextClassName }}"
             helperText="{{ _helperText }}"
+            id="{{ _helperTextId }}"
             UNSAFE_helperText="{{ _unsafeHelperText }}"
         />
     </div>
     <ValidationText
         className="{{ _validationTextClassName }}"
+        id="{{ _validationTextId }}"
         validationState="{{ _validationState }}"
         validationText="{{ _validationText }}"
         UNSAFE_validationText="{{ _unsafeValidationText }}"
diff --git a/packages/web-twig/src/Resources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html b/packages/web-twig/src/Resources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html
index 89b4b24c8a..1e2dd7854c 100644
--- a/packages/web-twig/src/Resources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html
@@ -30,7 +30,7 @@
     <!-- Render in danger state -->
 
     <div class="FileUploaderInput FileUploaderInput--danger" data-spirit-element="wrapper">
-      <label for="example-input-danger" class="FileUploaderInput__label">Label</label> <input type="file" id="example-input-danger" class="FileUploaderInput__input" data-spirit-element="input">
+      <label for="example-input-danger" class="FileUploaderInput__label">Label</label> <input type="file" id="example-input-danger" class="FileUploaderInput__input" data-spirit-element="input" aria-describedby="example-input-danger-validation-text">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M12.3752 3.0625C12.2585 3.02083 12.1335 3 12.0002 3C11.8669 3 11.7419 3.02083 11.6252 3.0625C11.5085 3.10417 11.4002 3.175 11.3002 3.275L6.7002 7.875C6.51686 8.05833 6.4252 8.29167 6.4252 8.575C6.4252 8.85833 6.51686 9.09167 6.7002 9.275C6.88353 9.45833 7.12103 9.55417 7.4127 9.5625C7.70436 9.57083 7.94186 9.48333 8.1252 9.3L11.0002 6.425L11.0002 15.575C11.0002 15.8583 11.096 16.0958 11.2877 16.2875C11.4794 16.4792 11.7169 16.575 12.0002 16.575C12.2835 16.575 12.521 16.4792 12.7127 16.2875C12.9044 16.0958 13.0002 15.8583 13.0002 15.575L13.0002 6.425L15.8752 9.3C16.0585 9.48333 16.296 9.57083 16.5877 9.5625C16.8794 9.55417 17.1169 9.45833 17.3002 9.275C17.4835 9.09167 17.5752 8.85833 17.5752 8.575C17.5752 8.29167 17.4835 8.05833 17.3002 7.875L12.7002 3.275C12.6002 3.175 12.4919 3.10417 12.3752 3.0625Z" fill="currentColor">
@@ -39,7 +39,7 @@
         </path></svg> <label for="example-input-danger" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
       </div>
 
-      <div class="FileUploaderInput__validationText">
+      <div class="FileUploaderInput__validationText" id="example-input-danger-validation-text">
         Error validation text
       </div>
     </div>
@@ -59,14 +59,14 @@
 
     <div class="FileUploaderInput" data-spirit-element="wrapper">
       <label for="example-input-unsafe" class="FileUploaderInput__label"><span>UNSAFE label text</span></label>
-      <input type="file" id="example-input-unsafe" class="FileUploaderInput__input" data-spirit-element="input">
+      <input type="file" id="example-input-unsafe" class="FileUploaderInput__input" data-spirit-element="input" aria-describedby="example-input-unsafe-helper-text example-input-unsafe-validation-text">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M12.3752 3.0625C12.2585 3.02083 12.1335 3 12.0002 3C11.8669 3 11.7419 3.02083 11.6252 3.0625C11.5085 3.10417 11.4002 3.175 11.3002 3.275L6.7002 7.875C6.51686 8.05833 6.4252 8.29167 6.4252 8.575C6.4252 8.85833 6.51686 9.09167 6.7002 9.275C6.88353 9.45833 7.12103 9.55417 7.4127 9.5625C7.70436 9.57083 7.94186 9.48333 8.1252 9.3L11.0002 6.425L11.0002 15.575C11.0002 15.8583 11.096 16.0958 11.2877 16.2875C11.4794 16.4792 11.7169 16.575 12.0002 16.575C12.2835 16.575 12.521 16.4792 12.7127 16.2875C12.9044 16.0958 13.0002 15.8583 13.0002 15.575L13.0002 6.425L15.8752 9.3C16.0585 9.48333 16.296 9.57083 16.5877 9.5625C16.8794 9.55417 17.1169 9.45833 17.3002 9.275C17.4835 9.09167 17.5752 8.85833 17.5752 8.575C17.5752 8.29167 17.4835 8.05833 17.3002 7.875L12.7002 3.275C12.6002 3.175 12.4919 3.10417 12.3752 3.0625Z" fill="currentColor">
         </path>
         <path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0209 21 19.55 21 19V17C21 16.7167 20.9042 16.4792 20.7125 16.2875C20.5208 16.0959 20.2833 16 20 16C19.7167 16 19.4792 16.0959 19.2875 16.2875C19.0958 16.4792 19 16.7167 19 17V19H5V17C5 16.7167 4.90417 16.4792 4.7125 16.2875C4.52083 16.0959 4.28333 16 4 16C3.71667 16 3.47917 16.0959 3.2875 16.2875C3.09583 16.4792 3 16.7167 3 17V19C3 19.55 3.19583 20.0209 3.5875 20.4125Z" fill="currentColor">
         </path></svg> <label for="example-input-unsafe" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
-        <div class="FileUploaderInput__helperText">
+        <div class="FileUploaderInput__helperText" id="example-input-unsafe-helper-text">
           <span>UNSAFE helper text</span>
         </div>
       </div>
@@ -75,17 +75,17 @@
 
     <div class="FileUploaderInput FileUploaderInput--disabled FileUploaderInput--danger" data-spirit-element="wrapper">
       <label for="example-input-all-props" class="FileUploaderInput__label FileUploaderInput__label--hidden FileUploaderInput__label--required">Label</label>
-      <input type="file" id="example-input-all-props" class="FileUploaderInput__input" data-spirit-element="input" name="example-input" disabled>
+      <input type="file" id="example-input-all-props" class="FileUploaderInput__input" data-spirit-element="input" name="example-input" disabled aria-describedby="example-input-all-props-helper-text example-input-all-props-validation-text">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z" fill="currentColor">
         </path></svg> <label for="example-input-all-props" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Pick a file</span> <span class="FileUploaderInput__dragAndDropLabel">or drop it here</span></label>
-        <div class="FileUploaderInput__helperText">
+        <div class="FileUploaderInput__helperText" id="example-input-all-props-helper-text">
           <span>UNSAFE helper text</span>
         </div>
       </div>
 
-      <div class="FileUploaderInput__validationText">
+      <div class="FileUploaderInput__validationText" id="example-input-all-props-validation-text">
         <span>UNSAFE validation text</span>
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/Item/Item.twig b/packages/web-twig/src/Resources/components/Item/Item.twig
index f820e9d437..8c94fc9898 100644
--- a/packages/web-twig/src/Resources/components/Item/Item.twig
+++ b/packages/web-twig/src/Resources/components/Item/Item.twig
@@ -34,10 +34,10 @@
 {%- set _classNames = [ _rootClassName, _disabledClassName, _selectedClassName, _styleProps.className ] -%}
 {%- set _selectedIconName = 'check-plain' -%}
 
-<{{ _elementType }} 
-  {{ mainProps(props) }} 
-  {{ styleProp(_styleProps) }} 
-  {{ classProp(_classNames) }} 
+<{{ _elementType }}
+  {{ mainProps(props) }}
+  {{ styleProp(_styleProps) }}
+  {{ classProp(_classNames) }}
   {{ _hrefAttr }}
   {{ _targetAttr }}
   {{ _typeAttr }}
@@ -57,8 +57,8 @@
     {%- endif -%}
   </span>
   <HelperText
-    elementType="span"
     className="{{ _helperTextClassName }}"
+    elementType="span"
     helperText="{{ _helperText }}"
     UNSAFE_helperText="{{ _unsafeHelperText }}"
   />
diff --git a/packages/web-twig/src/Resources/components/Radio/Radio.twig b/packages/web-twig/src/Resources/components/Radio/Radio.twig
index f9a1639e56..02a9682030 100644
--- a/packages/web-twig/src/Resources/components/Radio/Radio.twig
+++ b/packages/web-twig/src/Resources/components/Radio/Radio.twig
@@ -25,20 +25,22 @@
 {%- set _helperTextClassName = _spiritClassPrefix ~ 'Radio__helperText' -%}
 {%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'Radio--' ~ _validationState : null -%}
 
-{# Attributes #}
-{%- set _checkedAttr = _isChecked ? 'checked' : null -%}
-{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
-{%- set _valueAttr = _value ? 'value=' ~ _value : null -%}
-{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
-{%- set _labelForAttr = _id ? 'for="' ~ _id | escape('html_attr') ~ '"' : null -%}
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
+{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
 {%- set _labelClassName = [ _labelClassName, _labelHiddenClassName ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 {%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
 
+{# Attributes #}
+{%- set _ariaDescribedByAttr = _helperTextId ? 'aria-describedby="' ~ _helperTextId ~ '"' : null -%}
+{%- set _checkedAttr = _isChecked ? 'checked' : null -%}
+{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
+{%- set _valueAttr = _value ? 'value=' ~ _value : null -%}
+{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
+{%- set _labelForAttr = _id ? 'for="' ~ _id | escape('html_attr') ~ '"' : null -%}
+
 <label {{ _labelForAttr | raw }} {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <input
         {{ inputProps(props, _allowedInputAttributes, _inputProps) }}
@@ -49,6 +51,7 @@
         {{ _checkedAttr }}
         {{ _disabledAttr }}
         {{ _valueAttr }} {# Intentionally without `raw` to prevent XSS. #}
+        {{ _ariaDescribedByAttr | raw }}
     />
     <span class="{{ _textClassName }}">
         <span {{ classProp(_labelClassName) }}>
@@ -62,6 +65,7 @@
             className="{{ _helperTextClassName }}"
             elementType="span"
             helperText="{{ _helperText }}"
+            id="{{ _helperTextId }}"
             UNSAFE_helperText="{{ _unsafeHelperText }}"
         />
     </span>
diff --git a/packages/web-twig/src/Resources/components/Select/Select.twig b/packages/web-twig/src/Resources/components/Select/Select.twig
index b12ddac280..2cac5fd9e2 100644
--- a/packages/web-twig/src/Resources/components/Select/Select.twig
+++ b/packages/web-twig/src/Resources/components/Select/Select.twig
@@ -29,15 +29,18 @@
 {%- set _validationTextClassName = _spiritClassPrefix ~ 'Select__validationText' -%}
 {%- set _helperTextClassName = _spiritClassPrefix ~ 'Select__helperText' -%}
 
-{# Attributes #}
-{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
-{%- set _requiredAttr = _isRequired ? 'required' : null -%}
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _rootFluidClassName, _rootDisabledClassName, _rootValidationStateClassName, _styleProps.className ] -%}
+{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
 {%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
+{%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}
+
+{# Attributes #}
+{%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
+{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
+{%- set _requiredAttr = _isRequired ? 'required' : null -%}
 
 <div {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
@@ -51,6 +54,7 @@
             class="{{ _inputClassName }}"
             {{ _disabledAttr }}
             {{ _requiredAttr }}
+            {{ _ariaDescribedByAttr | raw }}
         >
             {%- block content %}{% endblock -%}
         </select>
@@ -61,10 +65,12 @@
     <HelperText
         className="{{ _helperTextClassName }}"
         helperText="{{ _helperText }}"
+        id="{{ _helperTextId }}"
         UNSAFE_helperText="{{ _unsafeHelperText }}"
     />
     <ValidationText
         className="{{ _validationTextClassName }}"
+        id="{{ _validationTextId }}"
         validationState="{{ _validationState }}"
         validationText="{{ _validationText }}"
         UNSAFE_validationText="{{ _unsafeValidationText }}"
diff --git a/packages/web-twig/src/Resources/components/Select/__tests__/__snapshots__/selectHelperText.twig.snap.html b/packages/web-twig/src/Resources/components/Select/__tests__/__snapshots__/selectHelperText.twig.snap.html
index a7813bd0b5..ba3fdbfd3d 100644
--- a/packages/web-twig/src/Resources/components/Select/__tests__/__snapshots__/selectHelperText.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Select/__tests__/__snapshots__/selectHelperText.twig.snap.html
@@ -8,7 +8,7 @@
     <div class="Select">
       <label for="example" class="Select__label">Label</label>
       <div class="Select__inputContainer">
-        <select id="example" name="example" class="Select__input">
+        <select id="example" name="example" class="Select__input" aria-describedby="example-helper-text">
           <option value="" selected>
             Placeholder
           </option>
@@ -26,7 +26,7 @@
         </div>
       </div>
 
-      <div class="Select__helperText">
+      <div class="Select__helperText" id="example-helper-text">
         Helper text
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/Select/__tests__/__snapshots__/selectValidationState.twig.snap.html b/packages/web-twig/src/Resources/components/Select/__tests__/__snapshots__/selectValidationState.twig.snap.html
index 1699988bca..087fa6130a 100644
--- a/packages/web-twig/src/Resources/components/Select/__tests__/__snapshots__/selectValidationState.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Select/__tests__/__snapshots__/selectValidationState.twig.snap.html
@@ -8,7 +8,7 @@
     <div class="Select Select--success">
       <label for="select-success" class="Select__label Select__label--required">Validation success</label>
       <div class="Select__inputContainer">
-        <select id="select-success" name="select-success" class="Select__input" required="">
+        <select id="select-success" name="select-success" class="Select__input" required="" aria-describedby="select-success-validation-text">
           <option value="" selected disabled>
             Placeholder
           </option>
@@ -26,7 +26,7 @@
         </div>
       </div>
 
-      <div class="Select__validationText">
+      <div class="Select__validationText" id="select-success-validation-text">
         Success validation text
       </div>
     </div>
@@ -34,7 +34,7 @@
     <div class="Select Select--warning">
       <label for="select-warning" class="Select__label Select__label--required">Validation warning</label>
       <div class="Select__inputContainer">
-        <select id="select-warning" name="select-warning" class="Select__input" required="">
+        <select id="select-warning" name="select-warning" class="Select__input" required="" aria-describedby="select-warning-validation-text">
           <option value="" selected disabled>
             Placeholder
           </option>
@@ -52,7 +52,7 @@
         </div>
       </div>
 
-      <div class="Select__validationText">
+      <div class="Select__validationText" id="select-warning-validation-text">
         Warning validation text
       </div>
     </div>
@@ -60,7 +60,7 @@
     <div class="Select Select--danger">
       <label for="select-danger" class="Select__label Select__label--required">Validation danger</label>
       <div class="Select__inputContainer">
-        <select id="select-danger" name="select-danger" class="Select__input" required="">
+        <select id="select-danger" name="select-danger" class="Select__input" required="" aria-describedby="select-danger-validation-text">
           <option value="" selected disabled>
             Placeholder
           </option>
@@ -78,7 +78,7 @@
         </div>
       </div>
 
-      <ul class="Select__validationText">
+      <ul class="Select__validationText" id="select-danger-validation-text">
         <li>Danger validation text
         </li>
 
diff --git a/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaDefault.twig.snap.html b/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaDefault.twig.snap.html
index 1dc20e3513..4d35b3514f 100644
--- a/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaDefault.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaDefault.twig.snap.html
@@ -8,8 +8,8 @@
     <div class="TextArea TextArea--danger">
       <label for="example" class="TextArea__label TextArea__label--required">TextArea</label> 
 
-      <textarea minlength="6" maxlength="10" rows="10" data-validate="true" id="example" name="example" class="TextArea__input" required="">TextArea value</textarea>
-      <div class="TextArea__validationText">
+      <textarea minlength="6" maxlength="10" rows="10" data-validate="true" id="example" name="example" class="TextArea__input" required="" aria-describedby="example-validation-text">TextArea value</textarea>
+      <div class="TextArea__validationText" id="example-validation-text">
         validation failed
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithAutoResize.twig.snap.html b/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithAutoResize.twig.snap.html
index 5f7d122bb7..aeffb86fd5 100644
--- a/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithAutoResize.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithAutoResize.twig.snap.html
@@ -8,8 +8,8 @@
     <div data-test="test" class="TextArea TextArea--error" data-spirit-toggle="autoResize">
       <label for="example" class="TextArea__label TextArea__label--required">TextArea</label> 
 
-      <textarea maxlength="10" minlength="6" rows="10" id="example" name="example" class="TextArea__input" required="">TextArea value</textarea>
-      <div class="TextArea__validationText">
+      <textarea maxlength="10" minlength="6" rows="10" id="example" name="example" class="TextArea__input" required="" aria-describedby="example-validation-text">TextArea value</textarea>
+      <div class="TextArea__validationText" id="example-validation-text">
         validation failed
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithHelperText.twig.snap.html b/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithHelperText.twig.snap.html
index 2d71d46b37..a1ddb7ba8d 100644
--- a/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithHelperText.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithHelperText.twig.snap.html
@@ -8,8 +8,8 @@
     <div class="TextArea">
       <label for="example" class="TextArea__label">TextArea</label> 
 
-      <textarea id="example" name="" class="TextArea__input"></textarea>
-      <div class="TextArea__helperText">
+      <textarea id="example" name="" class="TextArea__input" aria-describedby="example-helper-text"></textarea>
+      <div class="TextArea__helperText" id="example-helper-text">
         This is helper text
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithMultilineMessage.twig.snap.html b/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithMultilineMessage.twig.snap.html
index 3d7641f100..8da5ed83e5 100644
--- a/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithMultilineMessage.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextArea/__tests__/__snapshots__/textAreaWithMultilineMessage.twig.snap.html
@@ -8,8 +8,8 @@
     <div class="TextArea TextArea--danger">
       <label for="example" class="TextArea__label">TextArea</label> 
 
-      <textarea id="example" name="" class="TextArea__input"></textarea>
-      <ul class="TextArea__validationText">
+      <textarea id="example" name="" class="TextArea__input" aria-describedby="example-validation-text"></textarea>
+      <ul class="TextArea__validationText" id="example-validation-text">
         <li>Danger validation text
         </li>
 
diff --git a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/passwordFieldDefault.twig.snap.html b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/passwordFieldDefault.twig.snap.html
index f1c3a32d82..42833875bd 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/passwordFieldDefault.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/passwordFieldDefault.twig.snap.html
@@ -6,8 +6,8 @@
   </head>
   <body>
     <div class="TextField TextField--danger">
-      <label for="example2" class="TextField__label TextField__label--required">Password field</label> <input type="password" id="example2" name="example2" class="TextField__input" required="">
-      <div class="TextField__validationText">
+      <label for="example2" class="TextField__label TextField__label--required">Password field</label> <input type="password" id="example2" name="example2" class="TextField__input" required="" aria-describedby="example2-validation-text">
+      <div class="TextField__validationText" id="example2-validation-text">
         validation failed
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html
index bc43d294c9..5907c0aa2f 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html
@@ -6,8 +6,8 @@
   </head>
   <body>
     <div class="TextField TextField--danger">
-      <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" placeholder="Some long placeholder" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" required="">
-      <div class="TextField__validationText">
+      <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" placeholder="Some long placeholder" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" required="" aria-describedby="example-validation-text">
+      <div class="TextField__validationText" id="example-validation-text">
         validation failed
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefaultPure.twig.snap.html b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefaultPure.twig.snap.html
index 24e322eaad..123ac91728 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefaultPure.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefaultPure.twig.snap.html
@@ -6,8 +6,8 @@
   </head>
   <body>
     <div class="TextField TextField--danger">
-      <input type="text" id="example" name="example" class="TextField__input" required="">
-      <div class="TextField__validationText">
+      <input type="text" id="example" name="example" class="TextField__input" required="" aria-describedby="example-validation-text">
+      <div class="TextField__validationText" id="example-validation-text">
         validation failed
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithHelperText.twig.snap.html b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithHelperText.twig.snap.html
index 5ceb881ae3..bd757c6db8 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithHelperText.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithHelperText.twig.snap.html
@@ -6,8 +6,8 @@
   </head>
   <body>
     <div class="TextField">
-      <label for="example" class="TextField__label">Text field</label> <input type="text" id="example" name="example" class="TextField__input">
-      <div class="TextField__helperText">
+      <label for="example" class="TextField__label">Text field</label> <input type="text" id="example" name="example" class="TextField__input" aria-describedby="example-helper-text">
+      <div class="TextField__helperText" id="example-helper-text">
         This is helper text
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithMultilineMessage.twig.snap.html b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithMultilineMessage.twig.snap.html
index f60c276e13..18402dc451 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithMultilineMessage.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithMultilineMessage.twig.snap.html
@@ -6,8 +6,8 @@
   </head>
   <body>
     <div class="TextField TextField--danger">
-      <label for="example" class="TextField__label">Text field</label> <input type="text" id="example" name="example" class="TextField__input">
-      <ul class="TextField__validationText">
+      <label for="example" class="TextField__label">Text field</label> <input type="text" id="example" name="example" class="TextField__input" aria-describedby="example-validation-text">
+      <ul class="TextField__validationText" id="example-validation-text">
         <li>Danger validation text
         </li>
 
diff --git a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithUnsafe.twig.snap.html b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithUnsafe.twig.snap.html
index 0aed4852e0..5a77e5b35a 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithUnsafe.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldWithUnsafe.twig.snap.html
@@ -6,12 +6,12 @@
   </head>
   <body>
     <div class="TextField TextField--success">
-      <label for="example" class="TextField__label">This is <strong>label</strong> text</label> <input type="text" id="example" name="example" class="TextField__input">
-      <div class="TextField__helperText">
+      <label for="example" class="TextField__label">This is <strong>label</strong> text</label> <input type="text" id="example" name="example" class="TextField__input" aria-describedby="example-helper-text example-validation-text">
+      <div class="TextField__helperText" id="example-helper-text">
         This is <strong>helper</strong> text
       </div>
 
-      <div class="TextField__validationText">
+      <div class="TextField__validationText" id="example-validation-text">
         This is <strong>validation</strong> text
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
index d69b3e42b1..8079efb7da 100644
--- a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
+++ b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
@@ -42,7 +42,18 @@
 {%- set _helperTextClassName = _rootClassName ~ '__helperText' -%}
 {%- set _validationTextClassName = _rootClassName ~ '__validationText' -%}
 
+{# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _styleProps.className ] -%}
+{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
+{%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
+{%- set _allowedAttributes = [ 'autocomplete', 'placeholder'] -%}
+{%- set _textFieldAllowedAttributes = _allowedAttributes | merge([ 'value' ]) -%}
+{%- set _textAreaAllowedAttributes = _allowedAttributes | merge([ 'rows' ]) -%}
+{%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}
+
 {# Attributes #}
+{%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
 {%- set _dataToggleAttr = _isAutoResizing and _isMultiline ? 'data-spirit-toggle=autoResize' : null -%}
 {%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
 {%- set _requiredAttr = _isRequired ? 'required' : null -%}
@@ -50,14 +61,8 @@
 {# Extended Attributes for TextField #}
 {%- set _inputWidthAttr = _inputWidth ? 'size="' ~ _inputWidth | escape('html_attr') ~ '"' : null -%}
 
-{# Miscellaneous #}
-{%- set _styleProps = useStyleProps(props) -%}
-{%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _styleProps.className ] -%}
-{%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
+{# MainProps #}
 {%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop is not same as('id') and (_dataToggleAttr is null or prop is not same as('data-spirit-toggle'))) -%}
-{%- set _allowedAttributes = [ 'autocomplete', 'placeholder'] -%}
-{%- set _textFieldAllowedAttributes = _allowedAttributes | merge([ 'value' ]) -%}
-{%- set _textAreaAllowedAttributes = _allowedAttributes | merge([ 'rows' ]) -%}
 
 <div {{ mainProps(_mainPropsWithoutReservedAttributes) }} {{ styleProp(_styleProps) }} {{ classProp(_rootClassNames) }} {{ _dataToggleAttr }}>
     <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
@@ -75,6 +80,7 @@
             class="{{ _inputClassName }}"
             {{ _disabledAttr }}
             {{ _requiredAttr }}
+            {{ _ariaDescribedByAttr | raw }}
         >{{ _value }}</textarea>{# Intentionally without `raw` to prevent XSS. #}
     {% else %}
         {% if _hasPasswordToggle %}
@@ -88,6 +94,7 @@
                     {{ _disabledAttr }}
                     {{ _inputWidthAttr | raw }}
                     {{ _requiredAttr }}
+                    {{ _ariaDescribedByAttr | raw }}
                 />
                 <button
                     type="button"
@@ -115,16 +122,19 @@
                 {{ _disabledAttr }}
                 {{ _inputWidthAttr | raw }}
                 {{ _requiredAttr }}
+                {{ _ariaDescribedByAttr | raw }}
             />
         {% endif %}
     {% endif %}
     <HelperText
         className="{{ _helperTextClassName }}"
         helperText="{{ _helperText }}"
+        id="{{ _helperTextId }}"
         UNSAFE_helperText="{{ _unsafeHelperText }}"
     />
     <ValidationText
         className="{{ _validationTextClassName }}"
+        id="{{ _validationTextId }}"
         validationState="{{ _validationState }}"
         validationText="{{ _validationText }}"
         UNSAFE_validationText="{{ _unsafeValidationText }}"
diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseDefault.twig.snap.html b/packages/web-twig/src/Resources/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseDefault.twig.snap.html
index d8cc15617e..5f1b93f3a6 100644
--- a/packages/web-twig/src/Resources/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseDefault.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseDefault.twig.snap.html
@@ -6,8 +6,8 @@
   </head>
   <body>
     <div data-test="test" data-validate="1" data-spirit-validate="1" data-custom-validate="true" class="TextField TextField--danger">
-      <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" autocomplete="on" placeholder="Very long text" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" size="10" required="">
-      <div class="TextField__validationText">
+      <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" autocomplete="on" placeholder="Very long text" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" size="10" required="" aria-describedby="example-validation-text">
+      <div class="TextField__validationText" id="example-validation-text">
         validation failed
       </div>
     </div>
diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseMultiline.twig.snap.html b/packages/web-twig/src/Resources/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseMultiline.twig.snap.html
index 1924ca723c..f79e115449 100644
--- a/packages/web-twig/src/Resources/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseMultiline.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseMultiline.twig.snap.html
@@ -8,8 +8,8 @@
     <div data-test="test" class="TextArea TextArea--danger">
       <label for="example" class="TextArea__label TextArea__label--required">Textarea</label> 
 
-      <textarea minlength="6" id="example" name="example" class="TextArea__input" required=""></textarea>
-      <div class="TextArea__validationText">
+      <textarea minlength="6" id="example" name="example" class="TextArea__input" required="" aria-describedby="example-validation-text"></textarea>
+      <div class="TextArea__validationText" id="example-validation-text">
         validation failed
       </div>
     </div>