Merge pull request #71 from SFDigitalServices/release-6.0.4

Release 6.0.4

.github/workflows/ci.yml

@@ -12,10 +12,10 @@ jobs:
 
       - run: npm ci
       - run: npm run lint
-      - run: npm test
       - run: npm run build
         env:
           NODE_ENV: production
+      - run: npm test
 
       - uses: primer/publish@v2.0.0
         env:

__tests__/a11y.js

@@ -0,0 +1,51 @@
+/* eslint-env jest */
+import { createForm, destroyForm } from '../lib/test-helpers'
+import '../dist/formio-sfds.standalone.js'
+
+describe('a11y', () => {
+  describe('input labels', () => {
+    it('textfield inputs have associated labels', async () => {
+      const form = await createForm({
+        type: 'form',
+        display: 'form',
+        components: [
+          {
+            type: 'textfield',
+            key: 'name',
+            label: 'Name',
+            input: true
+          },
+          {
+            type: 'container',
+            key: 'nested',
+            components: [
+              {
+                type: 'number',
+                key: 'age',
+                label: 'Age',
+                input: true
+              }
+            ]
+          }
+        ]
+      }, {})
+
+      const inputs = form.element.querySelectorAll('input')
+      const labels = form.element.querySelectorAll('label:not(.control-label--hidden)')
+      expect(inputs).toHaveLength(2)
+      expect(labels).toHaveLength(2)
+
+      const [nameField, ageField] = inputs
+      const [nameLabel, ageLabel] = labels
+      expect(nameField.name).toBe('data[name]')
+      expect(nameField.id).toBe(`input-${nameField.name}`)
+      expect(nameLabel.getAttribute('for')).toBe(nameField.id)
+
+      expect(ageField.name).toBe('data[nested][age]')
+      expect(ageField.id).toBe(`input-${ageField.name}`)
+      expect(ageLabel.getAttribute('for')).toBe(ageField.id)
+
+      destroyForm(form)
+    })
+  })
+})

__tests__/patch.js

@@ -1,5 +1,4 @@
 /* eslint-env jest */
-import 'regenerator-runtime'
 import loadTranslations from '../src/i18n/load'
 import patch from '../src/patch'
 import { createElement, createForm, destroyForm, sleep } from '../lib/test-helpers'
@@ -15,13 +14,6 @@ const SENTINEL_I18N_KEY = 'derp'
 const SENTINEL_I18N_VALUE = 'DERP!'
 defaultTranslations.en[SENTINEL_I18N_KEY] = SENTINEL_I18N_VALUE
 
