@json-editor/json-editor 2.13.2 → 2.14.0

package/docs/imask.html

@@ -54,7 +54,7 @@ var jseditor, jedata = {schema:{
   },
   "properties": {
     "_header": {
-      "type": "info",
+      "format": "info",
       "title": "Example showing how to use Imask.js to format your <input/> content when you are typing.",
       "description": "<p>For documentation on the Imask.js options, look at <a href=\"https://imask.js.org/\" target=\"_blank\" title=\"Imask.js Homepage\">IMask.js</a> homepage.</p>",
       "options": {

package/docs/meta_schema.json

@@ -657,6 +657,9 @@
           "default": {},
           "defaultProperties": {},
           "properties": {
+            "titleHidden": {
+              "type": "boolean"
+            },
             "enum_titles": {
               "type": "array",
               "uniqueItems": true,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@json-editor/json-editor",
   "title": "JSONEditor",
   "description": "JSON Schema based editor",
-  "version": "2.13.2",
+  "version": "2.14.0",
   "main": "dist/jsoneditor.js",
   "author": {
     "name": "Jeremy Dorn",

package/src/defaults.js

@@ -359,7 +359,11 @@ languages.en = {
   /**
   * Warning when deleting a node
   */
-  button_delete_node_warning: 'Are you sure you want to remove this item?'
+  button_delete_node_warning: 'Are you sure you want to remove this item?',
+  /**
+   * Warning when deleting a node
+   */
+  table_controls: 'Controls'
 }
 
 /* Default per-editor options */

package/src/editor.js

@@ -55,6 +55,10 @@ export class AbstractEditor {
 
   register () {
     this.jsoneditor.registerEditor(this)
+    if (this.input && !this.label) {
+      const ariaLabel = this.getTitle() || this.formname
+      this.input.setAttribute('aria-label', ariaLabel)
+    }
     this.onChange()
   }
 
@@ -211,9 +215,12 @@ export class AbstractEditor {
   setOptInCheckbox (header) {
     /* the active/deactive checbox control. */
 
+    this.optInLabel = this.theme.getHiddenLabel(this.formname + ' opt-in')
+    this.optInLabel.setAttribute('for', this.formname + '-opt-in')
     this.optInCheckbox = document.createElement('input')
     this.optInCheckbox.setAttribute('type', 'checkbox')
     this.optInCheckbox.setAttribute('style', 'margin: 0 10px 0 0;')
+    this.optInCheckbox.setAttribute('id', this.formname + '-opt-in')
     this.optInCheckbox.classList.add('json-editor-opt-in')
 
     this.optInCheckbox.addEventListener('click', () => {
@@ -232,6 +239,7 @@ export class AbstractEditor {
     if (parentOptInEnabled || (!parentOptInDisabled && globalOptIn) || (!parentOptInDefined && globalOptIn)) {
       /* and control to type object editors if they are not required */
       if (this.parent && this.parent.schema.type === 'object' && !this.isRequired() && this.header) {
+        this.header.appendChild(this.optInLabel)
         this.header.appendChild(this.optInCheckbox)
         this.header.insertBefore(this.optInCheckbox, this.header.firstChild)
       }
@@ -253,6 +261,11 @@ export class AbstractEditor {
     this.setValue(this.getDefault(), true)
     this.updateHeaderText()
     this.onWatchedFieldChange()
+
+    if (this.options.titleHidden) {
+      this.theme.visuallyHidden(this.label)
+      this.theme.visuallyHidden(this.header)
+    }
   }
 
   setupWatchListeners () {
@@ -627,7 +640,7 @@ export class AbstractEditor {
   }
 
   getTitle () {
-    return this.translateProperty(this.schema.title || this.key)
+    return this.translateProperty(this.schema.title || this.key || this.formname)
   }
 
   enable () {

package/src/editors/array/selectize.js

@@ -46,6 +46,19 @@ export class ArraySelectizeEditor extends MultiSelectEditor {
       /* Add new event handler. */
       /* Note: Must use the "on()" method and not addEventListener() */
       this.selectize_instance.on('change', this.multiselectChangeHandler)
+
+      const label = this.theme.getHiddenLabel(this.formname)
+      this.input.setAttribute('id', this.formname + '-hidden-input')
+      label.setAttribute('for', this.formname + '-hidden-input')
+      this.input.parentNode.insertBefore(label, this.input)
+
+      const selectizeControl = this.selectize_instance.$control[0]
+
+      if (selectizeControl) {
+        const selectizeLabel = this.theme.getHiddenLabel(this.formname)
+        selectizeLabel.setAttribute('for', this.formname + '-selectized')
+        selectizeControl.appendChild(selectizeLabel)
+      }
     }
     super.afterInputReady()
   }

package/src/editors/array.js

@@ -93,7 +93,7 @@ export class ArrayEditor extends AbstractEditor {
 
   build () {
     if (!this.options.compact) {
-      this.header = document.createElement('label')
+      this.header = document.createElement('span')
       this.header.textContent = this.getTitle()
       this.title = this.theme.getHeader(this.header, this.getPathDepth())
       this.container.appendChild(this.title)
@@ -156,6 +156,14 @@ export class ArrayEditor extends AbstractEditor {
     this.addControls()
   }
 
+  postBuild () {
+    super.postBuild()
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable()
+    }
+  }
+
   onChildEditorChange (editor) {
     this.refreshValue()
     this.refreshTabs(true)

package/src/editors/info.js

@@ -4,7 +4,7 @@ import { ButtonEditor } from './button.js'
 export class InfoEditor extends ButtonEditor {
   build () {
     this.options.compact = false
-    this.header = this.label = this.theme.getFormInputLabel(this.getTitle())
+    this.header = this.label = this.theme.getLabelLike(this.getTitle())
     this.description = this.theme.getDescription(this.schema.description || '')
     this.control = this.theme.getFormControl(this.label, this.description, null)
     this.container.appendChild(this.control)

package/src/editors/multiple.js

@@ -208,11 +208,16 @@ export class MultipleEditor extends AbstractEditor {
 
   build () {
     const { container } = this
-    this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+    this.header = this.label = this.theme.getLabelLike(this.getTitle(), this.isRequired())
     this.switcher = this.theme.getSwitcher(this.display_text)
+    this.switcher.setAttribute('id', this.formname + 'switcher')
+
+    this.switcherLabel = this.theme.getHiddenLabel(this.formname + ' switcher')
+    this.switcherLabel.setAttribute('for', this.formname + 'switcher')
 
     if (!this.if) {
       this.container.appendChild(this.header)
+      container.appendChild(this.switcherLabel)
       container.appendChild(this.switcher)
     }
 

package/src/editors/multiselect.js

@@ -58,7 +58,7 @@ export class MultiSelectEditor extends AbstractEditor {
 
   build () {
     let i
-    if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+    if (!this.options.compact) this.header = this.label = this.theme.getLabelLike(this.getTitle(), this.isRequired())
     if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
     if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
     if (this.options.compact) this.container.classList.add('compact')
@@ -85,6 +85,7 @@ export class MultiSelectEditor extends AbstractEditor {
       this.control = this.theme.getMultiCheckboxHolder(this.controls, this.label, this.description, this.infoButton)
       this.inputs.controlgroup = this.inputs.controls = this.control /* Enable error messages for checkboxes */
     } else {
+      if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
       this.input_type = 'select'
       this.input = this.theme.getSelectInput(this.option_keys, true)
       this.theme.setSelectOptions(this.input, this.option_keys, this.option_enum.map(e => e.title))
@@ -95,7 +96,7 @@ export class MultiSelectEditor extends AbstractEditor {
         this.select_options[this.option_keys[i]] = this.input.children[i]
       }
 
-      this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
+      this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton, this.formname)
     }
 
     if (this.schema.readOnly || this.schema.readonly) {

package/src/editors/object.js

@@ -554,7 +554,7 @@ export class ObjectEditor extends AbstractEditor {
     } else {
       this.header = ''
       if (!this.options.compact) {
-        this.header = document.createElement('label')
+        this.header = document.createElement('span')
         this.header.textContent = this.getTitle()
       }
       this.title = this.theme.getHeader(this.header, this.getPathDepth())
@@ -568,7 +568,11 @@ export class ObjectEditor extends AbstractEditor {
 
       /* Edit JSON modal */
       this.editjson_holder = this.theme.getModal()
+      this.editjson_textarea_label = this.theme.getHiddenLabel(this.translate('button_edit_json'))
+      this.editjson_textarea_label.setAttribute('for', this.path + '-' + 'edit-json-textarea')
       this.editjson_textarea = this.theme.getTextareaInput()
+      this.editjson_textarea.setAttribute('id', this.path + '-' + 'edit-json-textarea')
+      this.editjson_textarea.setAttribute('aria-labelledby', this.path + '-' + 'edit-json-textarea')
       this.editjson_textarea.classList.add('je-edit-json--textarea')
       this.editjson_save = this.getButton('button_save', 'save', 'button_save')
       this.editjson_save.classList.add('json-editor-btntype-save')
@@ -591,6 +595,7 @@ export class ObjectEditor extends AbstractEditor {
         e.stopPropagation()
         this.hideEditJSON()
       })
+      this.editjson_holder.appendChild(this.editjson_textarea_label)
       this.editjson_holder.appendChild(this.editjson_textarea)
       this.editjson_holder.appendChild(this.editjson_save)
       this.editjson_holder.appendChild(this.editjson_copy)
@@ -605,7 +610,14 @@ export class ObjectEditor extends AbstractEditor {
 
       this.addproperty_input = this.theme.getFormInputField('text')
       this.addproperty_input.setAttribute('placeholder', 'Property name...')
+
+      this.addproperty_input_label = this.theme.getHiddenLabel(this.translate('button_properties'))
+      this.addproperty_input_label.setAttribute('for', this.path + '-' + 'property-selector')
+
       this.addproperty_input.classList.add('property-selector-input')
+      this.addproperty_input.setAttribute('id', this.path + '-' + 'property-selector')
+      this.addproperty_input.setAttribute('aria-labelledby', this.path + '-' + 'property-selector')
+
       this.addproperty_add.addEventListener('click', (e) => {
         e.preventDefault()
         e.stopPropagation()
@@ -623,7 +635,7 @@ export class ObjectEditor extends AbstractEditor {
         }
       })
       this.addproperty_input.addEventListener('input', (e) => {
-        e.target.previousSibling.childNodes.forEach((value) => {
+        e.target.previousSibling.previousSibling.childNodes.forEach((value) => {
           let searchTerm = value.innerText
           let propertyTitle = e.target.value
 
@@ -642,6 +654,7 @@ export class ObjectEditor extends AbstractEditor {
         })
       })
       this.addproperty_holder.appendChild(this.addproperty_list)
+      this.addproperty_holder.appendChild(this.addproperty_input_label)
       this.addproperty_holder.appendChild(this.addproperty_input)
       this.addproperty_holder.appendChild(this.addproperty_add)
       const spacer = document.createElement('div')
@@ -802,6 +815,10 @@ export class ObjectEditor extends AbstractEditor {
       /* Do it again now that we know the approximate heights of elements */
       this.layoutEditors()
     }
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable()
+    }
   }
 
   deactivateNonRequiredProperties () {
@@ -901,7 +918,7 @@ export class ObjectEditor extends AbstractEditor {
 
     const label = this.theme.getCheckboxLabel(labelText)
 
-    const control = this.theme.getFormControl(label, checkbox)
+    const control = this.theme.getFormControl(label, checkbox, null, null, this.path + '-' + key)
     control.style.paddingBottom = control.style.marginBottom = control.style.paddingTop = control.style.marginTop = 0
     control.style.height = 'auto'
     /* control.style.overflowY = 'hidden'; */

package/src/editors/select.js

@@ -181,7 +181,7 @@ export class SelectEditor extends AbstractEditor {
       this.onInputChange()
     })
 
-    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton, this.formname)
     this.container.appendChild(this.control)
 
     this.value = this.enum_values[0]

package/src/editors/starrating.js

@@ -3,7 +3,7 @@ import rules from './starrating.css.js'
 
 export class StarratingEditor extends StringEditor {
   build () {
-    if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+    if (!this.options.compact) this.header = this.label = this.theme.getLabelLike(this.getTitle(), this.isRequired())
     if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
     if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
     if (this.options.compact) this.container.classList.add('compact')
@@ -47,6 +47,10 @@ export class StarratingEditor extends StringEditor {
         radioLabel.classList.add('starrating-display-enabled')
       }
 
+      const radioText = this.theme.getHiddenText('label')
+      radioText.textContent = i
+
+      radioLabel.appendChild(radioText)
       this.ratingContainer.appendChild(radioInput)
       this.ratingContainer.appendChild(radioLabel)
     }

package/src/editors/string.js

@@ -8,7 +8,6 @@ export class StringEditor extends AbstractEditor {
     if (this.jsoneditor.options.use_name_attributes) {
       this.input.setAttribute('name', this.formname)
     }
-    this.input.setAttribute('aria-label', this.formname)
   }
 
   unregister () {
@@ -106,7 +105,8 @@ export class StringEditor extends AbstractEditor {
           step = this.schema.multipleOf
         }
 
-        this.input = this.theme.getRangeInput(min, max, step)
+        this.input = this.theme.getRangeInput(min, max, step, this.description, this.formname)
+        this.input.setAttribute('id', this.formname)
         /* HTML5 Input type */
       } else {
         this.input_type = 'text'

package/src/editors/table.js

@@ -54,7 +54,7 @@ export class TableEditor extends ArrayEditor {
     this.width = tmp.getNumColumns() + 2
 
     if (!this.options.compact) {
-      this.header = document.createElement('label')
+      this.header = document.createElement('span')
       this.header.textContent = this.getTitle()
       this.title = this.theme.getHeader(this.header, this.getPathDepth())
       this.container.appendChild(this.title)
@@ -101,8 +101,9 @@ export class TableEditor extends ArrayEditor {
     this.row_holder.innerHTML = ''
 
     /* Row Controls column */
-    this.controls_header_cell = this.theme.getTableHeaderCell(' ')
+    this.controls_header_cell = this.theme.getTableHeaderCell(this.translate('table_controls'))
     this.controls_header_cell.setAttribute('aria-hidden', 'true')
+    this.controls_header_cell.style.visibility = 'hidden'
     this.header_row.appendChild(this.controls_header_cell)
 
     /* Add controls */

package/src/theme.js

@@ -105,8 +105,15 @@ export class AbstractTheme {
     return el
   }
 
+  getLabelLike (text, req) {
+    const el = document.createElement('b')
+    el.appendChild(document.createTextNode(text))
+    if (req) el.classList.add('required')
+    return el
+  }
+
   getHeader (text, pathDepth) {
-    const el = document.createElement('h3')
+    const el = document.createElement('span')
     if (typeof text === 'string') {
       el.textContent = text
     } else {
@@ -177,7 +184,7 @@ export class AbstractTheme {
     return el
   }
 
-  getFormRadioControl (label, input, compact) {
+  getFormRadioControl (label, input, compact, formName) {
     const el = document.createElement('div')
     el.appendChild(label)
     input.style.width = 'auto'
@@ -186,6 +193,12 @@ export class AbstractTheme {
       el.classList.add('je-radio-control--compact')
     }
 
+    if (input.tagName.toLowerCase() !== 'div' && formName && label && input) {
+      input.setAttribute('id', formName)
+      input.setAttribute('aria-labelledby', formName)
+      label.setAttribute('for', formName)
+    }
+
     return el
   }
 
@@ -225,11 +238,39 @@ export class AbstractTheme {
     return el
   }
 
-  getRangeInput (min, max, step) {
+  getHiddenLabel (text) {
+    const el = document.createElement('label')
+    el.textContent = text
+    el.setAttribute('style', 'position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;')
+    return el
+  }
+
+  visuallyHidden (element) {
+    if (!element) {
+      return
+    }
+
+    element.setAttribute('style', 'position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;')
+  }
+
+  getHiddenText (text) {
+    const el = document.createElement('span')
+    el.textContent = text
+    el.setAttribute('style', 'position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;')
+    return el
+  }
+
+  getRangeInput (min, max, step, description, formName) {
     const el = this.getFormInputField('range')
     el.setAttribute('min', min)
     el.setAttribute('max', max)
     el.setAttribute('step', step)
+
+    if (description) {
+      description.setAttribute('id', formName + '-description')
+      el.setAttribute('aria-describedby', formName + '-description')
+    }
+
     return el
   }
 
@@ -297,7 +338,7 @@ export class AbstractTheme {
     return div
   }
 
-  getRangeOutput (input, startvalue) {
+  getRangeOutput (input) {
     const output = document.createElement('output')
     const updateOutput = e => { output.value = e.currentTarget.value }
     input.addEventListener('change', updateOutput, false)
@@ -339,6 +380,16 @@ export class AbstractTheme {
       el.appendChild(input)
     }
 
+    if (input.tagName.toLowerCase() !== 'div' && input && label && formName) {
+      label.setAttribute('for', formName)
+      input.setAttribute('id', formName)
+    }
+
+    if (input.tagName.toLowerCase() !== 'div' && input && description) {
+      description.setAttribute('id', formName + '-description')
+      input.setAttribute('aria-describedby', formName + '-description')
+    }
+
     if (description) el.appendChild(description)
     return el
   }
@@ -455,6 +506,7 @@ export class AbstractTheme {
   }
 
   addInputError (input, text) {
+    input.errmsg.setAttribute('role', 'alert')
   }
 
   removeInputError (input) {

package/src/themes/barebones.js

@@ -16,6 +16,7 @@ export class barebonesTheme extends AbstractTheme {
 
     input.errmsg.innerHTML = ''
     input.errmsg.appendChild(document.createTextNode(text))
+    input.errmsg.setAttribute('role', 'alert')
   }
 
   removeInputError (input) {

package/src/themes/bootstrap3.js

@@ -37,9 +37,9 @@ export class bootstrap3Theme extends AbstractTheme {
     return el
   }
 
-  getRangeInput (min, max, step) {
+  getRangeInput (min, max, step, description, formName) {
     /* TODO: use better slider */
-    return super.getRangeInput(min, max, step)
+    return super.getRangeInput(min, max, step, description, formName)
   }
 
   getFormInputField (type) {
@@ -50,7 +50,29 @@ export class bootstrap3Theme extends AbstractTheme {
     return el
   }
 
-  getFormControl (label, input, description, infoText) {
+  getHiddenLabel (text) {
+    const el = document.createElement('label')
+    el.textContent = text
+    el.classList.add('sr-only')
+    return el
+  }
+
+  visuallyHidden (element) {
+    if (!element) {
+      return
+    }
+
+    element.classList.add('sr-only')
+  }
+
+  getHiddenText (text) {
+    const el = document.createElement('span')
+    el.textContent = text
+    el.classList.add('sr-only')
+    return el
+  }
+
+  getFormControl (label, input, description, infoText, formName) {
     const group = document.createElement('div')
 
     if (label && (input.type === 'checkbox' || input.type === 'radio')) {
@@ -70,6 +92,16 @@ export class bootstrap3Theme extends AbstractTheme {
 
     if (description) group.appendChild(description)
 
+    if (input.tagName.toLowerCase() !== 'div' && input && label && formName) {
+      label.setAttribute('for', formName)
+      input.setAttribute('id', formName)
+    }
+
+    if (input.tagName.toLowerCase() !== 'div' && input && description) {
+      description.setAttribute('id', formName + '-description')
+      input.setAttribute('aria-describedby', formName + '-description')
+    }
+
     return group
   }
 
@@ -118,6 +150,19 @@ export class bootstrap3Theme extends AbstractTheme {
     return el
   }
 
+  getHeader (text, pathDepth) {
+    const el = document.createElement('span')
+    el.classList.add('h3')
+
+    if (typeof text === 'string') {
+      el.textContent = text
+    } else {
+      el.appendChild(text)
+    }
+
+    return el
+  }
+
   getHeaderButtonHolder () {
     const el = this.getButtonHolder()
     el.style.marginLeft = '10px'
@@ -165,6 +210,7 @@ export class bootstrap3Theme extends AbstractTheme {
     }
 
     input.errmsg.textContent = text
+    input.errmsg.setAttribute('role', 'alert')
   }
 
   removeInputError (input) {

package/src/themes/bootstrap4.js

@@ -75,8 +75,8 @@ export class bootstrap4Theme extends AbstractTheme {
     return el
   }
 
-  getRangeInput (min, max, step) {
-    const el = super.getRangeInput(min, max, step)
+  getRangeInput (min, max, step, description, formName) {
+    const el = super.getRangeInput(min, max, step, description, formName)
 
     if (this.options.custom_forms === true) {
       el.classList.remove('form-control')
@@ -188,7 +188,29 @@ export class bootstrap4Theme extends AbstractTheme {
     return el
   }
 
-  getFormControl (label, input, description, infoText) {
+  getHiddenLabel (text) {
+    const el = document.createElement('label')
+    el.textContent = text
+    el.classList.add('sr-only')
+    return el
+  }
+
+  visuallyHidden (element) {
+    if (!element) {
+      return
+    }
+
+    element.classList.add('sr-only')
+  }
+
+  getHiddenText (text) {
+    const el = document.createElement('span')
+    el.textContent = text
+    el.classList.add('sr-only')
+    return el
+  }
+
+  getFormControl (label, input, description, infoText, formName) {
     const group = document.createElement('div')
     group.classList.add('form-group')
 
@@ -211,10 +233,6 @@ export class bootstrap4Theme extends AbstractTheme {
         }
       }
 
-      const unique = (Date.now() * Math.random()).toFixed(0)
-      input.setAttribute('id', unique)
-      label.setAttribute('for', unique)
-
       check.appendChild(input)
       check.appendChild(label)
       if (infoText) check.appendChild(infoText)
@@ -234,6 +252,16 @@ export class bootstrap4Theme extends AbstractTheme {
       group.appendChild(description)
     }
 
+    if (input.tagName.toLowerCase() !== 'div' && input && label && formName) {
+      label.setAttribute('for', formName)
+      input.setAttribute('id', formName)
+    }
+
+    if (input.tagName.toLowerCase() !== 'div' && input && description) {
+      description.setAttribute('id', formName + '-description')
+      input.setAttribute('aria-describedby', formName + '-description')
+    }
+
     return group
   }
 
@@ -406,10 +434,8 @@ export class bootstrap4Theme extends AbstractTheme {
   }
 
   getHeader (text, pathDepth) {
-    /* var cardHeader = document.createElement('div') */
-    /* cardHeader.classList.add('card-header') */
-
-    const el = document.createElement('h3')
+    const el = document.createElement('span')
+    el.classList.add('h3')
     el.classList.add('card-title')
     el.classList.add('level-' + pathDepth)
 
@@ -421,8 +447,6 @@ export class bootstrap4Theme extends AbstractTheme {
 
     el.style.display = 'inline-block'
 
-    /* cardHeader.appendChild(el) */
-
     return el
   }
 
@@ -500,6 +524,7 @@ export class bootstrap4Theme extends AbstractTheme {
 
     input.errmsg.style.display = 'block'
     input.errmsg.textContent = text
+    input.errmsg.setAttribute('role', 'alert')
   }
 
   removeInputError (input) {