@madgex/design-system 5.9.0 → 5.11.0

package/src/components/inputs/textarea/_template.njk

@@ -8,6 +8,22 @@
   {% set name = params.id %}
 {% endif %}
 
+{% if params.maxlength %}
+  {% set characterCountId = [params.id, '-character-count-text'] | join %}
+{% endif %}
+
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if characterCountId or helpTextId or validationErrorId %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId, characterCountId] | join(' ') | trim %}
+{% endif %}
+
 <div class="mds-form-element mds-form-element--textarea{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}{% if params.maxlength %} mds-form-element--character-count{% endif %}" id="{{ params.id }}-container" data-test="textarea{% if params.id %}-{{params.id}}{% endif %}">
   {{ MdsInputLabel({
     labelText: params.labelText,
@@ -19,7 +35,9 @@
   }) }}
   {{ MdsInputMessages({
     id: params.id,
+    helpTextId: helpTextId,
     helpText: params.helpText,
+    validationErrorId: validationErrorId,
     validationError: params.validationError
   }) }}
   <textarea
@@ -33,7 +51,10 @@
         placeholder="{% if params.placeholder %}{{ params.placeholder }}{% else %}{{ params.labelText }}{% endif %}"
       {% endif %}
       {% if params.maxlength %}
-        maxlength="{{ params.maxlength }}" aria-describedby="{{ params.id }}-character-count-text"
+        maxlength="{{ params.maxlength }}"
+      {% endif %}
+      {% if ariaDescribedBy %}
+        aria-describedby="{{ ariaDescribedBy }}"
       {% endif %}
       {% if params.validationError %}
         aria-invalid="true"

package/src/tokens/color.json

@@ -250,7 +250,7 @@
         "value" : "{color.neutral.black.value}"
       },
       "border": {
-        "value" : "#949494"
+        "value" : "{color.neutral.base.value}"
       },
       "focus": {
         "value" : "#5092fd"