formio · antonSoftensity · Oct 12, 2021
diff --git a/src/templates/uswds/cssClasses.ts b/src/templates/uswds/cssClasses.ts
@@ -10,6 +10,8 @@ export default {
   'formio-modal-save': 'usa-error',
   'formio-alert-danger': 'usa-alert usa-alert--error usa-alert--no-icon',
   'formio-alert-success': 'usa-alert usa-alert--success usa-alert--no-icon',
+  'formio-secondary-button': 'usa-button usa-button--secondary',
+  'formio-primary-button': 'usa-button',
   'formio-modal-cancel-button': 'usa-button usa-button--secondary',
   'formio-modal-confirm-button': 'usa-button',
 };
diff --git a/src/templates/uswds/datagrid/form.ejs b/src/templates/uswds/datagrid/form.ejs
@@ -13,6 +13,7 @@
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
       <th scope="col">
+        <span class="usa-sr-only">{{ ctx.t('Actions')}}</span>
         {% if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { %}
         <button class="usa-button formio-button-add-row" ref="{{ctx.datagridKey}}-addRow" tabindex="{{ctx.tabIndex}}">
           <i class="{{ctx.iconClass('plus')}}"></i>{{ctx.t('Add Another')}}
@@ -42,7 +43,11 @@
       {% if (ctx.hasExtraColumn) { %}
         {% if (!ctx.builder && ctx.hasRemoveButtons) { %}
         <td>
-          <button type="button" class="usa-button usa-button--secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}">
+          <button type="button"
+            class="usa-button usa-button--secondary formio-button-remove-row"
+            ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}"
+            aria-label="{{ctx.t('Remove row ' + (index + 1))}}"
+          >
             <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
@@ -59,7 +64,7 @@
   {% if (!ctx.builder && ctx.hasAddButton && ctx.hasBottomSubmit) { %}
   <tfoot>
     <tr>
-      <td colspan="{{ctx.numColumns + 1}}">
+      <td colspan="{{ctx.numColumns}}">
         <button class="usa-button formio-button-add-row" ref="{{ctx.datagridKey}}-addRow" tabindex="{{ctx.tabIndex}}">
           <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another')}}
         </button>
@@ -68,3 +73,4 @@
   </tfoot>
   {% } %}
 </table>
+<span class="sr-only" aria-live="polite" ref="dataGridLiveRegion"></span>
diff --git a/src/templates/uswds/dynamicWizard/form.ejs b/src/templates/uswds/dynamicWizard/form.ejs
@@ -0,0 +1,65 @@
+<div class="dynamicWizard-listgroup list-group
+    {{ ctx.component.striped ? 'usa-table--striped' : ''}}
+    {{ ctx.component.bordered ? 'usa-table--bordered' : ''}}
+    {{ ctx.component.hover ? 'table-hover' : ''}}
+    {{ ctx.component.condensed ? 'table-sm' : ''}}"
+    id="{{ctx.instance.id}}-{{ctx.component.key}}"
+    role="grid"
+    aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}} 
+    {% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
+>
+  {% if (ctx.readOnly || !ctx.isChangingMode || ctx.isDisabled) { %}
+  {% if (ctx.header) { %}
+  <div class="list-group-item list-group-header" role="presentation">
+    {{ctx.header}}
+  </div>
+  {% } %}
+  {% ctx.rows.forEach(function(row, rowIndex) { %}
+  <div class="list-group-card" ref="{{ctx.ref.row}}" role="presentation">
+    {{row}}
+    <div class="has-error">
+      <div class="dynamicWizard-row-error help-block">
+        {{ctx.errors[rowIndex]}}
+      </div>
+    </div>
+  </div>
+  {% }) %}
+  {% if (ctx.footer) { %}
+  <div class="list-group-item list-group-footer">
+    {{ctx.footer}}
+  </div>
+  {% } %}
+  {% } else { %}
+  <div class="list-group-field" ref="{{ctx.ref.row}}" role="gridcell">
+    {{ ctx.currentComponent }}
+  </div>
+  {% } %}
+</div>
+{% if (!ctx.readOnly && !ctx.isBlocking) { %}
+{% if (!ctx.isChangingMode) { %}
+<p>Would you like to add another?</p>
+<button class="usa-button" ref="{{ctx.ref.agreeButton}}">
+  {{ctx.t('Yes')}}
+</button>
+{% } else { %}
+<ul class="usa-list--unstyled wizard-nav-container" id="{{ ctx.dynamicWizardKey }}-nav">
+  {% if (ctx.buttons.next) { %}
+  <li>
+    <button class="usa-button" ref="{{ctx.dynamicWizardKey}}-next">{{ctx.t('next')}}</button>
+  </li>
+  {% } %}
+  {% if (ctx.buttons.previous) { %}
+  <li>
+    <button class="usa-button usa-button--outline"
+      ref="{{ctx.dynamicWizardKey}}-previous">{{ctx.t('previous')}}</button>
+  </li>
+  {% } %}
+  {% if (ctx.buttons.cancel) { %}
+  <li>
+    <button class="usa-button usa-button--secondary" ref="{{ctx.dynamicWizardKey}}-cancel">{{ctx.t('cancel')}}</button>
+  </li>
+  {% } %}
+</ul>
+{% } %}
+{% } %}
+<span class="sr-only" aria-live="assertive" ref="dWizardLiveRegion"></span>
diff --git a/src/templates/uswds/dynamicWizard/index.ts b/src/templates/uswds/dynamicWizard/index.ts
@@ -0,0 +1,3 @@
+import form from './form.ejs';
+
+export default { form };
diff --git a/src/templates/uswds/editgrid/form.ejs b/src/templates/uswds/editgrid/form.ejs
@@ -1,11 +1,16 @@
-<ul class="editgrid-listgroup usa-list usa-list--unstyled margin-bottom-105">
+<div
+  class="editgrid-listgroup usa-list usa-list--unstyled margin-bottom-105"
+  role="grid"
+  aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}} 
+  {% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
+>
   {% if (ctx.header) { %}
-  <li class="position-relative display-block padding-105 border-1px">
+  <div role="presentation" class="position-relative display-block padding-105 border-1px">
     {{ctx.header}}
-  </li>
+  </div>
   {% } %}
   {% ctx.rows.forEach(function(row, rowIndex) { %}
-  <li class="position-relative display-block padding-105 border-1px margin-top-neg-1px" ref="{{ctx.ref.row}}">
+  <div role="presentation" class="position-relative display-block padding-105 border-1px margin-top-neg-1px" ref="{{ctx.ref.row}}">
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
@@ -20,16 +25,17 @@
         {{ctx.errors[rowIndex]}}
       </div>
     </div>
-  </li>
+  </div>
   {% }) %}
   {% if (ctx.footer) { %}
-  <li class="position-relative display-block padding-105 border-1px margin-top-neg-1px">
+  <div class="position-relative display-block padding-105 border-1px margin-top-neg-1px">
     {{ctx.footer}}
-  </li>
+  </div>
   {% } %}
-</ul>
+</div>
 {% if (!ctx.readOnly && ctx.hasAddButton) { %}
 <button class="usa-button" ref="{{ctx.ref.addRow}}">
   <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another')}}
 </button>
 {% } %}
+<span class="sr-only" aria-live="polite" ref="editGridLiveRegion"></span>
diff --git a/src/templates/uswds/editgridTable/form.ejs b/src/templates/uswds/editgridTable/form.ejs
@@ -0,0 +1,54 @@
+<div class="editgrid-table-container">
+  <table class="usa-table
+      {{ ctx.component.striped ? 'usa-table--striped' : ''}}
+      {{ ctx.component.bordered ? 'usa-table--bordered' : ''}}
+  ">
+    {% 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="usa-button" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', {
+              _userInput: true })}}</button>
+            {% if (ctx.component.removeRow) { %}
+            <button class="usa-button--secondary" 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>
+{% if (!ctx.readOnly && ctx.hasAddButton) { %}
+<button class="usa-button" ref="{{ctx.ref.addRow}}">
+  <i class="{{ctx.iconClass('plus')}}"></i>
+  {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+</button>
+{% } %}
+<span class="sr-only" aria-live="polite" ref="editGridLiveRegion"></span>
diff --git a/src/templates/uswds/editgridTable/index.ts b/src/templates/uswds/editgridTable/index.ts
@@ -0,0 +1,3 @@
+import form from './form.ejs';
+
+export default { form };
diff --git a/src/templates/uswds/index.ts b/src/templates/uswds/index.ts
@@ -17,7 +17,9 @@ import container from './container';
 import datagrid from './datagrid';
 import day from './day';
 import dialog from './dialog';
+import dynamicWizard from './dynamicWizard';
 import editgrid from './editgrid';
+import editgridTable from './editgridTable';
 import errorsList from './errorsList';
 import field from './field';
 import fieldset from './fieldset';
@@ -72,7 +74,9 @@ export default {
   datagrid,
   day,
   dialog,
+  dynamicWizard,
   editgrid,
+  editgridTable,
   errorsList,
   field,
   fieldset,

diff --git a/src/templates/uswds/modalPreview/form.ejs b/src/templates/uswds/modalPreview/form.ejs
@@ -4,7 +4,7 @@
 <div
   ref="modalMessageContainer"
   class="text-secondary-dark width-full formio-errors"
-></div>
+>{{ ctx.messages }}</div>
 <span class="usa-sr-only" ref="modalPreviewLiveRegion" aria-live="assertive"></span>
 <button lang="en" class="open-modal-button" ref="openModal" aria-labelledby="l-{{ctx.component.key}}">
   {{ ctx.previewText }}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import form from './form.ejs';

		export default { form };