@tsed/tailwind-formio 1.11.1 → 1.13.0

package/src/templates/tailwind/builderComponent/form.ejs

@@ -1,22 +1,58 @@
 <div class="builder-component" ref="dragComponent">
   {% if (!ctx.disableBuilderActions) { %}
     <div class="component-btn-group" data-noattach="true">
-      <button class="btn btn-xxs btn-danger component-settings-button component-settings-button-remove" ref="removeComponent">
+      <button
+        role="button"
+        aria-label="Remove button. Click to remove component from the form"
+        tabindex="-1"
+        class="btn btn-xxs btn-danger component-settings-button component-settings-button-remove"
+        ref="removeComponent"
+      >
         <i class="{{ctx.iconClass('remove')}}"></i>
       </button>
-      <button class="btn btn-xxs btn-default component-settings-button component-settings-button-copy" ref="copyComponent">
+      <button
+        role="button"
+        aria-label="Copy button. Click to copy component"
+        tabindex="-1"
+        class="btn btn-xxs btn-default component-settings-button component-settings-button-copy"
+        ref="copyComponent"
+      >
         <i class="{{ctx.iconClass('copy')}}"></i>
       </button>
-      <button class="btn btn-xxs btn-default component-settings-button component-settings-button-paste" ref="pasteComponent">
+      <button
+        role="button"
+        aria-label="Paste below button. Click to paste component below the current component"
+        tabindex="-1"
+        class="btn btn-xxs btn-default component-settings-button component-settings-button-paste"
+        ref="pasteComponent"
+      >
         <i class="{{ctx.iconClass('save')}}"></i>
       </button>
-      <button class="btn btn-xxs btn-default component-settings-button component-settings-button-edit-json" ref="editJson">
+      <button
+        role="button"
+        aria-label="Edit json button. Click to edit json of the current component"
+        tabindex="-1"
+        class="btn btn-xxs btn-default component-settings-button component-settings-button-edit-json"
+        ref="editJson"
+      >
         <i class="{{ctx.iconClass('wrench')}}"></i>
       </button>
-      <button class="btn btn-xxs btn-default component-settings-button component-settings-button-move" ref="moveComponent">
+      <button
+        role="button"
+        aria-label="Move button"
+        tabindex="-1"
+        class="btn btn-xxs btn-default component-settings-button component-settings-button-move"
+        ref="moveComponent"
+      >
         <i class="{{ctx.iconClass('move')}}"></i>
       </button>
-      <button class="btn btn-xxs btn-secondary component-settings-button component-settings-button-edit", ref="editComponent">
+      <button
+        role="button"
+        aria-label="Edit button. Click to open component settings modal window"
+        tabindex="-1"
+        class="btn btn-xxs btn-secondary component-settings-button component-settings-button-edit"
+        ref="editComponent"
+      >
         <i class="{{ctx.iconClass('cog')}}"></i>
       </button>
     </div>

package/src/templates/tailwind/builderEditForm/form.ejs

@@ -1,58 +1,62 @@
 <div class="flex flex-col w-full h-full">
-    <div>
-        <div class="grid grid-cols-12 gap-4">
-            <div class="col-span-6">
-                <div class="text-md px-3 py-3">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('Component')}}</div>
-            </div>
-            {% if (ctx.helplinks) { %}
-            <div class="col-span-6 flex justify-end items-center pr-15">
-                <a class="reset-link inline-flex items-center text-secondary text-decoration-none hover:text-primary" href="{{ctx.t(ctx.helplinks + ctx.componentInfo.documentation)}}" target="_blank">
-                    <i class="{{ctx.iconClass('new-window')}} mr-1"></i> {{ctx.t('Help')}}
-                </a>
-            </div>
-            {% } %}
+  <div>
+    <div class="grid grid-cols-12 gap-4">
+      <div class="col-span-6">
+        <div class="text-md px-3 py-3">
+          {{ctx.t(ctx.componentInfo.title, { _userInput: true })}}
+          {{ctx.t('Component')}}
         </div>
+      </div>
+      {% if (ctx.helplinks) { %}
+      <div class="col-span-6 flex justify-end items-center pr-15">
+        <a class="reset-link inline-flex items-center text-secondary text-decoration-none hover:text-primary"
+           href="{{ctx.t(ctx.helplinks + ctx.componentInfo.documentation)}}" target="_blank">
+          <i class="{{ctx.iconClass('new-window')}} mr-1"></i> {{ctx.t('Help')}}
+        </a>
+      </div>
+      {% } %}
     </div>
