From b12d8619585db36be57913deb1742f5a012b8c6e Mon Sep 17 00:00:00 2001
From: Niklas Kiefer <niklas.kiefer@camunda.com>
Date: Fri, 2 Jun 2023 13:14:18 +0200
Subject: [PATCH] feat(example): add a11y action

---
 example/resources/form.json | 17 ++++-------------
 example/src/app.js          | 24 ++++++++++++++++++++++++
 example/src/index.html      |  1 +
 tasks/link-deps.js          |  2 +-
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/example/resources/form.json b/example/resources/form.json
index ded3bb1..2c6e52e 100644
--- a/example/resources/form.json
+++ b/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",
diff --git a/example/src/app.js b/example/src/app.js
index 3013a68..0e1cec5 100644
--- a/example/src/app.js
+++ b/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)) {
diff --git a/example/src/index.html b/example/src/index.html
index 17fbc6c..337365c 100644
--- a/example/src/index.html
+++ b/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>
diff --git a/tasks/link-deps.js b/tasks/link-deps.js
index d95b2e2..e0ea363 100644
--- a/tasks/link-deps.js
+++ b/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');