feat: html harness focuses the example and allows quick navigation with J/K instead.

Examples/Web/index.html

@@ -46,6 +46,14 @@
             background: #000;
         }
         #status { color: #888; font-size: .85rem; margin: 0; }
+        #hint { color: #888; font-size: .8rem; margin-left: .5rem; }
+        #hint kbd {
+            font-family: inherit;
+            background: #2c2c2c;
+            border: 1px solid #444;
+            border-radius: 3px;
+            padding: 0 .3rem;
+        }
         #error {
             color: #ff6b6b;
             background: #3a1d1d;
@@ -67,6 +75,7 @@
             <option value="native">Native (1x)</option>
             <option value="fit">Fit</option>
         </select>
+        <span id="hint"><kbd>J</kbd>/<kbd>K</kbd> next/previous example</span>
     </div>
     <div id="error" hidden>This example crashed — see the browser console for details. Select another example to continue.</div>
     <div id="viewport">

Examples/Web/main.js

@@ -151,8 +151,36 @@ for (const name of Host.GetExampleNames().split('\n').filter(n => n.length > 0))
     opt.textContent = name;
     select.appendChild(opt);
 }
-select.addEventListener('change', () => selectExample(select.value));
+select.addEventListener('change', () => {
     selectExample(select.value);
+    canvas.focus();
+});
+selectExample(select.value);
+
+// J/K step through examples instead of arrow keys on the focused dropdown,
+// which would otherwise fight with examples that read the arrow keys.
+function stepExample(delta) {
+    const count = select.options.length;
+    if (count === 0) {
+        return;
+    }
+
+    select.selectedIndex = (select.selectedIndex + delta + count) % count;
+    selectExample(select.value);
+    canvas.focus();
+}
+
+document.addEventListener('keydown', (event) => {
+    if (event.repeat || event.target instanceof HTMLSelectElement) {
+        return;
+    }
+
+    if (event.code === 'KeyJ') {
+        stepExample(1);
+    } else if (event.code === 'KeyK') {
+        stepExample(-1);
+    }
+});
 
 setScaleMode(scaleMode, false);