-    <div class="overflow-auto flex-1 p-3 pt-0" style="max-height: calc(90vh - 95px)">
-        <div class="grid grid-cols-12 gap-4">
-            <div class="{% if (ctx.preview) { %}col-span-12 sm:col-span-6{% } else { %}col-span-12{% } %}">
-                <div ref="editForm">
-                    {{ctx.editForm}}
-                </div>
-            </div>
-            {% if (ctx.preview) { %}
-            <div class="col-span-12 sm:col-span-6">
-                <div class="card panel preview-panel">
-                    <div class="card-header">
-                        <div class="text-sm">{{ctx.t('Preview')}}</div>
-                    </div>
-                    <div class="card-body">
-                        <div class="component-preview" ref="preview">
-                            {{ctx.preview}}
-                        </div>
-                    </div>
-                </div>
-                {% if (ctx.componentInfo.help) { %}
-                <div class="card card-body bg-light formio-settings-help">
-                    {{ ctx.t(ctx.componentInfo.help) }}
-                </div>
-                {% } %}
+  </div>
+  <div class="overflow-auto flex-1 p-3 pt-0" style="max-height: calc(90vh - 95px)">
+    <div class="grid grid-cols-12 gap-4">
+      <div class="{% if (ctx.preview) { %}col-span-12 sm:col-span-6{% } else { %}col-span-12{% } %}">
+        <div ref="editForm">
+          {{ctx.editForm}}
+        </div>
+      </div>
+      {% if (ctx.preview) { %}
+      <div class="col-span-12 sm:col-span-6">
+        <div class="card panel preview-panel">
+          <div class="card-header">
+            <div class="text-sm">{{ctx.t('Preview')}}</div>
+          </div>
+          <div class="card-body">
+            <div class="component-preview" ref="preview">
+              {{ctx.preview}}
             </div>
-            {% } %}
+          </div>
         </div>
+        {% if (ctx.componentInfo.help) { %}
+        <div class="card card-body bg-light formio-settings-help">
+          {{ ctx.t(ctx.componentInfo.help) }}
+        </div>
+        {% } %}
+      </div>
+      {% } %}
     </div>
-    <div class="bg-white p-2 flex justify-center">
-        <button class="btn btn-primary mx-2" ref="saveButton">
-            {{ctx.t('Save')}}
-        </button>
-        <button class="btn btn-dark mx-2" ref="cancelButton">
-            {{ctx.t('Cancel')}}
-        </button>
-        <button class="btn btn-danger mx-2" ref="removeButton">
-            <i class="{{ctx.iconClass('remove')}} sm:mr-2"></i>
-            <span class="hidden sm:inline">{{ctx.t('Remove')}}</span>
-        </button>
-    </div>
+  </div>
+  <div class="bg-white p-2 flex justify-center">
+    <button class="btn btn-primary mx-2" ref="saveButton">
+      {{ctx.t('Save')}}
+    </button>
+    <button class="btn btn-dark mx-2" ref="cancelButton">
+      {{ctx.t('Cancel')}}
+    </button>
+    <button class="btn btn-danger mx-2" ref="removeButton">
+      <i class="{{ctx.iconClass('remove')}} sm:mr-2"></i>
+      <span class="hidden sm:inline">{{ctx.t('Remove')}}</span>
+    </button>
+  </div>
 </div>
 
 

package/src/templates/tailwind/builderSidebarGroup/form.ejs

