@json-editor/json-editor 2.13.2 → 2.14.0

package/src/themes/bootstrap5.js

@@ -68,8 +68,8 @@ export class bootstrap5Theme 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)
     el.classList.remove('form-control')
     el.classList.add('form-range')
     return el
@@ -163,7 +163,7 @@ export class bootstrap5Theme extends AbstractTheme {
     return el
   }
 
-  getFormControl (label, input, description, infoText) {
+  getFormControl (label, input, description, infoText, formName) {
     const group = document.createElement('div')
     group.classList.add('form-group')
 
@@ -174,9 +174,15 @@ export class bootstrap5Theme extends AbstractTheme {
       input.classList.add('form-check-input')
       label.classList.add('form-check-label')
 
-      const unique = (Date.now() * Math.random()).toFixed(0)
-      input.setAttribute('id', unique)
-      label.setAttribute('for', unique)
+      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')
+      }
 
       check.appendChild(input)
       check.appendChild(label)
@@ -201,6 +207,28 @@ export class bootstrap5Theme extends AbstractTheme {
     return group
   }
 
+  getHiddenLabel (text) {
+    const el = document.createElement('label')
+    el.textContent = text
+    el.classList.add('visually-hidden')
+    return el
+  }
+
+  visuallyHidden (element) {
+    if (!element) {
+      return
+    }
+
+    element.classList.add('visually-hidden')
+  }
+
+  getHiddenText (text) {
+    const el = document.createElement('span')
+    el.textContent = text
+    el.classList.add('sr-only')
+    return el
+  }
+
   getInfoButton (text) {
     const button = document.createElement('button') /* shoud be a <button> but no fitting tbws style... */
     button.type = 'button'
@@ -347,7 +375,8 @@ export class bootstrap5Theme extends AbstractTheme {
   }
 
   getHeader (text, pathDepth) {
-    const el = document.createElement('h3')
+    const el = document.createElement('span')
+    el.classList.add('h3')
     el.classList.add('card-title')
     el.classList.add('level-' + pathDepth)
 
@@ -436,6 +465,7 @@ export class bootstrap5Theme extends AbstractTheme {
 
     input.errmsg.style.display = 'block'
     input.errmsg.textContent = text
+    input.errmsg.setAttribute('role', 'alert')
   }
 
   removeInputError (input) {

package/src/themes/html.js

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

package/src/themes/spectre.js

@@ -99,7 +99,7 @@ export class spectreTheme extends AbstractTheme {
   }
 
   getHeader (text, pathDepth) {
-    const el = document.createElement('h4')
+    const el = document.createElement('span')
     if (typeof text === 'string') {
       el.textContent = text
     } else {
@@ -182,14 +182,11 @@ export class spectreTheme extends AbstractTheme {
   }
 
   /* Create input field for type="range" */
-  getRangeInput (min, max, step) {
-    const el = this.getFormInputField('range')
+  getRangeInput (min, max, step, description, formName) {
+    const el = super.getRangeInput(min, max, step, description, formName)
     el.classList.add('slider')
     el.classList.remove('form-input')
     el.setAttribute('oninput', 'this.setAttribute("value", this.value)')
-    el.setAttribute('min', min)
-    el.setAttribute('max', max)
-    el.setAttribute('step', step)
     return el
   }
 
@@ -213,7 +210,7 @@ export class spectreTheme extends AbstractTheme {
     return el
   }
 
-  getFormControl (label, input, description, infoText) {
+  getFormControl (label, input, description, infoText, formName) {
     const group = document.createElement('div')
     group.classList.add('form-group')
 
@@ -237,6 +234,16 @@ export class spectreTheme 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
   }
 
@@ -393,6 +400,7 @@ export class spectreTheme extends AbstractTheme {
     }
     input.errmsg.classList.remove('d-hide')
     input.errmsg.textContent = text
+    input.errmsg.setAttribute('role', 'alert')
   }
 
   removeInputError (input) {

package/src/validator.js

@@ -918,9 +918,9 @@ export class Validator {
     }
 
     const validatorRx = {
-      date: /^(\d{4}\D\d{2}\D\d{2})?$/,
-      time: /^(\d{2}:\d{2}(?::\d{2})?)?$/,
-      'datetime-local': /^(\d{4}\D\d{2}\D\d{2}[ T]\d{2}:\d{2}(?::\d{2})?)?$/
+      date: /^(\d{4}\D\d{2}\D\d{2})$/,
+      time: /^(\d{2}:\d{2}(?::\d{2})?)$/,
+      'datetime-local': /^(\d{4}\D\d{2}\D\d{2}[ T]\d{2}:\d{2}(?::\d{2})?)$/
     }
     const format = {
       date: '"YYYY-MM-DD"',
@@ -946,6 +946,7 @@ export class Validator {
       /* Flatpickr validation */
       return _validateFlatPicker(schema, value, path, editor)
     }
+
     return []
   }
 

package/tests/codeceptjs/core_test.js

@@ -5,6 +5,17 @@ const { DEFAULT_WAIT_TIME } = require('./test-config')
 
 Feature('core')
 
+Scenario('should hide titles @titleHidden', async ({ I }) => {
+  I.amOnPage('title-hidden.html')
+  I.waitForElement('.je-ready')
+  I.waitForText('root', DEFAULT_WAIT_TIME, '.sr-only')
+  I.waitForText('boolean', DEFAULT_WAIT_TIME, '.sr-only')
+  I.waitForText('integer', DEFAULT_WAIT_TIME, '.sr-only')
+  I.waitForText('number', DEFAULT_WAIT_TIME, '.sr-only')
+  I.waitForText('string', DEFAULT_WAIT_TIME, '.sr-only')
+  I.waitForText('array', DEFAULT_WAIT_TIME, '.sr-only')
+})
+
 Scenario('should show validation errors based on "show_errors" setting @showValidationErrors', async ({ I }) => {
   I.amOnPage('show-validation-errors.html')
   I.waitForElement('.je-ready')

package/tests/codeceptjs/editors/array_test.js

@@ -4,6 +4,13 @@ const { DEFAULT_WAIT_TIME } = require('../test-config')
 
 Feature('array')
 
+Scenario('should be readonly if specified and not disabled @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.seeDisabledAttribute('[name="root[array][0]"]')
+  I.seeDisabledAttribute('[name="root[array][1]"]')
+})
+
 Scenario('Should display properties enum titles in items headerTemplate @headerTemplate', async ({ I }) => {
   I.amOnPage('array-header-template.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)

package/tests/codeceptjs/editors/button_test.js

@@ -31,7 +31,7 @@ Scenario('should not leave any footprints in result', async ({ I }) => {
   I.waitForValue('.value', JSON.stringify({ textinput: '' }))
 })
 
-Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
   I.seeDisabledAttribute('[data-schemapath="root.button"] button')

package/tests/codeceptjs/editors/checkbox_test.js

@@ -4,7 +4,7 @@ const { DEFAULT_WAIT_TIME } = require('../test-config')
 
 Feature('checkbox')
 
-Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')
   I.waitForText('READY', DEFAULT_WAIT_TIME, '.state')
   I.seeDisabledAttribute('[name="root[checkbox]"]')

package/tests/codeceptjs/editors/integer_test.js

@@ -64,7 +64,7 @@ Scenario('should respect step by incrementing and decrementing the value of a ra
   I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":5}')
 })
 
-Scenario('should be readonly if specified and not disabled', async ({ I }) => {
+Scenario('should be readonly if specified and not disabled @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')
   I.seeReadOnlyAttribute('[name="root[integer]"]')
 })

package/tests/codeceptjs/editors/multiselect_test.js

@@ -2,7 +2,7 @@
 
 Feature('multiselect')
 
-Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')
   I.seeDisabledAttribute('[name="root[multiselect]"]')
 })

package/tests/codeceptjs/editors/number_test.js

@@ -72,7 +72,7 @@ Scenario('should respect step by incrementing and decrementing the value of a ra
   I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
 })
 
-Scenario('should be readonly if specified and not disabled @number', async ({ I }) => {
+Scenario('should be readonly if specified and not disabled @number @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')
   I.seeReadOnlyAttribute('[name="root[number]"]')
 })

package/tests/codeceptjs/editors/object_test.js

@@ -5,6 +5,13 @@ const { DEFAULT_WAIT_TIME } = require('../test-config')
 
 Feature('object')
 
+Scenario('should be readonly if specified and not disabled @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.seeDisabledAttribute('[name="root[object][string]"]')
+  I.seeDisabledAttribute('[name="root[object][number]"]')
+})
+
 Scenario('@case-sensitive-property-search', async ({ I }) => {
   I.amOnPage('object-case-sensitive-property-search-true.html')
   I.click('.json-editor-btn-edit_properties')

package/tests/codeceptjs/editors/radio_test.js

@@ -2,9 +2,8 @@
 
 Feature('radio')
 
-Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')
-
   I.seeDisabledAttribute('[id="root[radio][0]"]')
   I.seeDisabledAttribute('[id="root[radio][1]"]')
 })

package/tests/codeceptjs/editors/rating_test.js

@@ -2,9 +2,8 @@
 
 Feature('rating')
 
-Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')
-
   I.seeDisabledAttribute('[id="root[rating]5"]')
   I.seeDisabledAttribute('[id="root[rating]4"]')
   I.seeDisabledAttribute('[id="root[rating]3"]')

package/tests/codeceptjs/editors/select_test.js

@@ -2,7 +2,7 @@
 
 Feature('select')
 
-Scenario('should return correct booleans values when selected', async ({ I }) => {
+Scenario('should return correct booleans values when selected @readOnly', async ({ I }) => {
   I.amOnPage('select.html')
   I.click('.get-value')
   I.waitForValue('.value', '{"boolean":true}')

package/tests/codeceptjs/editors/string_test.js

@@ -98,7 +98,7 @@ Scenario('Should work correctly in arrays @optional', async ({ I }) => {
   I.switchTo()
 })
 
-Scenario('should be readonly if specified and not disabled', async ({ I }) => {
+Scenario('should be readonly if specified and not disabled @readOnly', async ({ I }) => {
   I.amOnPage('read-only.html')
   I.seeReadOnlyAttribute('[name="root[string]"]')
 })

package/tests/codeceptjs/issues/issue-gh-1471_test.js

@@ -0,0 +1,17 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1471 should remain fixed @issue-1471', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1471.html')
+  I.waitForElement('.je-ready')
+  I.dontSee('Date must be in the format "YYYY-MM-DD"')
+  I.dontSee('Time must be in the format "HH:MM"')
+  I.dontSee('Datetime must be in the format "YYYY-MM-DD HH:MM"')
+  I.fillField('[name="root[date]"]', '')
+  I.fillField('[name="root[time]"]', '')
+  I.fillField('[name="root[datetime-local]"]', '')
+  I.waitForText('Date must be in the format "YYYY-MM-DD"')
+  I.waitForText('Time must be in the format "HH:MM"')
+  I.waitForText('Datetime must be in the format "YYYY-MM-DD HH:MM"')
+})

package/tests/codeceptjs/issues/issue-gh-812_test.js

@@ -8,7 +8,7 @@ Scenario('GitHub issue 812 should remain fixed @issue-812', async ({ I }) => {
   I.waitForValue('.debug', '{"students":[{"name":"AAA","sessions":[{"student_name":"AAA","minutes":15},{"student_name":"AAA","minutes":15}]},{"name":"BBB","sessions":[{"student_name":"BBB","minutes":20}]},{"name":"CCC","sessions":[{"student_name":"CCC","minutes":10}]}]}')
 
   I.amAcceptingPopups()
-  I.click('//*[@id="root.students.0"]/span[2]/button[contains(@class, "json-editor-btn-delete") and @data-i="0"]')
+  I.click('//*[@id="root.students.0"]/span[3]/button[contains(@class, "json-editor-btn-delete") and @data-i="0"]')
   I.retry({ retries: 5, minTimeout: 500 }).seeInPopup('Are you sure you want to remove this item?')
   I.acceptPopup()
 
@@ -16,7 +16,7 @@ Scenario('GitHub issue 812 should remain fixed @issue-812', async ({ I }) => {
   I.waitForValue('.debug', '{"students":[{"name":"BBB","sessions":[{"student_name":"BBB","minutes":20}]},{"name":"CCC","sessions":[{"student_name":"CCC","minutes":10}]}]}')
 
   I.amAcceptingPopups()
-  I.click('//*[@id="root.students.0"]/span[2]/button[contains(@class, "json-editor-btn-delete") and @data-i="0"]')
+  I.click('//*[@id="root.students.0"]/span[3]/button[contains(@class, "json-editor-btn-delete") and @data-i="0"]')
   I.retry({ retries: 5, minTimeout: 500 }).seeInPopup('Are you sure you want to remove this item?')
   I.acceptPopup()
 

package/tests/codeceptjs/meta-schema_test.js

@@ -58,7 +58,7 @@ Scenario('work with json-schema meta-schema @meta-schema-core', async ({ I }) =>
 // https://github.com/json-editor/json-editor/issues/823
 Scenario('work with json-schema meta-schema @meta-schema', async ({ I }) => {
   I.amOnPage('issues/issue-gh-823-meta-schema.html')
-  I.waitForElement('[data-schemapath="root"] h3', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root"] span', DEFAULT_WAIT_TIME)
   I.click('Object Properties')
   I.click('options')
   I.see('$ref')

package/tests/codeceptjs/schemaloader_test.js

@@ -6,7 +6,7 @@ Feature('schemaloader')
 
 Scenario('resolving nested external URNs', async ({ I }) => {
   I.amOnPage('urn.html')
-  I.waitForElement('[data-schemapath="root"] h3', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root"] span', DEFAULT_WAIT_TIME)
   I.seeElementInDOM('[data-schemapath="root.fname"]')
   I.seeElementInDOM('[data-schemapath="root.lname"]')
   I.click('.get-value')

package/tests/pages/advanced.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Advanced JSON Editor Example</title>

package/tests/pages/anyof-2.html

@@ -10,6 +10,7 @@
 <body>
 
 <div class="container">
+    <h1>Test</h1>
     <label for="value">Value</label>
     <textarea class="form-control" id="value" rows="12" style="font-size: 12px; font-family: monospace;"></textarea>
     <button id='set-value'>Set Value</button>

package/tests/pages/anyof.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8"/>
     <title>anyOf</title>
@@ -10,7 +10,9 @@
 <body>
 
 <div class="container">
-    <textarea class="value form-control" rows="10"></textarea>
+    <h1>Test</h1>
+    <label for="value">value</label>
+    <textarea id="value" class="value form-control" rows="10"></textarea>
     <button class='get-value'>Get Value</button>
     <button class='set-value'>Set Value</button>
     <div class='json-editor-container'></div>

package/tests/pages/array-anyof.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>array anyof</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-checkboxes-infotext.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <title>array checkboxes infotext</title>
     <meta charset="utf-8"/>
     <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-checkboxes.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>array checkboxes</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-choices.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>Array choices</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
   <link rel="stylesheet" href="../../dist/css/jsoneditor.min.css">
@@ -9,7 +10,9 @@
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-events-table.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <title>array events table</title>
     <meta charset="utf-8"/>
     <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-events.html

@@ -1,13 +1,17 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>array events</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
-<textarea class="action" cols="30" rows="5"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
+<label for="action">Value</label>
+<textarea id="action" class="action" cols="30" rows="5"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-header-template.html

@@ -10,6 +10,7 @@
 <body>
 
 <div class="container">
+    <h1>Test</h1>
     <div id='editor-container'></div>
 </div>
 

package/tests/pages/array-integers.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>array integers</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Title</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-multiselects.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>array multiselects</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-nested-arrays.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>array nested arrays</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-numbers.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>array numbers</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>
 

package/tests/pages/array-objects.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <title>array-objects</title>
   <meta charset="utf-8"/>
   <script src="../../dist/jsoneditor.js"></script>
 </head>
 <body>
 
-<textarea class="debug" cols="30" rows="10"></textarea>
+<h1>Test</h1>
+<label for="debug">Value</label>
+<textarea id="debug" class="debug" cols="30" rows="10"></textarea>
 <button class='get-value'>Get Value</button>
 <div class='container'></div>