@json-editor/json-editor 2.13.1 → 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.1",
+  "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 */
@@ -408,7 +412,8 @@ const options = {
   use_default_values: true,
   max_depth: 0,
   button_state_mode: 1,
-  case_sensitive_property_search: true
+  case_sensitive_property_search: true,
+  show_errors: 'interaction'
 }
 
 /* This assignment was previously in index.js but makes more sense here */

package/src/editor.js

@@ -15,6 +15,7 @@ export class AbstractEditor {
     this.original_schema = options.schema
     this.schema = this.jsoneditor.expandSchema(this.original_schema)
     this.active = true
+    this.isUiOnly = false
     this.options = extend({}, (this.options || {}), (this.schema.options || {}), (options.schema.options || {}), options)
 
     this.formname = this.jsoneditor.options.form_name_root || 'root'
@@ -54,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()
   }
 
@@ -210,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', () => {
@@ -231,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)
       }
@@ -252,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 () {
@@ -626,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)
@@ -342,7 +350,12 @@ export class ArrayEditor extends AbstractEditor {
     value = this.ensureArraySize(value)
 
     const serialized = JSON.stringify(value)
-    if (serialized === this.serialized) return
+    if (serialized === this.serialized) {
+      if (initial) {
+        this.refreshValue(initial)
+      }
+      return
+    }
 
     value.forEach((val, i) => {
       if (this.rows[i]) {
@@ -454,7 +467,7 @@ export class ArrayEditor extends AbstractEditor {
         this.value[i] = editor.getValue()
       })
 
-      if (!this.collapsed && this.setupButtons(minItems)) {
+      if (this.setupButtons(minItems) && !this.collapsed) {
         this.controls.style.display = 'inline-block'
       } else {
         this.controls.style.display = 'none'

package/src/editors/button.js

@@ -6,6 +6,7 @@ export class ButtonEditor extends AbstractEditor {
   constructor (options, defaults) {
     super(options, defaults)
     this.active = false
+    this.isUiOnly = true
 
     /* Set field to required in schema otherwise it will not be displayed */
     if (this.parent && this.parent.schema) {

package/src/editors/checkbox.js

@@ -6,6 +6,11 @@ export class CheckboxEditor extends AbstractEditor {
     const changed = this.getValue() !== value
     this.value = value
     this.input.checked = this.value
+
+    if (!initial) {
+      this.is_dirty = true
+    }
+
     this.onChange(changed)
   }
 
@@ -50,6 +55,7 @@ export class CheckboxEditor extends AbstractEditor {
       e.preventDefault()
       e.stopPropagation()
       this.value = e.currentTarget.checked
+      this.is_dirty = true
       this.onChange(true)
     })
 
@@ -77,7 +83,17 @@ export class CheckboxEditor extends AbstractEditor {
   }
 
   showValidationErrors (errors) {
-    this.previous_error_setting = this.jsoneditor.options.show_errors
+    const showErrors = this.jsoneditor.options.show_errors
+    const changeOrInteraction = showErrors === 'change' || showErrors === 'interaction'
+    const never = showErrors === 'never'
+
+    if (never) {
+      return
+    }
+
+    if (changeOrInteraction && !this.is_dirty) {
+      return
+    }
 
     const addMessage = (messages, error) => {
       if (error.path === this.path) {

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

@@ -42,7 +42,7 @@ export class ObjectEditor extends AbstractEditor {
       super.enable()
       if (this.editors) {
         Object.values(this.editors).forEach(e => {
-          if (e.isActive()) {
+          if (e.isActive() || e.isUiOnly) {
             e.enable()
           }
           e.optInCheckbox.disabled = false
@@ -60,7 +60,7 @@ export class ObjectEditor extends AbstractEditor {
     super.disable()
     if (this.editors) {
       Object.values(this.editors).forEach(e => {
-        if (e.isActive()) {
+        if (e.isActive() || e.isUiOnly) {
           e.disable(alwaysDisabled)
         }
         e.optInCheckbox.disabled = true
@@ -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 () {
@@ -850,15 +867,8 @@ export class ObjectEditor extends AbstractEditor {
 
   copyJSON () {
     if (!this.editjson_holder) return
-    const ta = document.createElement('textarea')
-    ta.value = this.editjson_textarea.value
-    ta.setAttribute('readonly', '')
-    ta.style.position = 'absolute'
-    ta.style.left = '-9999px'
-    document.body.appendChild(ta)
-    ta.select()
-    document.execCommand('copy')
-    document.body.removeChild(ta)
+    navigator.clipboard.writeText(this.editjson_textarea.value)
+      .catch((e) => window.alert(e))
   }
 
   saveJSON () {
@@ -908,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

@@ -17,12 +17,14 @@ export class SelectEditor extends AbstractEditor {
 
     if (this.value === sanitized) return
 
-    if (initial) this.is_dirty = false
-    else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true
-
     this.input.value = this.enum_options[this.enum_values.indexOf(sanitized)]
 
     this.value = sanitized
+
+    if (!initial) {
+      this.is_dirty = true
+    }
+
     this.onChange()
     this.change()
   }
@@ -179,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]
@@ -345,7 +347,17 @@ export class SelectEditor extends AbstractEditor {
   }
 
   showValidationErrors (errors) {
-    this.previous_error_setting = this.jsoneditor.options.show_errors
+    const showErrors = this.jsoneditor.options.show_errors
+    const changeOrInteraction = showErrors === 'change' || showErrors === 'interaction'
+    const never = showErrors === 'never'
+
+    if (never) {
+      return
+    }
+
+    if (changeOrInteraction && !this.is_dirty) {
+      return
+    }
 
     const addMessage = (messages, error) => {
       if (error.path === this.path) {

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) {