@@ -26,7 +26,7 @@
     <div id="group-container-{{ctx.groupKey}}" class="card-body no-drop p-2" ref="sidebar-container">
       {% if (ctx.group.componentOrder.length || ctx.subgroups.length) { %}
         {% !ctx.group.componentOrder || ctx.group.componentOrder.forEach(function(componentKey) { %}
-          <button
+          <span
             data-group="{{ctx.groupKey}}"
             data-key="{{ctx.group.components[componentKey].key}}"
             data-type="{{ctx.group.components[componentKey].schema.type}}"
@@ -35,8 +35,8 @@
             {% if (ctx.group.components[componentKey].icon) { %}
               <i class="{{ctx.iconClass(ctx.group.components[componentKey].icon)}}" style="margin-right: 5px;"></i>
             {% } %}
-            {{ctx.t(ctx.group.components[componentKey].title)}}
-          </button>
+            {{ctx.t(ctx.group.components[componentKey].title, { _userInput: true })}}
+          </span>
         {% }) %}
         {{ctx.subgroups.join('')}}
       {% } else { %}

package/src/templates/tailwind/button/form.ejs

@@ -3,13 +3,16 @@
   {% for (var attr in ctx.input.attr) { %}
   {{attr}}="{{ctx.input.attr[attr]}}"
   {% } %}
+  {% if (ctx.component.description) { %}
+    aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {% } %}
 >
-{% if (ctx.component.leftIcon) { %}<span class="{{ctx.component.leftIcon}}"></span>{% } %}
+{% if (ctx.component.leftIcon) { %}<span class="{{ctx.component.leftIcon}}"></span>&nbsp;{% } %}
 {% if (ctx.input.content) { %}<span>{{ctx.input.content}}</span> {% } %}
 {% if (ctx.component.tooltip) { %}
-  <i ref="tooltip" class="{{ctx.iconClass('question-sign')}}"></i>
+  <i ref="tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{ctx.component.tooltip}}"></i>
 {% } %}
-{% if (ctx.component.rightIcon) { %}<span class="{{ctx.component.rightIcon}}"></span>{% } %}
+{% if (ctx.component.rightIcon) { %}&nbsp;<span class="{{ctx.component.rightIcon}}"></span>{% } %}
 </{{ctx.input.type}}>
 <div ref="buttonMessageContainer">
   <span class="help-block" ref="buttonMessage"></span>

package/src/templates/tailwind/checkbox/form.ejs

@@ -6,10 +6,14 @@
       {{attr}}="{{ctx.input.attr[attr]}}"
       {% } %}
       {% if (ctx.checked) { %}checked=true{% } %}
+      aria-required="{{ctx.component.validate.required}}"
+      {% if (ctx.component.description) { %}
+      aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
+      {% } %}
       >
     {% if (!ctx.self.labelIsHidden()) { %}<span>{{ctx.input.label}}</span>{% } %}
     {% if (ctx.component.tooltip) { %}
-      <i ref="tooltip" class="{{ctx.iconClass('question-sign')}}" data-tooltip="{{ctx.component.tooltip}}"></i>
+      <i ref="tooltip" tabindex="0" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{ctx.component.tooltip}}"></i>
     {% } %}
     {{ctx.input.content}}
     </{{ctx.input.type}}>

package/src/templates/tailwind/columns/form.ejs

