Feat(web-twig): Link helper texts and validation texts to inputs to i…

…mprove accessibility
lmc-eu · Aug 10, 2023 · b1ac746 · b1ac746
1 parent 0df0fbd
commit b1ac746
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/packages/web-twig/src/Resources/components/Radio/Radio.twig b/packages/web-twig/src/Resources/components/Radio/Radio.twig
@@ -1,18 +1,18 @@
 {# API #}
 {%- set _autocomplete = props.autocomplete | default(null) -%}
+{%- set _helperText = props.helperText | default(null) -%}
 {%- set _id = props.id | default(null) -%}
 {%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isChecked = props.isChecked | default(false) -%}
 {%- set _isDisabled = props.isDisabled | default(false) -%}
 {%- set _isItem = props.isItem | default(false) -%}
 {%- set _isLabelHidden = props.isLabelHidden | default(false) -%}
 {%- set _label = props.label -%}
-{%- set _unsafeLabel = props.UNSAFE_label | default(null) -%}
 {%- set _name = props.name | default(null) -%}
-{%- set _value = props.value | default(null) -%}
-{%- set _helperText = props.helperText | default(null) -%}
 {%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%}
+{%- set _unsafeLabel = props.UNSAFE_label | default(null) -%}
 {%- set _validationState = props.validationState | default(null) -%}
+{%- set _value = props.value | default(null) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Radio' -%}
@@ -25,31 +25,39 @@
 {%- set _helperTextClassName = _spiritClassPrefix ~ 'Radio__helperText' -%}
 {%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'Radio--' ~ _validationState : null -%}
 
+{# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%} {# Must be (anywhere) before _rootClassNames #}
+{%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
+{%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
+{%- set _helperTextId = _id ? _id ~ '__helperText' : null -%}
+{%- set _labelClassName = [ _labelClassName, _labelHiddenClassName ] -%}
+{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['aria-describedby', 'id']) -%}
+
 {# Attributes #}
+{%- set _ariaDescribedbyAttr = _id and (_helperText or _unsafeHelperText) ? '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 -%}
 
-{# Miscellaneous #}
-{%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
-{%- set _labelClassName = [ _labelClassName, _labelHiddenClassName ] -%}
-{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
-{%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
-
 {# Deprecations #}
 {% if not _id %}
     {% deprecated 'Radio: The "id" property will be required starting from the next major version.' %}
 {% endif %}
 
-<label {{ _labelForAttr | raw }} {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
+<label
+    {{ mainProps(_mainPropsWithoutReservedAttributes) }}
+    {{ classProp(_classNames) }}
+    {{ styleProp(_styleProps) }}
+    {{ _labelForAttr | raw }}
+>
     <input
         {{ inputProps(props, _allowedInputAttributes, _inputProps) }}
         type="radio"
         name="{{ _name }}"
         class="{{ _inputClassName }}"
+        {{ _ariaDescribedbyAttr | raw }}
         {{ _idAttr | raw }}
         {{ _checkedAttr }}
         {{ _disabledAttr }}
@@ -66,6 +74,7 @@
         <HelperText
             className="{{ _helperTextClassName }}"
             elementType="span"
+            id="{{ _helperTextId }}"
             helperText="{{ _helperText }}"
             UNSAFE_helperText="{{ _unsafeHelperText }}"
         />

diff --git a/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set radioDefault.twig__1.html b/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set radioDefault.twig__1.html
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="Radio"><input data-validate="true" type="radio" name="example" class="Radio__input" id="example" checked> </label>
+    <label class="Radio" for="example"><input data-validate="true" type="radio" name="example" class="Radio__input" id="example" checked> </label>
   </body>
 </html>
diff --git a/...ts/__snapshots__/ComponentsSnapshotTest__test with data set radioDefaultPure.twig__1.html b/...ts/__snapshots__/ComponentsSnapshotTest__test with data set radioDefaultPure.twig__1.html
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="Radio"><input type="radio" name="example" class="Radio__input" id="example" checked> <span class="Radio__text"><span class="Radio__label">some label</span></span></label>
+    <label class="Radio" for="example"><input type="radio" name="example" class="Radio__input" id="example" checked> <span class="Radio__text"><span class="Radio__label">some label</span></span></label>
   </body>
 </html>
diff --git a/...wig/tests/__snapshots__/ComponentsSnapshotTest__test with data set radioItem.twig__1.html b/...wig/tests/__snapshots__/ComponentsSnapshotTest__test with data set radioItem.twig__1.html
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="Radio Radio--item"><input type="radio" name="example" class="Radio__input" id="example"> <span class="Radio__text"><span class="Radio__label">item</span></span></label>
+    <label class="Radio Radio--item" for="example"><input type="radio" name="example" class="Radio__input" id="example"> <span class="Radio__text"><span class="Radio__label">item</span></span></label>
   </body>
 </html>