Fix(web-twig): Make ValidationText and HelperText ID optional #DS-1336

Set aria-describedby to form elements when helperText or validationText set.
lmc-eu · Jun 12, 2024 · 0e2feea · 0e2feea
1 parent 8a6c985
commit 0e2feea
Show file tree

Hide file tree

Showing 32 changed files with 131 additions and 102 deletions.
diff --git 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/.../src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html b/.../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/.../Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefaultPure.twig.snap.html b/.../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/...wig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxItem.twig.snap.html b/...wig/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
@@ -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
@@ -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
@@ -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
@@ -1,25 +1,22 @@
 <!-- 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"
 />
 
 <!-- Render with iterable validation text -->
 <ValidationText
     className="myClass"
-    id="validation-text-iterable"
     validationState="success"
     validationText="{{ ['Validation text 1', 'Validation text 2'] }}"
 />

diff --git a/...web-twig/src/Resources/components/Field/__tests__/__snapshots__/helperText.twig.snap.html b/...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/...twig/src/Resources/components/Field/__tests__/__snapshots__/validationText.twig.snap.html b/...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
@@ -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/...wig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html b/...wig/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
@@ -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 }}"