@madgex/design-system 5.9.0 → 5.10.0

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Mar 2023 11:11:27 GMT
+ * Generated on Mon, 20 Mar 2023 08:22:48 GMT
  */
 
 :root {

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Mar 2023 11:11:27 GMT
+ * Generated on Mon, 20 Mar 2023 08:22:48 GMT
  */
 
 module.exports = {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 14 Mar 2023 11:11:27 GMT
+ * Generated on Mon, 20 Mar 2023 08:22:48 GMT
  */
 
 $mds-color-brand-1-light: #2990e0 !default;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "main": "dist/js/index.js",
   "files": [
     "dist",
@@ -89,5 +89,5 @@
     "webpack-dev-server": "^3.11.2",
     "webpack-stream": "^6.1.2"
   },
-  "gitHead": "ac3e96e389676e6e6dfbca5f6ed6e78f1289693e"
+  "gitHead": "a778c81350d63b335cc68caab575ba2c2176a398"
 }

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

@@ -1,9 +1,9 @@
 {% from "../../icons/_macro.njk" import MdsIcon %}
 
-{% if params.helpText %}
+{% if params.helpText and params.helpTextId %}
     <div
       class="mds-form-message"
-      id="{{ params.id }}-help-text">
+      id="{{ params.helpTextId }}">
       {{ params.helpText }}
     </div>
   {% endif %}
@@ -11,12 +11,13 @@
     <div 
       aria-live="polite" 
       class="mds-form-message mds-form-message--error"
-      id="{{ params.id }}-validation-error">
+      id="{{ params.validationErrorId }}">
       {{- MdsIcon({ 
         iconName: 'cross',
         classes: 'mds-icon--sm',
         hasContainer: true,
-        containerClasses: 'mds-icon-container--circle mds-icon-container--error mds-icon-container--before' 
+        containerClasses: 'mds-icon-container--circle mds-icon-container--error mds-icon-container--before',
+        visuallyHiddenLabel: params.i18n.errorIcon | default('Error. ')
         }) 
       -}}
       {{- params.validationError -}}

package/src/components/inputs/checkbox-list/README.md

@@ -17,6 +17,7 @@
 ```
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon (label)
+  errorIcon: default is 'Error', // visually hidden text for the error icon
   accordionTrigger: 'Select options under {label}' // text to improve a11y on nested checkboxes - please note the use of `{label}` to get the name of the option
 }
 ```

package/src/components/inputs/checkbox-list/_template.njk

@@ -3,12 +3,25 @@
 {% from "../../accordion/_macro.njk" import MdsAccordion %}
 {% from "../../icons/_macro.njk" import MdsIcon %}
 {% from "../_checkbox-elem/_macro.njk" import MdsCheckboxElem %}
+
 {%- if params.name -%}
   {%- set name = params.name -%}
 {%- else -%}
   {%- set name = params.id -%}
 {%- endif -%}
 
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if helpTextId or validationErrorId or params.describedBy %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId, params.describedBy] | join(' ') | trim %}
+{% endif %}
+
 {% macro createCheckboxes(checkboxParams) %}
   {% if checkboxParams.options and checkboxParams.options.length %}
     {% for option in checkboxParams.options %}
@@ -95,7 +108,7 @@
 {% endif %}
 
 <div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="checkbox{% if params.id %}-{{params.id}}{% endif %}">