-// jsdom doesn't provide an implementation for these, and it throws an error if
-// you call them directly. Thankfully, Jest can spy on and mock them. See:
-// <https://github.com/jsdom/jsdom/issues/1422>
-const scroll = jest.fn()
-jest.spyOn(window, 'scroll').mockImplementation(scroll)
-jest.spyOn(window, 'scrollTo').mockImplementation(scroll)
-
 describe('patch()', () => {
   beforeAll(() => {
     patch(Formio)
@@ -172,21 +164,46 @@ describe('patch()', () => {
        * is the first test that actually tries to access them, so it could be
        * that the createForm() helper function isn't working properly.
        */
-      xit('gets .widget = "html5" by default', async () => {
+      it('gets .widget = "html5" by default', async () => {
+        const form = await createForm({
+          type: 'form',
+          display: 'form',
+          components: [
+            {
+              key: 'heyo',
+              type: 'select',
+              widget: 'choicesjs',
+              input: true,
+              data: { values: [] }
+            }
+          ]
+        })
+        expect(form.components.length).toBeGreaterThanOrEqual(1)
+        const [select] = form.components
+        expect(select.type).toEqual('select')
+        expect(select.component.widget).toEqual('html5')
+        destroyForm(form)
+      })
+
+      it('does not set .widget = "html5" if "autocomplete" tag is present', async () => {
         const form = await createForm({
           type: 'form',
           display: 'form',
           components: [
             {
               key: 'heyo',
               type: 'select',
+              tags: ['autocomplete'],
               widget: 'choicesjs',
               input: true,
               data: { values: [] }
             }
           ]
         })
-        // expect(form.components[0].type).toEqual('html5')
+        expect(form.components.length).toBeGreaterThanOrEqual(1)
+        const [select] = form.components
+        expect(select.type).toEqual('select')
+        expect(select.component.widget).toEqual('choicesjs')
         destroyForm(form)
       })
     })

jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  bail: 1
+  bail: 1,
+  setupFiles: ['<rootDir>/lib/test-setup.js']
 }

lib/test-helpers.js

@@ -18,7 +18,7 @@ function createForm (form = {}, options = {}) {
     id: `form-${Date.now().toString(36)}`
   })
   document.body.appendChild(el)
-  return global.Formio.createForm(el, options)
+  return global.Formio.createForm(el, form, options)
 }
 
 function destroyForm (form) {
@@ -27,8 +27,8 @@ function destroyForm (form) {
   element.remove()
 }
 
-function sleep (ms) {
+function sleep (ms = 1) {
   return new Promise(resolve => {
-    setTimeout(resolve, 10)
+    setTimeout(resolve, ms)
   })
 }

lib/test-setup.js

@@ -0,0 +1,10 @@
+/* eslint-env jest */
+import 'regenerator-runtime'
+import 'formiojs/dist/formio.full.min.js'
+
+// jsdom doesn't provide an implementation for these, and it throws an error if
+// you call them directly. Thankfully, Jest can spy on and mock them. See:
+// <https://github.com/jsdom/jsdom/issues/1422>
+const scroll = jest.fn()
+jest.spyOn(window, 'scroll').mockImplementation(scroll)
+jest.spyOn(window, 'scrollTo').mockImplementation(scroll)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formio-sfds",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "description": "form.io templates for the SF Design System",
   "module": "src/index.js",
   "main": "dist/formio-sfds.cjs.js",

src/templates/file/form.ejs

@@ -97,7 +97,7 @@
       {% } %}
       <td class="remove text-align-right pr-0">
         {% if (!ctx.disabled) { %}
-        <button ref="removeLink" aria-label="Remove"
+        <button ref="removeLink" aria-label="{{ ctx.t('Remove') }}"
           class="m-0 p-1 bg-blue fg-white border-0 d-flex flex-items-center">
           <span data-icon="delete" class="d-flex flex-items-center"></span>
         </button>
@@ -119,7 +119,7 @@
       </td>
       <td class="remove text-align-right pr-0">
         {% if (!ctx.disabled) { %}
-        <button ref="fileStatusRemove" aria-label="Remove"
+        <button ref="fileStatusRemove" aria-label="{{ ctx.t('Remove') }}"
           class="m-0 p-1 bg-blue fg-white border-0 d-flex flex-items-center">
           <span data-icon="delete" class="d-flex flex-items-center"></span>
         </button>

src/templates/input/form.ejs

@@ -13,6 +13,7 @@
 <div class="form-input">
   <{{ctx.input.type}}
     ref="{{ctx.input.ref ? ctx.input.ref : 'input'}}"
+    id="input-{{ ctx.input.attr.name }}"
     {% for (var attr in ctx.input.attr) { %}
     {{attr}}="{{ctx.input.attr[attr]}}"
     {% } %}

src/templates/label/form.ejs

@@ -1,5 +1,5 @@
 {% if (!ctx.component.hideLabel && ['checkbox', 'radio'].indexOf(ctx.component.type) === -1) { %}
-  <label class="{{ ctx.label.className }}">
+  <label class="{{ ctx.label.className }}" for="input-{{ ctx.self.options.name }}">
     {{ ctx.t([`${ctx.component.key}_label`, ctx.component.label]) }}
     <!--
     {% if (ctx.component.tooltip) { %}

src/templates/multiValueRow/form.ejs

@@ -2,7 +2,8 @@
   <div class="mr-1">{{ ctx.element }}</div>
   {% if (!ctx.disabled) { %}
     <div>
-      <button type="button" class="btn bg-slate-65" ref="removeRow">
+      <button type="button" class="btn bg-slate-65" ref="removeRow"
+         aria-label="{{ ctx.t('Remove') }}">
         <span data-icon="delete"></span>
       </button>
     </div>