diff --git a/frontend/app.js b/frontend/app.js
index cdc6517..24d64e9 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -757,7 +757,7 @@ function renderInstances() {
items,
(inst) => {
const cls = state.selectedRefs.includes(inst.ref) ? "active" : "";
- return `
${inst.ref} · ${inst.symbol}`;
+ return `${inst.ref} · ${inst.symbol}`;
},
LIST_ROW_HEIGHT
);
@@ -777,7 +777,7 @@ function renderNets() {
items,
(net) => {
const cls = net.name === state.selectedNet ? "active" : "";
- return `${net.name} (${net.class})`;
+ return `${net.name} (${net.class})`;
},
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) {
diff --git a/frontend/index.html b/frontend/index.html
index 8330fea..a183d6b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -39,16 +39,16 @@
Instances
-
-
+
+
@@ -219,7 +219,7 @@
-
+
diff --git a/frontend/styles.css b/frontend/styles.css
index ba84fe5..89d0508 100644
--- a/frontend/styles.css
+++ b/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;