-  <fieldset {%- if params.describedBy %} aria-describedby="{{params.describedBy}}"{% endif %}>
+  <fieldset {%- if ariaDescribedBy %} aria-describedby="{{ariaDescribedBy}}"{% endif %}>
     {{ MdsInputLabel({
       element: 'legend',
       labelText: params.labelText,
@@ -107,7 +120,9 @@
     }) }}
     {{ MdsInputMessages({
       id: params.id,
+      helpTextId: helpTextId,
       helpText: params.helpText,
+      validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
     <div class="mds-form-check-container{% if hasBorder %} mds-form-check-container--border{% endif %}">

package/src/components/inputs/combobox/README.md

@@ -18,6 +18,7 @@
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon (label)
   loadingText: 'Loading', // visually hidden text for the loading icon
+  errorIcon: default is 'Error', // visually hidden text for the error icon
   describedByText:
     'When autocomplete results are available, use up and down arrows to review and enter to select.', // help text for screen readers users to explain how to use the combobox
   resultsMessage: '{count} result available.', // announce number of results - note the use of `{count}` to get the number of results

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

@@ -22,6 +22,18 @@
 
 {%- set labelId %}{{comboboxId}}-label{% endset -%}
 
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if helpTextId or validationErrorId %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId] | join(' ') | trim %}
+{% endif %}
+
 {%- if comboboxId -%}
   <div class="mds-form-element mds-form-element--combobox js-mds-combobox{% if params.classes %} {{params.classes}}{% endif %}{% if params.state %} mds-form-element--{{params.state}}{% endif %}" data-combobox-id="{{ comboboxId }}" data-test="combobox{% if comboboxId %}-{{comboboxId}}{% endif %}" data-type="{{ params.type }}">
     {{ MdsInputLabel({
@@ -35,12 +47,20 @@
     }) }}
     {{ MdsInputMessages({
       id: comboboxId,
+      helpTextId: helpTextId,
       helpText: params.helpText,
+      validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
     <div class="mds-form-element__fallback">
       {% if params.fallbackTo === 'select' and params.options %}
-        <select class="mds-form-control" id="{{ comboboxId }}" name="{{ comboboxName }}" value="{{ params.defaultValue|default('') }}">
+        <select
+          class="mds-form-control"
+          id="{{ comboboxId }}"
+          name="{{ comboboxName }}"
+          value="{{ params.defaultValue|default('') }}"
+          {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
+        >
           <option>{{ placeholder }}</option>
           {%- if params.options -%}
             {%- for value, option in params.options -%}
@@ -49,7 +69,17 @@
           {%- endif -%}
         </select>
       {% elseif params.fallbackTo === 'input' %}
-        <input class="mds-form-control" type="text" name="{{ comboboxName }}" autocomplete="off" id="{{ comboboxId }}" value="{{ params.value|default('') }}" placeholder="{{ placeholder }}" {% if params.validationError %} aria-invalid="true" {% endif %}/>
+        <input
+          class="mds-form-control"
+          type="text"
+          name="{{ comboboxName }}"
+          autocomplete="off"
+          id="{{ comboboxId }}"
+          value="{{ params.value|default('') }}"
+          placeholder="{{ placeholder }}"
+          {% if params.validationError %}aria-invalid="true"{% endif %}
+          {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
+          />
       {% endif %}
     </div>
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
@@ -57,6 +87,7 @@
       i18n="{{ params.i18n | dump }}" data-aria-invalid="{{ params.validationError }}"
       {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
+      {% if ariaDescribedBy %} describedby-id="{{ariaDescribedBy}}"{% endif -%}
       ></mds-combobox>
   </div>
 {%- endif -%}

package/src/components/inputs/combobox/combobox.config.js

@@ -79,5 +79,20 @@ module.exports = {
         fallbackTo: 'input',
       },
     },
+    {
+      name: 'AJAX autocomplete prefilled with validation error',
+      context: {
+        useAutocomplete: true,
+        variantTitle: 'AJAX autocomplete prefilled with validation error',
+        name: 'keywords',
+        id: 'keywords-lookup-prefilled-validation-error',
+        labelText: 'Keywords:',
+        placeholder: 'eg. Testimonials',
+        value: 'Initial Value',
+        vModel: 'Initial Value',
+        fallbackTo: 'input',
+        validationError: 'There was an error',
+      },
+    },
   ],
 };

package/src/components/inputs/combobox/combobox.njk

@@ -17,6 +17,8 @@
       classes: classes,
       placeholder: placeholder,
       type: type,
+      validationError: validationError,
+      helpText: helpText,
       i18n: i18n
     }) }}
     {# 

package/src/components/inputs/file-upload/README.md

@@ -17,7 +17,8 @@
 - `i18n`: Text to translate/customise (object) **optional**
 ```
 i18n: {
-  requiredIcon: 'required',
+  requiredIcon: 'required', , // visually hidden text for the required icon
+  errorIcon: default is 'Error', // visually hidden text for the error icon
   defaultFileText: 'Drag and drop',
   buttonText: 'Choose a file',
   removeButtonText: 'Remove file',

package/src/components/inputs/file-upload/_template.njk

@@ -19,6 +19,18 @@
   -}}
 {%- endset %}
 
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if helpTextId or validationErrorId %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId] | join(' ') | trim %}
+{% endif %}
+
 <div class="mds-form-element mds-form-element--file{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}{% if params.value %} mds-form-element--selected-file{% endif %}" id="{{ params.id }}-container" data-test="input{% if params.id %}-{{params.id}}{% endif %}">
   {{ MdsInputLabel({
       labelText: params.labelText,
@@ -31,7 +43,9 @@
   {% if params.value %}<p class="mds-file-upload__selected-file-fallback">{{ params.i18n.fallbackSelectedFileText | default('Use ' + params.value + ' or upload a different file') }}</p>{% endif %}
   {{ MdsInputMessages({
       id: params.id,
+      helpTextId: helpTextId,
       helpText: params.helpText,
+      validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
   <div class="mds-file-upload">
@@ -50,6 +64,9 @@
           {% if params.validationError %}
             aria-invalid="true"
           {% endif %}
+          {% if ariaDescribedBy %}
+            aria-describedby="{{ariaDescribedBy}}"
+          {% endif %}
       />
       <div class="mds-file-upload__input-controls" aria-live="assertive" aria-atomic="true">
         <div class="mds-file-upload__selection-state" aria-hidden="true">

package/src/components/inputs/file-upload/file-upload.config.js

@@ -20,5 +20,17 @@ module.exports = {
         },
       },
     },
+    {
+      name: 'Errored file input',
+      context: {
+        labelText: 'Error with uploaded file',
+        name: 'selected-file',
+        id: 'selected-file',
+        validationError: 'There was an error',
+        i18n: {
+          fallbackSelectedFileText: 'Use my saved CV or upload a different one',
+        },
+      },
+    },
   ],
 };

package/src/components/inputs/input/README.md

@@ -24,6 +24,7 @@
 ```
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon (label)
+  errorIcon: default is 'Error', // visually hidden text for the error icon
 }
 ```
 

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

@@ -7,6 +7,18 @@
   {% set name = params.id %}
 {% endif %}
 
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if helpTextId or validationErrorId %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId] | join(' ') | trim %}
+{% endif %}
+
 <div class="mds-form-element mds-form-element--input{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="input{% if params.id %}-{{params.id}}{% endif %}">
   {{ MdsInputLabel({
     labelText: params.labelText,
@@ -18,7 +30,9 @@
   }) }}
   {{ MdsInputMessages({
     id: params.id,
+    helpTextId: helpTextId,
     helpText: params.helpText,
+    validationErrorId: validationErrorId,
     validationError: params.validationError
   }) }}
   <input
@@ -41,5 +55,8 @@
     {% if params.autocompleteValue %}
       autocomplete="{{ params.autocompleteValue }}"
     {% endif %}
+    {% if ariaDescribedBy %}
+      aria-describedby="{{ariaDescribedBy}}"
+    {% endif %}
   />
-</div>
+</div>

package/src/components/inputs/radio/README.md

@@ -18,6 +18,7 @@
 ```
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon (label)
+  errorIcon: default is 'Error', // visually hidden text for the error icon
 }
 ```
 

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

@@ -7,8 +7,20 @@
   {%- set name = params.id -%}
 {%- endif -%}
 
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if helpTextId or validationErrorId %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId] | join(' ') | trim %}
+{% endif %}
+
 <div class="mds-form-element mds-form-element--radio{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="radio{% if params.id %}-{{params.id}}{% endif %}">
-  <fieldset>
+  <fieldset {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}>
     {{ MdsInputLabel({
         element: 'legend',
         labelText: params.labelText,
@@ -20,7 +32,9 @@
     }) }}
     {{ MdsInputMessages({
       id: params.id,
+      helpTextId: helpTextId,
       helpText: params.helpText,
+      validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
     {%- for radio in params.options -%}

package/src/components/inputs/radio/radio.config.js

@@ -67,5 +67,31 @@ module.exports = {
         ],
       },
     },
+    {
+      name: 'Error',
+      context: {
+        id: 'error-stacked-radio-input',
+        labelText: 'Error Stacked Radio',
+        validationError: 'There was an error',
+        helpText: "This field won't steal your card details",
+        options: [
+          {
+            labelText: 'Radio Input 1',
+            value: '4-1',
+            id: 'radio-4-1',
+          },
+          {
+            labelText: 'Radio Input 2',
+            value: '4-2',
+            id: 'radio-4-2',
+          },
+          {
+            labelText: 'Radio Input 3',
+            value: '4-3',
+            id: 'radio-4-3',
+          },
+        ],
+      },
+    },
   ],
 };

package/src/components/inputs/radio/radio.njk

@@ -9,7 +9,9 @@
     value: value,
     disabled: disabled,
     options: options,
-    classes: classes
+    classes: classes,
+    helpText: helpText,
+    validationError: validationError
   }) }}
 </div>
 

package/src/components/inputs/select/README.md

@@ -19,6 +19,7 @@
 ```
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon (label)
+  errorIcon: default is 'Error', // visually hidden text for the error icon
   defaultOptionLabel: 'Please select', // text for default option - won't display if hideDefault parameter is set
 }
 ```

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

@@ -7,6 +7,18 @@
   {% set name = params.id %}
 {% endif %}
 
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if helpTextId or validationErrorId %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId] | join(' ') | trim %}
+{% endif %}
+
 <div
   class="mds-form-element mds-form-element--select
   {%- if params.classes %} {{params.classes}}{% endif -%}
@@ -24,16 +36,21 @@
   }) }}
   {{ MdsInputMessages({
     id: params.id,
+    helpTextId: helpTextId,
     helpText: params.helpText,
+    validationErrorId: validationErrorId,
     validationError: params.validationError
   }) }}
   <select
     name="{{name}}"
     id="{{params.id}}"
+    class="mds-form-control"
     {%- if params.disabled %}
       disabled="disabled"
     {% endif -%}
-    class="mds-form-control"
+    {% if ariaDescribedBy %}
+      aria-describedby="{{ariaDescribedBy}}"
+    {% endif %}
   >
     {% if not params.hideDefault -%}
       <option {%- if not params.value %} selected="selected"{% endif %} value="">

package/src/components/inputs/select/select.config.js

@@ -96,5 +96,29 @@ module.exports = {
         },
       },
     },
+    {
+      name: 'Select Input With Error',
+      context: {
+        labelText: 'Select Input With Error',
+        name: 'Select input with error',
+        id: 'select-input-with-error',
+        optional: true,
+        validationError: 'There was an error',
+        options: [
+          {
+            labelText: 'Option 1',
+            value: 'option-1',
+          },
+          {
+            labelText: 'Option 2',
+            value: 'option-2',
+          },
+          {
+            labelText: 'Option 3',
+            value: 'option-3',
+          },
+        ],
+      },
+    },
   ],
 };

package/src/components/inputs/single-checkbox/README.md

@@ -64,5 +64,6 @@ This input relies entirely on the browser standard checkbox input and applies th
 ```
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon (label)
+  errorIcon: default is 'Error', // visually hidden text for the error icon
 }
 ```

package/src/components/inputs/single-checkbox/_template.njk

@@ -23,10 +23,24 @@
   {%- set isSelected = true -%}
 {%- endif -%}
 
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if helpTextId or validationErrorId or params.describedBy %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId, params.describedBy] | join(' ') | trim %}
+{% endif %}
+
 <div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" data-test="checkbox{% if params.id %}-{{params.id}}{% endif %}">
 {{- MdsInputMessages({
     id: params.id,
+    helpTextId: helpTextId,
     helpText: params.helpText,
+    validationErrorId: validationErrorId,
     validationError: params.validationError
   }) -}}
   <div class="mds-form-check-container">
@@ -35,7 +49,7 @@
       disabled: params.disabled,
       isSelected: isSelected,
       labelText: options.labelText,
-      describedBy: params.describedBy,
+      describedBy: ariaDescribedBy,
       optional: params.optional,
       name: name,
       id: id,
@@ -44,4 +58,4 @@
     }) -}}
     </div>
   </div>
-</div>
+</div>

package/src/components/inputs/single-checkbox/single-checkbox.config.js

@@ -42,5 +42,20 @@ module.exports = {
         ],
       },
     },
+    {
+      name: 'Checkbox with validation error',
+      context: {
+        id: 'error',
+        validationError: 'There was an error',
+        describedBy: 'topcv-example',
+        options: [
+          {
+            labelText: 'Please tick here to receive a free CV review from TopCV',
+            value: 'data-yes',
+            id: 'data-error',
+          },
+        ],
+      },
+    },
   ],
 };

package/src/components/inputs/single-checkbox/single-checkbox.njk

@@ -36,27 +36,35 @@
             disabled: {{disabled or false}},
             isChecked: false,
             helpText: "{{helpText or ''}}",
+            error: {{state === 'error'}},
             validationError: "{{validationError or ''}}",
-            error: {{state === 'error'}}
-            
+            describedBy: "{{describedBy or ''}}"
           };
         },
+        methods: {
+          createDescribedBy(ids) {
+            return [this.describedBy, ...ids].filter(id => !!id).join(' ');
+          }
+        },
         template: `<div>
           <MdsFormItem :error="error">
             <template v-if="validationError" #error>{{validationError}}</template>
             <template v-if="helpText" #help>{{helpText}}</template>
