Spike: a11y errors on the preview

example/resources/form.json

@@ -1,26 +1,17 @@
 {
   "components": [
-    {
-      "type": "text",
-      "text": "# Invoice\nLorem _ipsum_ __dolor__ `sit`.\n  \n  \nA list of BPMN symbols:\n* Start Event\n* Task\nLearn more about [forms](https://bpmn.io).\n  \n  \nThis [malicious link](javascript:throw onerror=alert,'some string',123,'haha') __should not work__."
-    },
-    {
-      "key": "creditor",
-      "label": "Creditor",
-      "type": "textfield",
-      "validate": {
-        "required": true
-      }
-    },
     {
       "description": "An invoice number in the format: C-123.",
       "key": "invoiceNumber",
-      "label": "Invoice Number",
       "type": "textfield",
       "validate": {
         "pattern": "^C-[0-9]+$"
       }
     },
+    {
+      "type": "image",
+      "source": "https://foo.png"
+    },
     {
       "key": "amount",
       "label": "Amount",

example/src/app.js

@@ -11,6 +11,7 @@ const container = document.querySelector('.playground');
 
 const designBtn = document.querySelector('.design');
 const validateBtn = document.querySelector('.validate');
+const checkA11yBtn = document.querySelector('.check-a11y');
 
 const data = {
   creditor: 'John Doe Company',
@@ -39,6 +40,7 @@ const data = {
 };
 
 let mode;
+let a11yEnabled = false;
 
 const formPlayground = new CamundaFormPlayground({
   container,
@@ -79,8 +81,30 @@ function triggerDesign() {
   formPlayground.collapse();
 }
 
+function toggleA11y() {
+  a11yEnabled = !a11yEnabled;
+
+  const form = formPlayground.getForm();
+  const formEditor = formPlayground.getEditor();
+
+  const onSchemaChanged = async () => {
+    setTimeout(() => form.get('a11yValidation').execute(), 500);
+  };
+
+  if (a11yEnabled) {
+    form.get('a11yValidation').execute();
+    checkA11yBtn.classList.add('active');
+    formEditor.on('changed', onSchemaChanged);
+  } else {
+    checkA11yBtn.classList.remove('active');
+    formEditor.off('changed', onSchemaChanged);
+    form.get('a11yValidation').clear();
+  }
+}
+
 designBtn.addEventListener('click', triggerDesign);
 validateBtn.addEventListener('click', triggerValidation);
+checkA11yBtn.addEventListener('click', toggleA11y);
 
 document.body.addEventListener('keydown', function(event) {
   if (event.code === 'KeyP' && event.shiftKey && (event.metaKey || event.ctrlKey)) {

example/src/index.html

@@ -37,6 +37,7 @@
         </button>
       </div>
       <div class="buttons">
+        <button class="check-a11y">Check a11y</button>
         <span class="execution-platform">5.2.0</span>
       </div>
     </div>

tasks/link-deps.js

@@ -8,7 +8,7 @@ const customLinkersMap = {
   'bpmn-io/form-js': linkFormJs
 };
 
-const DEFAULT_BRANCH = 'develop';
+const DEFAULT_BRANCH = 'a11y-errors-viewer';
 
 const demoDir = path.join(__dirname, '..');
 const dependenciesDir = path.join(__dirname, '.linked-dependencies');