@tsed/tailwind-formio 1.11.0 → 1.12.0

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

@@ -1,4 +1,10 @@
+{% if (ctx.options.vpat) { %}
+  <span tabindex="-1" class="sr-only" id="invisible-{{ctx.instance.id}}-{{ctx.component.key}}"></span>
+{% } %}
 {% if (!ctx.self.imageUpload) { %}
+  {% if (ctx.options.vpat) { %}
+    <div>{{(!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern}}</div>
+  {% } %}
   <ul class="list-group list-group-striped">
     <li class="list-group-item list-group-header hidden-xs hidden-sm">
       <div class="grid grid-cols-12 gap-4">
@@ -16,13 +22,15 @@
       <li class="list-group-item">
         <div class="grid grid-cols-12 gap-4">
           {% if (!ctx.disabled) { %}
-            <div class="md:col-span-1"><i class="{{ctx.iconClass('remove')}}" ref="removeLink"></i></div>
+            <div class="md:col-span-1"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="removeLink"></i></div>
           {% } %}
           <div class="md:col-span-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}">
             {% if (ctx.component.uploadOnly) { %}
               {{file.originalName || file.name}}
             {% } else { %}
-              <a href="{{file.url || '#'}}" target="_blank" ref="fileLink">{{file.originalName || file.name}}</a>
+              <a href="{{file.url || '#'}}" target="_blank" ref="fileLink">
+                <span class="sr-only">{{ctx.t('Press to open ')}}</span>{{file.originalName || file.name}}
+              </a>
             {% } %}
           </div>
           <div class="md:col-span-2">{{ctx.fileSize(file.size)}}</div>
@@ -30,7 +38,7 @@
             <div class="md:col-span-2">
               <select class="file-type" ref="fileType">
                 {% ctx.component.fileTypes.map(function(type) { %}
-                  <option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ type.label }}</option>
+                  <option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
                 {% }); %}
               </select>
             </div>
@@ -49,7 +57,7 @@
         <span>
           <img ref="fileImage" src="" alt="{{file.originalName || file.name}}" style="width:{{ctx.component.imageSize}}px">
           {% if (!ctx.disabled) { %}
-            <i class="{{ctx.iconClass('remove')}}" ref="removeLink"></i>
+            <i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="removeLink"></i>
           {% } %}
         </span>
       </div>
@@ -63,16 +71,27 @@
       <button class="btn btn-primary" ref="cameraButton"><i class="fa fa-camera"></i> {{ctx.t('Camera')}}</button>
     </div>
   {% } else if (!ctx.self.cameraMode) { %}
-    <div class="fileSelector" ref="fileDrop" {{ctx.fileDropHidden ? 'hidden' : ''}}>
+    <div class="fileSelector" ref="fileDrop" {{ctx.fileDropHidden ?'hidden' : ''}}>
       <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('Drop files to attach,')}}
-        {% if (ctx.self.imageUpload) { %}
-          <a href="#" ref="toggleCameraMode"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('Use Camera,')}}</a>
+        {% if (ctx.self.imageUpload && ctx.component.webcam) { %}
+          <a href="#" ref="toggleCameraMode"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('use camera')}}</a>
         {% } %}
-        {{ctx.t('or')}} <a href="#" ref="fileBrowse" class="browse">{{ctx.t('browse')}}</a>
+        {{ctx.t('or')}}
+        <a href="#" ref="fileBrowse" class="browse">
+          {{ctx.t('browse')}}
+          <span class="sr-only">
+            {{ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +
+            (ctx.component.description ? ctx.component.description + '. ' : '') +
+            ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern))}}
+          </span>
+        </a>
+      <div ref="fileProcessingLoader" class="loader-wrapper">
+        <div class="loader text-center"></div>
+      </div>
     </div>
   {% } else { %}
-    <div>
-      <video class="video" autoplay="true" ref="videoPlayer"></video>
+    <div class="video-container">
+      <video class="video" autoplay="true" ref="videoPlayer" tabindex="-1"></video>
     </div>
     <button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> {{ctx.t('Take Picture')}}</button>
     <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('Switch to file upload')}}</button>