-            <MdsSingleCheckbox
-              id="{{id}}-vue-version"
-              name="{{name}}"
-              describedBy="{{describedBy}}"
-              classes="{{classes}}"
-              state="{{state}}"
-              :value="option.value"
-              v-model="isChecked"
-              :disabled="disabled"
-              :optional="optional"
-              :i18n="i18n" >{{option.labelText | safe}}</MdsSingleCheckbox>
-            </MdsFormItem>
+            <template #default="slotProps">
+              <MdsSingleCheckbox
+                id="{{id}}-vue-version"
+                name="{{name}}"
+                :describedBy="createDescribedBy([slotProps.errorMessageId, slotProps.helpMessageId])"
+                classes="{{classes}}"
+                state="{{state}}"
+                :value="option.value"
+                v-model="isChecked"
+                :disabled="disabled"
+                :optional="optional"
+                :i18n="i18n" >{{option.labelText | safe}}
+              </MdsSingleCheckbox>
+            </template>
+          </MdsFormItem>
         </div>`
 
       }).use(MdsLibrary).mount('#vue-{{id}}');
@@ -64,5 +72,9 @@
 
 </div>
 
+{% if id === "error" %}
+  <div id="topcv-example">Learn more about TopCV.</div>
+{% endif %}
+
 
 <div style="margin-bottom:40px"></div>

package/src/components/inputs/text-editor/README.md

@@ -30,6 +30,7 @@ Buttons currently available:
 ```
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon
+  errorIcon: default is 'Error', // visually hidden text for the error icon
   toolbarLabel: 'Text formatting', // label for the toolbar explaining what the toolbar is about (default: Text formatting)
 }
 ```

package/src/components/inputs/text-editor/_template.njk

@@ -2,6 +2,18 @@
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 {% from "../../icons/_macro.njk" import MdsIcon %}
 
+{% if params.helpText %}
+  {% set helpTextId = [params.id, '-help-text'] | join %}
+{% endif %}
+
+{% if params.validationError %}
+  {% set validationErrorId = [params.id, '-validation-error'] | join %}
+{% endif %}
+
+{% if helpTextId or validationErrorId %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId] | join(' ') | trim %}
+{% endif %}
+
 <div class="mds-form-element mds-form-element--text-editor{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="text-editor{% if params.id %}-{{params.id}}{% endif %}">
   {{ MdsInputLabel({
     id: "text-editor-label-" + params.id,
@@ -14,7 +26,9 @@
   }) }}
   {{ MdsInputMessages({
     id: params.id,
+    helpTextId: helpTextId,
     helpText: params.helpText,
+    validationErrorId: validationErrorId,
     validationError: params.validationError
   }) }}
   <textarea
@@ -24,6 +38,9 @@
       {%- if params.validationError %}
         aria-invalid="true"
       {% endif -%}
+      {% if ariaDescribedBy %}
+        aria-describedby="{{ariaDescribedBy}}"
+      {% endif %}
     >{#
       #}{% if params.value %}{{params.value}}{% endif %}{#
     #}</textarea>
@@ -33,6 +50,7 @@
       iconpath="{{ defaultIconPath }}"
       {%- if params.menuButtons %} menu-buttons="{{ params.menuButtons | dump }}"{% endif -%}
       {%- if params.i18n %} i18n="{{ params.i18n | dump }}"{% endif -%}
-      {%- if params.value %} value="{{ params.value }}"{% endif -%}>
+      {%- if params.value %} value="{{ params.value }}"{% endif -%}
+      {% if ariaDescribedBy %} describedby-id="{{ariaDescribedBy}}"{% endif -%}>
     </mds-text-editor>
 </div>

package/src/components/inputs/textarea/README.md

@@ -19,6 +19,7 @@
 ```
 i18n: {
   requiredIcon: 'required', // visually hidden text for the required icon (label)
+  errorIcon: default is 'Error', // visually hidden text for the error icon
   characterCountText: '<span class="js-character-count-number">[maxlength]</span> characters remaining' (use with the maxlength parameter)
 }
 ```

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"