diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index 73caae17..2bed8267 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -1856,9 +1856,32 @@ small { color: var(--text-muted); }
font-size: 0.82rem;
white-space: nowrap;
}
-.sql-title {
+/* The name is the switch: one target instead of a label and a button that
+ said the same thing twice, with the dot carrying the state. */
+.sql-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.3rem;
+ height: 1.5rem;
+ min-height: 0;
+ padding: 0 0.4rem;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ background: transparent;
+ color: var(--text-muted);
+ font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
+ cursor: pointer;
+}
+.sql-toggle:hover {
+ border-color: color-mix(in srgb, var(--border-light) 60%, transparent);
+ color: var(--text);
+}
+.sql-toggle[aria-pressed="true"] {
+ border-color: color-mix(in srgb, var(--accent-green) 50%, var(--border-light));
+ background: color-mix(in srgb, var(--accent-green) 10%, transparent);
+ color: var(--accent-text);
}
.sql-state {
width: 0.5rem;
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/app.ts b/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/app.ts
index 8d1fb44f..306438c3 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/app.ts
+++ b/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/app.ts
@@ -5343,15 +5343,15 @@ function renderSdrSquelch() {
}
if (sdrSquelchDbEl) sdrSquelchDbEl.disabled = !sdrSquelchSupported;
if (sdrSquelchToggleBtn) {
- sdrSquelchToggleBtn.textContent = sdrSquelchEnabled ? "On" : "Off";
sdrSquelchToggleBtn.setAttribute("aria-pressed", String(sdrSquelchEnabled));
+ sdrSquelchToggleBtn.title = sdrSquelchEnabled ? "Turn the squelch off" : "Turn the squelch on";
}
const state = !sdrSquelchEnabled ? "off" : (sdrSquelchIsPassing() ? "open" : "closed");
if (sdrSquelchStateEl) {
sdrSquelchStateEl.dataset.state = state;
- sdrSquelchStateEl.setAttribute(
+ sdrSquelchStateEl.parentElement?.setAttribute(
"aria-label",
- state === "off" ? "Squelch off" : (state === "open" ? "Squelch open" : "Squelch closed"),
+ state === "off" ? "Squelch off" : (state === "open" ? "Squelch on, open" : "Squelch on, closed"),
);
}
if (squelchLabelEl) squelchLabelEl.textContent = String(sdrSquelchThresholdDb);
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/spectrum-layout.mjs b/src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/spectrum-layout.mjs
index c086bac8..b9ac0689 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/spectrum-layout.mjs
+++ b/src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/spectrum-layout.mjs
@@ -144,12 +144,12 @@ try {
shown: getComputedStyle(line).display !== "none",
db: Number(document.getElementById("sdr-squelch-db").value),
label: Number(document.getElementById("spectrum-squelch-label").textContent),
- toggle: document.getElementById("sdr-squelch-toggle").textContent,
+ toggle: document.getElementById("sdr-squelch-toggle").getAttribute("aria-pressed"),
top: Math.round(line.getBoundingClientRect().top),
};
});
assert.equal(squelchOn.shown, true, "the threshold line did not appear with the squelch on");
- assert.equal(squelchOn.toggle, "On", "the toggle did not follow the squelch state");
+ assert.equal(squelchOn.toggle, "true", "the SQL switch did not follow the squelch state");
assert.equal(squelchOn.label, squelchOn.db, "the line and the readout disagree on the threshold");
// Dragging the line down lowers the threshold and tells the server.