@@ -81,7 +100,12 @@
 {% ctx.statuses.forEach(function(status) { %}
   <div class="file {{ctx.statuses.status === 'error' ? ' has-error' : ''}}">
     <div class="grid grid-cols-12 gap-4">
-      <div class="fileName col-form-label sm:col-span-10">{{status.originalName}} <i class="{{ctx.iconClass('remove')}}" ref="fileStatusRemove"></i></div>
+      <div class="fileName col-form-label sm:col-span-10">{{status.originalName}}
+        <i class="{{ctx.iconClass('remove')}}" ref="fileStatusRemove">
+          <span class="sr-only">{{ctx.t('Remove button. Press to remove ' + status.originalName || status.name + '.')}}</span>
+          <span class="sr-only">{{status.message ? status.message.replace(';', '.') : ''}}</span>
+        </i>
+      </div>
       <div class="fileSize col-form-label sm:col-span-2 text-right">{{ctx.fileSize(status.size)}}</div>
     </div>
     <div class="grid grid-cols-12 gap-4">

package/src/templates/tailwind/iconClass.ts

@@ -48,14 +48,11 @@ export const ICONS = {
   cubes: "bxs-cube",
   stop: "bx-stop",
   "check-square": "bx-checkbox-checked",
-  "remove-circle": "bx-x-circle"
+  "remove-circle": "bx-x",
+  bars: "bx-menu"
 };
 
-export default (
-  iconset: string | undefined,
-  name: string,
-  spinning?: boolean
-) => {
+export default (iconset: string | undefined, name: string, spinning?: boolean) => {
   if (iconset === "bx") {
     if (ICONS[name]) {
       name = ICONS[name];

package/src/templates/tailwind/index.ts

@@ -13,11 +13,13 @@ import columns from "./columns";
 import component from "./component";
 import componentModal from "./componentModal";
 import components from "./components";
+import tableComponents from "./tableComponents";
 import container from "./container";
 import datagrid from "./datagrid";
 import day from "./day";
 import dialog from "./dialog";
 import editgrid from "./editgrid";
+import editgridTable from "./editgridTable";
 import field from "./field";
 import fieldset from "./fieldset";
 import file from "./file";
@@ -54,8 +56,12 @@ import webform from "./webform";
 import well from "./well";
 import wizard from "./wizard";
 import wizardHeader from "./wizardHeader";
+import wizardHeaderClassic from "./wizardHeaderClassic";
+import wizardHeaderVertical from "./wizardHeaderVertical";
 import wizardNav from "./wizardNav";
 import cssClasses from "./cssClasses";
+import errorsList from "./errorsList";
+import alert from "./alert";
 
 export default {
   transform(type: string, text: string) {
@@ -65,9 +71,7 @@ export default {
     switch (type) {
       case "class":
         // eslint-disable-next-line no-prototype-builtins
-        return this.cssClasses.hasOwnProperty(text.toString())
-          ? this.cssClasses[text.toString()]
-          : text;
+        return this.cssClasses.hasOwnProperty(text.toString()) ? this.cssClasses[text.toString()] : text;
     }
     return text;
   },
@@ -89,11 +93,13 @@ export default {
   component,
   componentModal,
   components,
+  tableComponents,
   container,
   datagrid,
   day,
   dialog,
   editgrid,
+  editgridTable,
   field,
   fieldset,
   file,
@@ -129,5 +135,9 @@ export default {
   well,
   wizard,
   wizardHeader,
-  wizardNav
+  wizardHeaderClassic,
+  wizardHeaderVertical,
+  wizardNav,
+  errorsList,
+  alert
 };

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

@@ -1,46 +1,59 @@
 {% if (ctx.prefix || ctx.suffix) { %}
 <div class="input-group">
-{% } %}
-{% if (ctx.prefix) { %}
-<div class="input-group-prepend" ref="prefix">
-  <span class="input-group-text">
-    {% if(ctx.prefix instanceof HTMLElement){ %}
-      {{ ctx.t(ctx.prefix.outerHTML) }}
-    {% } else{ %}
-      {{ ctx.t(ctx.prefix) }}
-    {% } %}
-  </span>
-</div>
-{% } %}
-  {% if (!ctx.component.editor && !ctx.component.wysiwyg) { %}
-<{{ctx.input.type}}
-  ref="{{ctx.input.ref ? ctx.input.ref : 'input'}}"
-  {% for (var attr in ctx.input.attr) { %}
-  {{attr}}="{{ctx.input.attr[attr]}}"
   {% } %}
-  id="{{ctx.instance.id}}-{{ctx.component.key}}"
->{{ctx.input.content}}</{{ctx.input.type}}>
+  {% if (ctx.prefix) { %}
+    <div class="input-group-prepend" ref="prefix">
+    <span class="input-group-text">
+      {% if(ctx.prefix instanceof HTMLElement){ %}
+        {{ ctx.t(ctx.prefix.outerHTML, { _userInput: true }) }}
+      {% } else{ %}
+        {{ ctx.t(ctx.prefix, { _userInput: true }) }}
+      {% } %}
+    </span>
+    </div>
+  {% } %}
+  {% if (!ctx.component.editor && !ctx.component.wysiwyg) { %}
+    <{{ctx.input.type}}
+      ref="{{ctx.input.ref ? ctx.input.ref : 'input'}}"
+      {% for (var attr in ctx.input.attr) { %}
+        {{attr}}="{{ctx.input.attr[attr]}}"
+      {% } %}
+      id="{{ctx.instance.id}}-{{ctx.component.key}}"
+      aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}} {% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
+      aria-required="{{ctx.input.ref === 'input' || !ctx.input.ref ? ctx.component.validate.required :
+        ctx.component.fields && ctx.component.fields[ctx.input.ref] && ctx.component.fields[ctx.input.ref].required || false}}"
+    >{{ctx.input.content}}</{{ctx.input.type}}>
+    {% if (ctx.hasValueMaskInput) { %}
+      <input ref="valueMaskInput" />
+    {% } %}
 {% } %}
 {% if (ctx.component.editor || ctx.component.wysiwyg) { %}
-<div ref="input"></div>
-{% } %}
-{% if (ctx.component.showCharCount) { %}
-<span class="text-muted pull-right" ref="charcount"></span>
+  <div ref="input"></div>
 {% } %}
-{% if (ctx.component.showWordCount) { %}
-<span class="text-muted pull-right" ref="wordcount"></span>
+{% if (ctx.component.type === 'datetime') { %}
+<span aria-live="assertive" id="{{ctx.instance.id}}-liveRegion" class="sr-only" ref="liveRegion"></span>
 {% } %}
 {% if (ctx.suffix) { %}
-<div class="input-group-append" ref="suffix">
-  <span class="input-group-text">
-    {% if(ctx.suffix instanceof HTMLElement){ %}
-      {{ ctx.t(ctx.suffix.outerHTML) }}
-    {% } else{ %}
-      {{ ctx.t(ctx.suffix) }}
-    {% } %}
-  </span>
-</div>
+  <div class="input-group-append" ref="suffix">
+    <span class="input-group-text">
+      {% if(ctx.suffix instanceof HTMLElement){ %}
+        {{ ctx.t(ctx.suffix.outerHTML, { _userInput: true }) }}
+      {% } else{ %}
+        {{ ctx.t(ctx.suffix, { _userInput: true }) }}
+      {% } %}
+    </span>
+  </div>
 {% } %}
 {% if (ctx.prefix || ctx.suffix) { %}
+  </div>
+{% } %}
+{% if (ctx.component.showCharCount || ctx.component.showWordCount) { %}
+<div class="form-text {{ctx.component.description ? 'pull-right' : 'text-right'}}">
+  {% if (ctx.component.showCharCount) { %}
+  <span class="text-muted" ref="charcount" aria-live="polite"></span>
+  {% } %}
+  {% if (ctx.component.showWordCount) { %}
+  <span class="text-muted" ref="wordcount" aria-live="polite"></span>
+  {% } %}
 </div>
 {% } %}

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

@@ -1,9 +1,14 @@
 <label
+  ref="label"
   class="col-form-label {{ctx.label.className}}"
   for="{{ctx.instance.id}}-{{ctx.component.key}}"
+  id="l-{{ctx.instance.id}}-{{ctx.component.key}}"
 >
-  {{ ctx.t(ctx.component.label) }}
+  {{ ctx.t(ctx.component.label, { _userInput: true }) }}
+  {% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}
+    <span class='sr-only'>, {{ctx.t('numeric only')}},</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>
   {% } %}
 </label>

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

@@ -1 +1 @@
-<div class="form-text {{ctx.level}}">{{ctx.message}}</div>
+<div id="e-{{ctx.instance.id}}-{{ctx.key}}" class="form-text {{ctx.level || 'error'}}">{{ctx.message}}</div>

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

@@ -1,4 +1,15 @@
-<label class="control-label">{{ ctx.t(ctx.component.label) }}</label><br>
-<button lang='en' class='btn btn-light btn-md open-modal-button' ref='openModal'>
+<label id="l-{{ctx.component.key}}" class="control-label {{ ctx.label.className }}">
+  {{ ctx.t(ctx.component.label, { _userInput: true }) }}<span ref="modalLabelValue" class="sr-only">. {{ ctx.component.type === 'signature' ? ctx.self.getValueAsString(ctx.previewText) : ctx.previewText }}</span>
+</label><br>
+<span class="sr-only" ref="modalPreviewLiveRegion" aria-live="assertive"></span>
+<button
+  lang="en"
+  class="btn btn-light btn-md open-modal-button form-control {{ctx.openModalBtnClasses || ''}}"
+  ref="openModal"
+  aria-labelledby="l-{{ctx.component.key}}"
+>
   {{ ctx.previewText }}
 </button>
+<div class="formio-errors invalid-feedback">
+  {{ ctx.messages }}
+</div>

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

@@ -4,7 +4,7 @@
   {% if (!ctx.disabled) { %}
   <tr>
     <td colspan="2">
-      <button class="btn btn-primary formio-button-add-another" ref="addButton"><i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.addAnother)}}</button>
+      <button class="btn btn-primary formio-button-add-another" ref="addButton"><i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.addAnother, { _userInput: true })}}</button>
     </td>
   </tr>
   {% } %}

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

@@ -1,21 +1,29 @@
 <div class="mb-2 card border">
   {% if (!ctx.component.hideLabel || ctx.builder || ctx.component.collapsible || ctx.component.tooltip) { %}
-  <div class="card-header {{ctx.transform('class', 'bg-' + ctx.component.theme)}}" ref="header">
+  <div class="card-header {{ctx.transform('class', 'bg-' + ctx.component.theme)}}"
+    {% if (ctx.component.collapsible) { %}
+    tabindex="0"
+    {% } %}
+    role="button"
+    aria-expanded="{{ctx.component.collapsible ? !ctx.collapsed : true}}"
+    aria-controls="{{ctx.instance.id}}-{{ctx.component.key}}"
+    ref="header"
+  >
     <span class="mb-0 card-title {% if (ctx.component.theme && ctx.component.theme !== 'default') { %}text-light{% } %}">
       {% if (ctx.component.collapsible) { %}
         <i class="formio-collapse-icon {{ctx.iconClass(ctx.collapsed ? 'plus-square-o' : 'minus-square-o')}} text-muted" data-title="Collapse Panel"></i>
       {% } %}
       {% if (!ctx.component.hideLabel || ctx.builder) { %}
-      {{ctx.t(ctx.component.title)}}
+      {{ctx.t(ctx.component.title, { _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>
       {% } %}
     </span>
   </div>
   {% } %}
   {% if (!ctx.collapsed || ctx.builder) { %}
-  <div class="card-body" ref="{{ctx.nestedKey}}">
+  <div class="card-body" ref="{{ctx.nestedKey}}" id="{{ctx.instance.id}}-{{ctx.component.key}}">
     {{ctx.children}}
   </div>
   {% } %}

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

@@ -1,5 +1,4 @@
 <div class="formio builder grid grid-cols-12 gap-4 formbuilder">
-  <div class="loader-wrapper" ref="sidebar-loader"><div class="loader text-center"></div></div>
   <div class="col-span-12 xs:col-span-4 sm:col-span-3 md:col-span-2 formcomponents">
     {{ctx.sidebar}}
   </div>

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

@@ -1,9 +1,18 @@
-<div class="form-radio radio">
+<div
+  class="form-radio radio"
+  ref="radioGroup"
+  role="{{ctx.component.type === 'selectboxes' ? 'group' : 'radiogroup'}}"
+  aria-required="{{ctx.input.component.validate.required}}"
+  aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {% if (ctx.component.description) { %}
+    aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {% } %}
+>
   {% ctx.values.forEach(function(item) { %}
-  <div class="form-check{{ctx.inline ? '-inline' : ''}}" ref="wrapper">
-    <label class="form-check-label label-position-{{ ctx.component.optionsLabelPosition }}" for="{{ctx.id}}{{ctx.row}}-{{item.value}}">
+  <div class="{{ctx.input.attr.type}} {{ ctx.component.optionsLabelPosition && ctx.component.optionsLabelPosition !== 'right' ? 'pl-0' : ''}} form-check{{ctx.inline ? '-inline' : ''}}" ref="wrapper">
+    <label class="form-check-label label-position-{{ ctx.component.optionsLabelPosition }}" for="{{ctx.instance.root && ctx.instance.root.id}}-{{ctx.id}}-{{ctx.row}}-{{item.value}}">
       {% if (ctx.component.optionsLabelPosition === 'left' || ctx.component.optionsLabelPosition === 'top') { %}
-      <span>{{ctx.t(item.label)}}</span>
+      <span>{{ctx.t(item.label, { _userInput: true })}}</span>
       {% } %}
       <{{ctx.input.type}}
         ref="input"
@@ -17,10 +26,11 @@
         {% if (item.disabled) { %}
           disabled=true
         {% } %}
-        id="{{ctx.id}}{{ctx.row}}-{{item.value}}"
+        id="{{ctx.instance.root && ctx.instance.root.id}}-{{ctx.id}}-{{ctx.row}}-{{item.value}}"
+        role="{{ctx.component.type === 'selectboxes' ? 'checkbox' : 'radio'}}"
       >
       {% if (!ctx.component.optionsLabelPosition || ctx.component.optionsLabelPosition === 'right' || ctx.component.optionsLabelPosition === 'bottom') { %}
-      <span>{{ctx.t(item.label)}}</span>
+      <span>{{ctx.t(item.label, { _userInput: true })}}</span>
       {% } %}
     </label>
   </div>

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

@@ -1,4 +1,4 @@
 <div ref="value">
-  {% var filtered = ctx.values.filter(function(item) {return ctx.value === item.value || (typeof ctx.value === 'object' && ctx.value.hasOwnProperty(item.value) && ctx.value[item.value])}).map(function(item) { return ctx.t(item.label)}).join(', ') %}
+  {% var filtered = ctx.values.filter(function(item) {return ctx.value === item.value || (typeof ctx.value === 'object' && ctx.value.hasOwnProperty(item.value) && ctx.value[item.value])}).map(function(item) { return ctx.t(item.label, { _userInput: true })}).join(', ') %}
   {{ filtered }}
-  </div>
+</div>

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

@@ -9,7 +9,7 @@
       <td colspan="2">
         <button class="btn btn-primary formio-button-add-resource" ref="addResource">
           <i class="{{ctx.iconClass('plus')}} mr-1"></i>
-          {{ctx.t(ctx.component.addResourceLabel || 'Add Resource')}}
+          {{ctx.t(ctx.component.addResourceLabel || 'Add Resource', { _userInput: true })}}
         </button>
       </td>
     </tr>

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

@@ -7,6 +7,10 @@
   {% if (!ctx.input.attr.id) { %}
   id="{{ctx.instance.id}}-{{ctx.component.key}}"
   {% } %}
+  {% if (ctx.component.description) { %}
+  aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {% } %}
+  aria-required="{{ctx.input.ref === 'selectContainer' || !ctx.input.ref ? ctx.input.component.validate.required : ctx.component.fields[ctx.input.ref].required}}"
 >{{ctx.selectOptions}}</select>
 <input type="text"
        class="formio-select-autocomplete-input"
@@ -15,4 +19,5 @@
        autocomplete="{{ctx.input.attr.autocomplete}}"
        {% } %}
        tabindex="-1"
+       aria-label="{{ctx.t('autocomplete')}}"
 />

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

@@ -1,8 +1,8 @@
 <option {{ ctx.selected ? 'selected="selected"' : '' }}
-  value="{{ctx.useId ? ctx.id : ctx.option.value}}"
+  value='{{ctx.useId ? ctx.id : ctx.option.value}}'
   {% for (var attr in ctx.attrs) { %}
   {{attr}}="{{ctx.attrs[attr]}}"
   {% } %}
   >
-  {{ctx.t(ctx.option.label)}}
+  {{ctx.t(ctx.option.label, { _userInput: true })}}
 </option>

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

@@ -1 +1 @@
-{% if (ctx.selected) { %}{{ctx.t(ctx.option.label)}}{% } %}
+{% if (ctx.selected) { %}{{ctx.t(ctx.option.label, { _userInput: true })}}{% } %}

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

@@ -8,16 +8,16 @@
   <button class="btn btn-sm btn-light signature-pad-refresh" ref="refresh">
     <i class="{{ctx.iconClass('refresh')}}"></i>
   </button>
-  <canvas class="signature-pad-canvas" height="{{ctx.component.height}}" ref="canvas"></canvas>
+  <canvas class="signature-pad-canvas" style="display: none;" height="{{ctx.component.height}}" ref="canvas"></canvas>
   {% if (ctx.required) { %}
   <span class="form-control-feedback field-required-inline text-danger">
     <i class="{{ctx.iconClass('asterisk')}}"></i>
   </span>
   {% } %}
-  <img style="width: 100%;display: none;" ref="signatureImage">
+  <img style="width: 100%;display: inherit;" ref="signatureImage">
 </div>
 {% if (ctx.component.footer) { %}
   <div class="signature-pad-footer">
-    {{ctx.t(ctx.component.footer)}}
+    {{ctx.t(ctx.component.footer, { _userInput: true })}}
   </div>
 {% } %}

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

@@ -1,16 +1,26 @@
-<table class="table table-striped table-bordered">
+<table class="table table-striped table-bordered" aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}">
   <thead>
     <tr>
       <th></th>
       {% ctx.component.values.forEach(function(value) { %}
-      <th style="text-align: center;">{{ctx.t(value.label)}}</th>
+      <th style="text-align: center;">
+        {{ctx.t(value.label, { _userInput: true })}}
+        {% if (value.tooltip) { %}
+          <i ref="tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{value.tooltip}}"></i>
+        {% } %}
+      </th>
       {% }) %}
     </tr>
   </thead>
   <tbody>
     {% ctx.component.questions.forEach(function(question) { %}
     <tr>
-      <td>{{ctx.t(question.label)}}</td>
+      <td>
+        {{ctx.t(question.label)}}
+        {% if (question.tooltip) { %}
+          <i ref="tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{question.tooltip}}"></i>
+        {% } %}
+      </td>
       {% ctx.component.values.forEach(function(value) { %}
       <td style="text-align: center;">
         <input type="radio" name="{{ ctx.self.getInputName(question) }}" value="{{value.value}}" id="{{ctx.key}}-{{question.value}}-{{value.value}}" ref="input">

package/src/templates/tailwind/tab/flat.ejs

@@ -1,7 +1,7 @@
 {% ctx.component.components.forEach(function(tab, index) { %}
   <div class="mb-2 card border">
     <div class="card-header bg-default">
-      <h4 class="mb-0 card-title">{{ ctx.t(tab.label) }}</h4>
+      <h4 class="mb-0 card-title">{{ ctx.t(tab.label, { _userInput: true }) }}</h4>
     </div>
     <div
       class="card-body"

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

@@ -1,9 +1,15 @@
-<div class="card card-tabs">
+<div class="card card-tabs { ctx.component.verticalLayout ? ' card-vertical' : ''}}">
   <div class="card-header card-header-tabs">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs {{ ctx.component.verticalLayout ? ' nav-tabs-vertical' : ''}}" role="tablist">
       {% ctx.component.components.forEach(function(tab, index) { %}
-      <li class="nav-item {{ ctx.currentTab === index ? ' active' : ''}}" role="presentation" ref="{{ctx.tabLikey}}">
-        <a class="nav-link" href="#{{tab.key}}" ref="{{ctx.tabLinkKey}}">{{ctx.t(tab.label)}}</a>
+      <li class="nav-item {{ ctx.currentTab === index ? ' active' : ''}}" role="tab" ref="{{ctx.tabLikey}}">
+        <a
+                class="nav-link{{ ctx.currentTab === index ? ' active' : ''}}{{ ctx.component.verticalLayout ? ' nav-link-vertical' : ''}}"
+                href="#{{tab.key}}"
+                ref="{{ctx.tabLinkKey}}"
+        >
+          {{ctx.t(tab.label, { _userInput: true })}}
+        </a>
         <div class="nav-border"></div>
       </li>
       {% }) %}
@@ -12,7 +18,7 @@
   {% ctx.component.components.forEach(function(tab, index) { %}
   <div
     role="tabpanel"
-    class="card-body card-body-tabs tab-pane{{ ctx.currentTab === index ? ' active' : ''}}"
+    class="card-body tab-pane{{ ctx.currentTab === index ? ' active' : ''}}"
     style="display: {{ctx.currentTab === index ? 'block' : 'none'}}"
     ref="{{ctx.tabKey}}"
   >

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

@@ -4,6 +4,7 @@
     {{ ctx.component.hover ? 'table-hover' : ''}}
     {{ ctx.component.condensed ? 'table-sm' : ''}}
   ">
+  <caption class="sr-only">{{ctx.t(ctx.component.label)}}</caption>
   {% if (ctx.component.header && ctx.component.header.length > 0) { %}
   <thead>
     <tr>

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

@@ -0,0 +1,5 @@
+{% ctx.children.forEach(function(component) { %}
+  <td class="editgrid-table-column">
+    {{ component }}
+  </td>
+{% }) %}

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

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

package/src/templates/tailwind/webform/builder.ejs

@@ -1 +1 @@
-<div class="text-muted text-center p-2">{{ ctx.t(ctx.component.title) }}</div>
+<div class="text-muted text-center p-2">{{ ctx.t(ctx.component.title, { _userInput: true }) }}</div>

package/src/templates/tailwind/wizard/builder.ejs

@@ -1 +1 @@
-<div class="text-muted text-center p-2">{{ ctx.t(ctx.component.title) }}</div>
+<div class="text-muted text-center p-2">{{ ctx.t(ctx.component.title, { _userInput: true }) }}</div>

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

@@ -1,9 +1,30 @@
 <div class="{{ctx.className}}">
-  <div style="position: relative;">
-    {{ ctx.wizardHeader }}
-    <div class="wizard-page" ref="{{ctx.wizardKey}}">
-      {{ctx.components}}
+    <div style="position: relative;">
+        {% if (ctx.wizardHeaderType === 'wizardHeaderVertical') { %}
+        <div class="row">
+            {% if (ctx.wizardHeaderLocation !== 'right') { %}
+            <div class="col-sm-2">
+                {{ ctx.wizardHeader }}
+            </div>
+            {% } %}
+            <div class="wizard-page col-sm-10" ref="{{ctx.wizardKey}}">
+                {{ctx.components}}
+            </div>
+            {% if (ctx.wizardHeaderLocation === 'right') { %}
+            <div class="col-sm-2">
+                {{ ctx.wizardHeader }}
+            </div>
+            {% } %}
+        </div>
+        <div class="col-sm-offset-2 col-sm-10 {{ctx.wizardHeaderLocation === 'right' ? 'col-sm-offset-0 col-md-offset-0' : ''}}">
+            {{ ctx.wizardNav }}
+        </div>
+        {% } else { %}
+        {{ ctx.wizardHeader }}
+        <div class="wizard-page" ref="{{ctx.wizardKey}}">
+            {{ctx.components}}
+        </div>
+        {{ ctx.wizardNav }}
+        {% } %}
     </div>
-    {{ ctx.wizardNav }}
-  </div>
-</div>
+</div>

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

@@ -1,8 +1,13 @@
-<nav aria-label="navigation" id="{{ ctx.wizardKey }}-header">
-  <ul class="reset-list pagination">
+<nav aria-label="Wizard navigation" id="{{ ctx.wizardKey }}-header" ref="{{ctx.wizardKey}}-header">
+  <ul class="pagination" role="tablist">
     {% ctx.panels.forEach(function(panel, index) { %}
-    <li class="page-item {{ctx.currentPage === index ? ' active' : ''}}" style="">
-      <span class="page-link" ref="{{ctx.wizardKey}}-link">{{ctx.t(panel.title)}}</span>
+    <li class="page-item{{ctx.currentPage === index ? ' active' : ''}}" style="cursor: pointer;">
+      <button tabindex="0" data-index="{{index}}" role="tab" class="page-link" ref="{{ctx.wizardKey}}-link">
+        {{ctx.t(panel.title, { _userInput: true })}}
+        {% if (panel.tooltip && ctx.currentPage === index) { %}
+        <i ref="{{ctx.wizardKey}}-tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{panel.tooltip}}"></i>
+        {% } %}
+      </button>
     </li>
     {% }) %}
   </ul>