@@ -1,6 +1,6 @@
 {% ctx.component.columns.forEach(function(column, index) { %}
 <div class="
-    col-{{column.size}}-{{column.width}}
+    col-{{column.size}}-{{column.currentWidth || column.width}}
     col-{{column.size}}-offset-{{column.offset}}
     col-{{column.size}}-push-{{column.push}}
     col-{{column.size}}-pull-{{column.pull}}

package/src/templates/tailwind/componentModal/form.ejs

@@ -2,16 +2,25 @@
   <div ref="openModalWrapper"></div>
   <div class="formio-dialog formio-dialog-theme-default component-rendering-hidden" ref="modalWrapper">
     <div class="formio-dialog-overlay" ref="modalOverlay"></div>
-    <div class="formio-dialog-content" ref="modalContents">
+    <div class="formio-dialog-content" aria-labelledby="ml-{{ctx.instance.id}}-{{ctx.component.key}}" {% if (!ctx.self.isIE()) { %} role="dialog" {% } %} ref="modalContents">
+      <label class="sr-only" id="ml-{{ctx.instance.id}}-{{ctx.component.key}}">{{ ctx.t(ctx.component.label) }}{{ctx.self.isIE() ? ', dialog' : ''}}</label>
+      {% if (ctx.options.vpat) { %}
+      <button class="formio-dialog-close float-right" title="Close" aria-label="Close button. Click to get back to the form" ref="modalCloseButton"></button>
+      {% } else { %}
+      <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="Close button. Click to get back to the form" ref="modalClose"></button>
+      {% } %}
       <div ref="modalContents">
         {% if (ctx.visible) { %}
         {{ctx.children}}
         {% } %}
         <div class="formio-dialog-buttons">
-          <button class="btn btn-success formio-dialog-button" ref="modalSave">{{ctx.t('Save')}}</button>
+          {% if (ctx.options.vpat) { %}
+          <button class="btn btn-secondary formio-dialog-button" aria-label="Cancel button. Click to cancel the changes and get back to the form." ref="modalClose">{{ctx.t('Cancel')}}</button>
+          {% } %}
+          <button class="btn btn-success formio-dialog-button" ref="modalSave" aria-label="Save button. Click to save the changes and get back to the form.">{{ctx.t('Save')}}</button>
         </div>
       </div>
-      <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="close" ref="modalClose"></button>
     </div>
+    <span class="sr-only" ref="modalLiveRegion" aria-live="assertive"></span>
   </div>
 </div>

package/src/templates/tailwind/datagrid/form.ejs

@@ -9,15 +9,16 @@
       {% if (ctx.component.reorder) { %}<th></th>{% } %}
       {% ctx.columns.forEach(function(col) { %}
         <th class="{{col.validate && col.validate.required ? 'field-required' : ''}}">
-          {{ col.hideLabel ? '' : ctx.t(col.label || col.title) }}
-          {% if (col.tooltip) { %} <i ref="tooltip" data-title="{{col.tooltip}}" class="{{ctx.iconClass('question-sign')}}" data-tooltip="{{col.tooltip}}"></i>{% } %}
+          {{ col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) }}
+          {% if (col.tooltip) { %} <i ref="tooltip" tabindex="0" data-title="{{col.tooltip}}" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{col.tooltip}}"></i>{% } %}
         </th>
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
       <th>
+        <span class="sr-only">{{ ctx.t('Add/Remove') }}</span>
         {% if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { %}
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow" tabindex="{{ctx.tabIndex}}">
-          <i class="{{ctx.iconClass('plus')}} mr-1"></i>{{ctx.t(ctx.component.addAnother || 'Add Another')}}
+          <i class="{{ctx.iconClass('plus')}}"></i>{{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
         </button>
         {% } %}
       </th>
@@ -25,7 +26,7 @@
     </tr>
   </thead>
   {% } %}
-  <tbody ref="{{ctx.datagridKey}}-tbody">
+  <tbody ref="{{ctx.datagridKey}}-tbody" data-key="{{ctx.datagridKey}}">
     {% ctx.rows.forEach(function(row, index) { %}
     {% if (ctx.hasGroups && ctx.groups[index]) { %}
     <tr ref="{{ctx.datagridKey}}-group-header" class="datagrid-group-header{{ctx.hasToggle ? ' clickable' : ''}}">
@@ -37,19 +38,19 @@
     {% } %}
     <tr ref="{{ctx.datagridKey}}-row">
       {% if (ctx.component.reorder) { %}
-        <td>
-          <button type="button" class="formio-drag-button btn btn-default fa fa-bars"></button>
+        <td class="align-middle">
+          <button type="button" class="formio-drag-button btn btn-sm btn-light {{ctx.iconClass('bars')}}" data-key="{{ctx.datagridKey}}"></button>
         </td>
       {% } %}
       {% ctx.columns.forEach(function(col) { %}
-        <td ref="{{ctx.datagridKey}}">
+        <td ref="{{ctx.datagridKey}}" {% if (col.key && col.overlay && col.overlay.width) { %} style="width: {{col.overlay.width + 'px'}}"{% } %} >
           {{row[col.key]}}
         </td>
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
-        {% if (!ctx.builder && ctx.hasRemoveButtons) { %}
-        <td>
-          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}">
+        {% if (ctx.hasRemoveButtons) { %}
+        <td class="align-middle">
+          <button type="button" class="btn btn-light btn-sm formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}">
             <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
@@ -66,9 +67,9 @@
   {% if (!ctx.builder && ctx.hasAddButton && ctx.hasBottomSubmit) { %}
   <tfoot>
     <tr>
-      <td colspan="{{ctx.numColumns + 1}}">
+      <td colspan="{{ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1}}">
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow" tabindex="{{ctx.tabIndex}}">
-          <i class="{{ctx.iconClass('plus')}} mr-1"></i> {{ctx.t(ctx.component.addAnother || 'Add Another')}}
+          <i class="{{ctx.iconClass('plus')}} mr-1"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
         </button>
       </td>
     </tr>

package/src/templates/tailwind/datagrid/html.ejs

@@ -8,8 +8,8 @@
     <tr>
       {% ctx.columns.forEach(function(col) { %}
         <th class="{{col.validate && col.validate.required ? 'field-required' : ''}}">
-          {{ col.hideLabel ? '' : ctx.t(col.label || col.title) }}
-          {% if (col.tooltip) { %} <i ref="tooltip" data-title="{{col.tooltip}}" class="{{ctx.iconClass('question-sign')}}" data-tooltip="{{col.tooltip}}"></i>{% } %}
+          {{ col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) }}
+          {% if (col.tooltip) { %} <i ref="tooltip" tabindex="0" data-title="{{col.tooltip}}" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{col.tooltip}}"></i>{% } %}
         </th>
       {% }) %}
     </tr>

package/src/templates/tailwind/day/form.ejs

@@ -1,4 +1,13 @@
-<div class="grid grid-cols-12 gap-4">
+<div class="grid grid-cols-12 gap-4"
+  {% if (ctx.component.hideLabel) { %}
+  aria-label="{{ctx.component.label}}"
+  {% } else { %}
+  aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {% } %}
+  {% if (ctx.component.description) { %}
+  aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {% } %}
+  >
   {% if (ctx.dayFirst && ctx.showDay) { %}
   <div class="col-span-3">
     {% if (!ctx.component.hideInputLabels) { %}

package/src/templates/tailwind/dialog/form.ejs

@@ -1,7 +1,7 @@
 <div class="formio-dialog formio-dialog-theme-default component-settings">
   <div class="formio-dialog-overlay" ref="dialogOverlay"></div>
-  <div class="formio-dialog-content" ref="dialogContents">
+  <div class="formio-dialog-content" ref="dialogContents" role="dialog">
     <div ref="dialogContents"></div>
-    <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="close" ref="dialogClose"></button>
+    <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="Close modal window." ref="dialogClose"></button>
   </div>
 </div>

package/src/templates/tailwind/editgrid/form.ejs

@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save')}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel')}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
       {% } %}
     </div>
     {% } %}
@@ -35,6 +35,6 @@
 </ul>
 {% if (!ctx.readOnly && ctx.hasAddButton) { %}
 <button class="btn btn-primary" ref="{{ctx.ref.addRow}}">
-  <i class="{{ctx.iconClass('plus')}} mr-1"></i> {{ctx.t(ctx.component.addAnother || 'Add Another')}}
+  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
 </button>
 {% } %}

package/src/templates/tailwind/editgrid/html.ejs

@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save')}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel')}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
       {% } %}
     </div>
     {% } %}

package/src/templates/tailwind/editgridTable/form.ejs

@@ -0,0 +1,55 @@
+<div class="editgrid-table-container">
+  <div class="table-responsive">
+    <table class="table
+      {{ ctx.component.striped ? 'table-striped' : ''}}
+      {{ ctx.component.bordered ? 'table-bordered' : ''}}
+      {{ ctx.component.hover ? 'table-hover' : ''}}
+      {{ ctx.component.condensed ? 'table-sm' : ''}}
+    ">
+      {% if (ctx.header) { %}
+      <thead class="editgrid-table-head">
+        {{ctx.header}}
+      </thead>
+      {% } %}
+      <tbody class="editgrid-table-body">
+        {% ctx.rows.forEach(function(row, rowIndex) { %}
+        <tr ref="{{ctx.ref.row}}">
+          {{row}}
+          {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
+            <td class="editgrid-table-column">
+              <div class="editgrid-actions">
+                <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+                {% if (ctx.component.removeRow) { %}
+                <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+                {% } %}
+              </div>
+            </td>
+          {% } %}
+          {% if (ctx.errors[rowIndex]) { %}
+          <td class="editgrid-table-column">
+            <div class="has-error">
+              <div class="editgrid-row-error help-block">
+                {{ctx.errors[rowIndex]}}
+              </div>
+            </div>
+          </td>
+          {% } %}
+        </tr>
+        {% }) %}
+      </tbody>
+      {% if (ctx.footer) { %}
+      <tfoot>
+        <tr>
+          {{ctx.footer}}
+        </tr>
+      <tfoot>
+      {% } %}
+    </table>
+  </div>
+</div>
+{% if (!ctx.readOnly && ctx.hasAddButton) { %}
+<button class="btn btn-primary" ref="{{ctx.ref.addRow}}">
+  <i class="{{ctx.iconClass('plus')}}"></i>
+  {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+</button>
+{% } %}

package/src/templates/tailwind/editgridTable/html.ejs

@@ -0,0 +1,49 @@
+<div class="editgrid-table-container">
+  <div class="table-responsive">
+    <table class="table
+      {{ ctx.component.striped ? 'table-striped' : ''}}
+      {{ ctx.component.bordered ? 'table-bordered' : ''}}
+      {{ ctx.component.hover ? 'table-hover' : ''}}
+      {{ ctx.component.condensed ? 'table-sm' : ''}}
+    ">
+      {% if (ctx.header) { %}
+      <thead class="editgrid-table-head">
+        {{ctx.header}}
+      </thead>
+      {% } %}
+      <tbody class="editgrid-table-body">
+        {% ctx.rows.forEach(function(row, rowIndex) { %}
+        <tr ref="{{ctx.ref.row}}">
+          {{row}}
+          {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
+          <td class="editgrid-table-column">
+            <div class="editgrid-actions">
+              <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+              {% if (ctx.component.removeRow) { %}
+              <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+              {% } %}
+            </div>
+          </td>
+          {% } %}
+          {% if (ctx.errors[rowIndex]) { %}
+          <td class="editgrid-table-column">
+            <div class="has-error">
+              <div class="editgrid-row-error help-block">
+                {{ctx.errors[rowIndex]}}
+              </div>
+            </div>
+          </td>
+          {% } %}
+        </tr>
+        {% }) %}
+      </tbody>
+      {% if (ctx.footer) { %}
+      <tfoot>
+        <tr>
+          {{ctx.footer}}
+         </tr>
+      <tfoot>
+      {% } %}
+    </table>
+  </div>
+</div>

package/src/templates/tailwind/editgridTable/index.ts

@@ -0,0 +1,4 @@
+import form from "./form.ejs";
+import html from "./html.ejs";
+
+export default { form, html };

package/src/templates/tailwind/errorsList/form.ejs

@@ -0,0 +1,19 @@
+<p>{{ctx.t('error')}}
+  {% if (ctx.options.vpat) { %}
+  <span ref="errorTooltip" class="{{ctx.iconClass('question-sign')}}" tabindex="0"></span>
+  {% } %}
+</p>
+<ul>
+  {% ctx.errors.forEach(function(err) { %}
+  <li>
+    <span
+      data-component-key = "{{err.keyOrPath}}"
+      ref = "errorRef"
+      tabIndex = "0"
+      role="link"
+    >
+      {{err.message}}
+    </span>
+  </li>
+  {% }) %}
+</ul>

package/src/templates/tailwind/errorsList/index.ts

@@ -0,0 +1,3 @@
+import form from "./form.ejs";
+
+export default { form };

package/src/templates/tailwind/field/align.ejs

@@ -22,5 +22,5 @@
 </div>
 
 {% if (ctx.component.description) { %}
-  <div class="form-text text-muted">{{ctx.t(ctx.component.description)}}</div>
+  <div class="form-text text-muted">{{ctx.t(ctx.component.description, { _userInput: true })}}</div>
 {% } %}

package/src/templates/tailwind/field/form.ejs

@@ -12,5 +12,5 @@
   {{ ctx.labelMarkup }}
 {% } %}
 {% if (ctx.component.description) { %}
-  <div class="form-text text-muted">{{ctx.t(ctx.component.description)}}</div>
+  <div id="d-{{ctx.instance.id}}-{{ctx.component.key}}" class="form-text text-muted">{{ctx.t(ctx.component.description, { _userInput: true })}}</div>
 {% } %}

package/src/templates/tailwind/fieldset/form.ejs

@@ -1,9 +1,9 @@
-<fieldset class="mb-5 mt-5">
+<fieldset>
   {% if (ctx.component.legend) { %}
-  <legend class="text-lg border-b-1 border-solid border-gray-300 w-full mb-3 pb-1" ref="header" class="{{ctx.component.collapsible ? 'formio-clickable' : ''}}">
-    {{ctx.t(ctx.component.legend)}}
+  <legend ref="header" class="{{ctx.component.collapsible ? 'formio-clickable' : ''}}">
+    {{ctx.t(ctx.component.legend, { _userInput: true })}}
     {% if (ctx.component.tooltip) { %}
-      <i ref="tooltip" class="{{ctx.iconClass('question-sign')}}" data-tooltip="{{ctx.component.tooltip}}"></i>
+      <i ref="tooltip" tabindex="0" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{ctx.component.tooltip}}"></i>
     {% } %}
   </legend>
   {% } %}
@@ -13,3 +13,4 @@
   </div>
   {% } %}
 </fieldset>
+