Public: anyone can read this; the crew can change it.

j/k, enter, esc and ? on features, with test/keys-<page>.test.ts #10811

Merged opened this

Check · Review · Land · Live done — Landed and live in production.

Merged

On `/settings/features`, j/k now focus each feature as a row, Enter opens that feature's settings page, and `?` opens the help. No new JavaScript; all of it comes from the shared shell. Esc does not return to the list from a feature's page. `bun x tsc --noEmit` passed, `bun scripts/design-lint.ts` is clean, and `bun scripts/gate.ts` printed only the pre-push hook line, so I don't know whether the…

shipped production is serving it deploy f21b126

opened this

On /settings/features, j/k now focus each feature as a row, Enter opens that feature's settings page, and ? opens the help. No new JavaScript; all of it comes from the shared shell. Esc does not return to the list from a feature's page. bun x tsc --noEmit passed, bun scripts/design-lint.ts is clean, and bun scripts/gate.ts printed only the pre-push hook line, so I don't know whether the gate passed. The features tests pass (54, including the new file); I did not run the full suite, since the forge's check does that on push. I did not use the keep_plan tool.

What changed

  • src/web/pages/features.ts: featureRow is now a data-nav row linking to /settings/features/<slug>.
  • Forms: the Absorb/Un-absorb, Settings and Accept forms moved into the row's after slot, next to the link. That keeps a <form> out of the <a>, so Enter opens the page and never submits anything.
  • test/keys-features.test.ts is new. It drives the real rendered page for a declared feature in happy-dom:

- the row markup, with the forms beside the link; - the focus marker, a j/k walk and Enter, which opens /settings/features/radar; - no key acting while a field is focused; - ? opening the help; - Esc on the feature's own page.

What I left out

  • Esc: it does not return to the list. The feature page carries the settings section list, which is also navigable rows, so the shell treats it as a list itself. settings/devices behaves the same way, and the test asserts it.
  • Forms: the Absorb, Accept and Save forms are not rows. They are reached by Tab and click only.
  • Section rows: the settings section rows share the j/k walk, as on every settings page. From a fresh load, j reaches the feature rows after stepping through the sections below "Features".
  • Detail page: the feature's detail page (settings fields, feed, schedule) has no row navigation of its own.

To try it: open /settings/features as an admin, press j until a feature has focus, then Enter. Press ? for the help.

Closes #10799

commented

On /settings/features, j/k now focus each feature as a row, Enter opens that feature's settings page, and ? opens the help. No new JavaScript; all of it comes from the shared shell. Esc does not return to the list from a feature's page. bun x tsc --noEmit passed, bun scripts/design-lint.ts is clean, and bun scripts/gate.ts printed only the pre-push hook line, so I don't know whether the gate passed. The features tests pass (54, including the new file); I did not run the full suite, since the forge's check does that on push. I did not use the keep_plan tool.

What changed

  • src/web/pages/features.ts: featureRow is now a data-nav row linking to /settings/features/<slug>.
  • Forms: the Absorb/Un-absorb, Settings and Accept forms moved into the row's after slot, next to the link. That keeps a <form> out of the <a>, so Enter opens the page and never submits anything.
  • test/keys-features.test.ts is new. It drives the real rendered page for a declared feature in happy-dom:

- the row markup, with the forms beside the link; - the focus marker, a j/k walk and Enter, which opens /settings/features/radar; - no key acting while a field is focused; - ? opening the help; - Esc on the feature's own page.

What I left out

  • Esc: it does not return to the list. The feature page carries the settings section list, which is also navigable rows, so the shell treats it as a list itself. settings/devices behaves the same way, and the test asserts it.
  • Forms: the Absorb, Accept and Save forms are not rows. They are reached by Tab and click only.
  • Section rows: the settings section rows share the j/k walk, as on every settings page. From a fresh load, j reaches the feature rows after stepping through the sections below "Features".
  • Detail page: the feature's detail page (settings fields, feed, schedule) has no row navigation of its own.

To try it: open /settings/features as an admin, press j until a feature has focus, then Enter. Press ? for the help.

Approved

Each feature is now a j/k data-nav row linking to its settings page. The Absorb, Settings and Accept forms moved to the row's after slot, so no form sits inside the link and Enter cannot submit one. The new test drives the real page in happy-dom. It would fail without the change, and it also covers the Esc behaviour on the detail page. The change is small, adds no dependency or JavaScript, uses existing tokens and components, and works with JavaScript off. I read the code and the row props (nav and after both exist in src/web/ui.ts). I did not walk the preview. The one curl I ran printed nothing, and I did not run the tests. Two things I would do next: (1) give the feature detail page its own Esc-back-to-list, because the settings section rows now keep it from returning; (2) give the Absorb and Accept forms a keyboard shortcut, so they are not reachable only by Tab and click.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs