chore(demo): add tabindex and onclick attributes to canvas elements to support keyboard events

jspanchu · jspanchu · commit e53eb9b96d5b · 2025-12-23T13:32:12.000-05:00
diff --git a/docs/public/demo/plain-javascript-annotation-wasm-registry.html b/docs/public/demo/plain-javascript-annotation-wasm-registry.html
@@ -8,7 +8,7 @@
     <script src="example.js"></script>
   </head>
   <body>
-    <canvas id="vtk-wasm-window"></canvas>
+    <canvas id="vtk-wasm-window" tabindex="-1" onclick="focus()"></canvas>
     <script>
       vtkReady.then((vtk) => {
         buildWASMScene(vtk,"This scene assigns the VTK.wasm bundle from GitLab registry to data-url in the script tag"); // Also available on window.vtk
diff --git a/docs/public/demo/plain-javascript.html b/docs/public/demo/plain-javascript.html
@@ -4,7 +4,7 @@
     <script src="example.js"></script>
   </head>
   <body>
-    <canvas id="vtk-wasm-window"></canvas>
+    <canvas id="vtk-wasm-window" tabindex="-1" onclick="focus()"></canvas>
     <script>
       vtkWASM.createNamespace("https://gitlab.kitware.com/api/v4/projects/13/packages/generic/vtk-wasm32-emscripten/9.5.20251215/vtk-9.5.20251215-wasm32-emscripten.tar.gz")
       .then((vtk) => {
diff --git a/docs/public/demo/simple-app/index.html b/docs/public/demo/simple-app/index.html
@@ -1,19 +1,18 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Standalone VTK.wasm example</title>
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Standalone VTK.wasm example</title>
   <script type="module" crossorigin src="./assets/index-BKpEjZ8W.js"></script>
   <link rel="stylesheet" crossorigin href="./assets/index-XX6AMuQ-.css">
-</head>
-
-<body>
-    <div id="app">
-        <canvas></canvas>
-    </div>
-
-</body>
-
-</html>
+</head>
+
+<body>
+    <div id="app">
+        <canvas tabindex="-1" onclick="focus()"></canvas>
+    </div>
+</body>
+
+</html>
diff --git a/examples/js/simple-app/index.html b/examples/js/simple-app/index.html
@@ -9,7 +9,7 @@
 
 <body>
     <div id="app">
-        <canvas></canvas>
+        <canvas tabindex="-1" onclick="focus()"></canvas>
     </div>
     <script type="module" src="/src/main.js"></script>
 </body>
