[Frontend][Testing] Guard against dead affordances - six enabled-but-inert controls found in one audit pass

[Chris0Jeky]

Found during the maintainer's hands-on dogfooding audit, 2026-08-22 (v0.7.2 at 127.0.0.1:5000). Tracker: #1947.

Realignment 2026-08-23 (main a43df082c): the instance table below is now historical — the five cleanly-attributable rows are fixed, cited per row. The remaining scope of this issue is the guard mechanism itself, not the six instances. AC1's anchor half is delivered; its button half plus AC2/AC3/AC4 are open. Rows were ticked only where a merged PR closed the owning issue.

The pattern

The single most common defect class in the audit was a control that looks interactive and does nothing. Verified instances, each with DOM evidence in its own issue:

Control	Evidence	Issue	Status 2026-08-23
Topbar "Settings" icon (read as a theme toggle)	button.paper-topbar__icon-btn, no effect; body HTML byte-identical before/after	#1932	✅ fixed — PR #1954 (now labelled Appearance settings)
Topbar notifications bell	same	#1932	✅ fixed — PR #1954
Topbar avatar	<div aria-label="Profile: D"> — not even a button, so not focusable	#1932	✅ fixed — PR #1954 (div → button, real account menu)
Sidebar "Solo Workspace"	<button aria-label="Switch workspace">, no dialog/menu/route change	#1934	✅ fixed — PR #1957 (rendered non-interactive)
Review "Tune heuristics →"	<a href="#">, no handler	#1941	✅ fixed — PR #1957 (removed)
Inbox "Accept on board" with no board selected	enabled, fires zero network requests, no message	#1944, #1938	✅ dead-affordance half fixed — PR #1952 (disabled until a board is chosen, re-verified by the horizon run). #1938 stays open for the separate error-toast defect.

Six instances across five surfaces, all found by a single afternoon of clicking. That density says the next skin change or refactor will produce more, and each was individually cheap to ship precisely because nothing failed loudly.

These are worse than missing features: a missing control tells the user to look elsewhere, a dead control tells them the product is broken. That is the exact sentence the maintainer ended their walkthrough with — "it feels like it's just there for someone that doesn't exist."

Proposal

A mechanical guard, cheaper than fixing this class one instance at a time:

• Lint/spec rule: no <a href="#"> without a bound handler; no <button> rendered without a click binding.

  Half delivered 2026-08-23. PR fix(frontend): #1934 #1941 dead sidebar + provenance controls #1957 shipped frontend/taskdeck-web/src/tests/guards/deadAnchors.spec.ts — a repo-wide SFC scan with detector self-tests and a canary, covering both the static href="#" and the bound :href="… ?? '#'" forms. Its own header states what it does not cover, and that is exactly the remaining scope here: dead <button> elements are not detected (only <a> is scanned), nor are href="javascript:void(0)", href="", v-on="{ click: fn }" object syntax, or a runtime-assembled href. The button half of this rule is still open.

• A11y-adjacent rule: anything with an interactive aria-label (Settings, Notifications, Switch workspace, Profile) must be a focusable interactive element — the avatar <div> fails this today.

  Open. No mechanization. (The avatar instance itself was fixed by PR fix(frontend): #1932 wire Paper topbar controls #1954; the rule that would have caught it does not exist.)

• Disabled-state rule: a primary action whose preconditions are unmet must be disabled or must render validation — never enabled-and-silent (the [Frontend][UX] Capture triage: no pre-triage edit, and Accept/Reject give no legible state feedback #1944 case).

  Open. PR fix(frontend): #1953 token-level disabled treatment for Paper buttons #1988 ([Frontend][Paper] .pbtn has no :disabled treatment - every disabled Paper button looks enabled (systemic half of the #1944/#1949 class) #1953) shipped token-level :disabled treatment for .pbtn, which makes this rule enforceable but does not enforce it.

• Consider a smoke pass that walks each main route, enumerates interactive elements, activates them in an isolated context, and flags any that produce no state change, navigation, request, or rendered feedback. That is essentially the manual procedure that found all six.

  Open. A second guard now exists alongside the first — frontend/taskdeck-web/src/tests/guards/nativeBrowserDialogs.spec.ts (from [Frontend][UX] Reject collects its reason through a native window.prompt while Apply and Delete use in-app dialogs #1969, PR fix(frontend): #1964 #1969 review interaction legibility #1998) — so src/tests/guards/ is the established home for this work.

• Added 2026-08-23 — decide whether dead keystrokes are in scope. The horizon-journey run found a class this guard cannot see at all ([Frontend][UX] Documented bare-letter shortcuts (H/T/B/I/R, G T, board C/R) have no handler, and Settings has no Keyboard page #1968): the affordance is a kbd glyph and a help-table row, not a DOM node, so no SFC scan reaches it. Either name it in the smoke pass above or explicitly descope it to [Frontend][UX] Documented bare-letter shortcuts (H/T/B/I/R, G T, board C/R) have no handler, and Settings has no Keyboard page #1968.

Note on scope

This is a guard, not a redesign — it does not decide what each control should do. Each dead control still needs its own fix in its own issue. The value here is preventing the seventh.