Improve keyboard accessibility for lists and focus visibility

frontend/app.js

@@ -757,7 +757,7 @@ function renderInstances() {
     items,
     (inst) => {
       const cls = state.selectedRefs.includes(inst.ref) ? "active" : "";
-      return `<li class="${cls}" data-ref-item="${inst.ref}">${inst.ref} · ${inst.symbol}</li>`;
+      return `<li class="${cls}" data-ref-item="${inst.ref}" tabindex="0" role="button" aria-label="Instance ${inst.ref}, symbol ${inst.symbol}">${inst.ref} · ${inst.symbol}</li>`;
     },
     LIST_ROW_HEIGHT
   );
@@ -777,7 +777,7 @@ function renderNets() {
     items,
     (net) => {
       const cls = net.name === state.selectedNet ? "active" : "";
-      return `<li class="${cls}" data-net-item="${net.name}">${net.name} <small>(${net.class})</small></li>`;
+      return `<li class="${cls}" data-net-item="${net.name}" tabindex="0" role="button" aria-label="Net ${net.name}, class ${net.class}">${net.name} <small>(${net.class})</small></li>`;
     },
     LIST_ROW_HEIGHT
   );
@@ -1899,6 +1899,18 @@ function setupEvents() {
     renderAll();
   });
 
+  el.instanceList.addEventListener("keydown", (evt) => {
+    const item = evt.target.closest("[data-ref-item]");
+    if (!item) {
+      return;
+    }
+    if (evt.key !== "Enter" && evt.key !== " ") {
+      return;
+    }
+    evt.preventDefault();
+    item.click();
+  });
+
   el.netList.addEventListener("click", (evt) => {
     const item = evt.target.closest("[data-net-item]");
     if (!item) {
@@ -1911,6 +1923,18 @@ function setupEvents() {
     renderAll();
   });
 
+  el.netList.addEventListener("keydown", (evt) => {
+    const item = evt.target.closest("[data-net-item]");
+    if (!item) {
+      return;
+    }
+    if (evt.key !== "Enter" && evt.key !== " ") {
+      return;
+    }
+    evt.preventDefault();
+    item.click();
+  });
+
   el.issues.addEventListener("click", (evt) => {
     const row = evt.target.closest("[data-issue-id]");
     if (!row) {

frontend/index.html

@@ -39,16 +39,16 @@
             <h2>Instances</h2>
             <button id="isolateComponentBtn" class="chip">Isolate</button>
           </div>
-          <input id="instanceFilter" placeholder="Filter instances" />
+          <input id="instanceFilter" placeholder="Filter instances" aria-label="Filter instances" />
-          <ul id="instanceList" class="list"></ul>
+          <ul id="instanceList" class="list" aria-label="Instances list"></ul>
         </section>
         <section>
           <div class="sectionHead">
             <h2>Nets</h2>
             <button id="isolateNetBtn" class="chip">Isolate</button>
           </div>
-          <input id="netFilter" placeholder="Filter nets" />
+          <input id="netFilter" placeholder="Filter nets" aria-label="Filter nets" />
-          <ul id="netList" class="list"></ul>
+          <ul id="netList" class="list" aria-label="Nets list"></ul>
         </section>
       </aside>
 
@@ -219,7 +219,7 @@
             </div>
           </div>
           <div id="jsonFeedback" class="jsonFeedback"></div>
-          <textarea id="jsonEditor" spellcheck="false"></textarea>
+          <textarea id="jsonEditor" spellcheck="false" aria-label="Schemeta JSON editor"></textarea>
         </section>
       </aside>
     </main>

frontend/styles.css

@@ -74,6 +74,15 @@ button:disabled {
   cursor: not-allowed;
 }
 
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+.list li:focus-visible {
+  outline: 2px solid #155eef;
+  outline-offset: 1px;
+}
+
 button.primary {
   background: var(--accent);
   color: #fff;