fix(kbd): glyph instead of word for enter/backspace on non-Mac#34
Merged
Conversation
GLYPH_NON_MAC now resolves `enter` → ↵ and `backspace` → ⌫ (matching the Mac branch's existing glyphs) instead of the words "Enter" / "Backspace". Surfaced by Phase 5 re-QA on prod: the DraftCard action row (Cancel · Draft Ctrl+S · Send Ctrl+Enter) overflowed the 300 px rail on Windows/Linux because "Enter" alone was ~50 px wide. The Mac branch (⌘↵ = 14 px) fit; non-Mac didn't. Switching to ↵ saves ~36 px on Send and brings Cancel back inside the rail across all OSes. Notes: - Symmetric: Mac and non-Mac now show the same Enter glyph. The DS specimen at docs/design/design-system/29-kbd.html (line 234) already rendered ↵ in the rail-shortcut preview; this fix aligns runtime with that contract. - Screen-reader announcement unchanged: SR_NAME.enter is still 'Enter', so the aria-label keeps spelling out the key for assistive tech. - Backspace gets the same treatment because (a) the Mac branch already uses ⌫, and (b) any future button that spells out 'Backspace' (9 chars) would have the same overflow problem.
`pnpm seed:dev` was failing on a `PrismaClientValidationError: Unknown argument intentType` — leftover from the DraftCard intent removal (PRs #31 / fa0b916). The annotation create block still set `intentType: 'other'`; column doesn't exist anymore. Surfaced trying to seed the local dev DB after fresh clone.
The 300 px rail kept clipping the Cancel button on Windows / Linux even after PR #34 swapped Enter→↵, because the kbd chips were still ~36 px each. Drop them entirely; surface shortcuts in `data-tooltip` instead. · Cancel — `data-tooltip="Discard draft (Esc)"` (or "Close (Esc)" if empty) · Draft — `data-tooltip="Save draft (⌘S | Ctrl+S)"` driven by useIsMac() · Send — icon-only (VscSend, 28×28 pill), `aria-label="Send"`, `data-tooltip="Send (⌘↵ | Ctrl+↵)"`. Sending state replaces the glyph with a CSS spinner that respects prefers-reduced-motion. DS 32-draft-card.html cascades: all state-grid + in-context preview buttons drop the kbd chips, the React API code block shows the new imports + tooltip wiring, and a new Notes bullet documents the chip-vs-tooltip tradeoff so the rationale survives. Action-row CSS uses `:has(> svg)` so Retry / Sending… text states keep their pill width without a class swap. Unit tests now find icon-only Send via aria-label (extends `findButton` helper) — 9/9 pass.
The DraftCard refactor moved the open-draft shortcut from Ctrl+⇧+N
(legacy modal era) to single-key N, but four DS surfaces still carried
the old chip:
· 18-annotations-rail: four state-grid add buttons + empty-state copy
+ Behavior bullet
· 11-mockup-view: two add-button labels + rewritten "marking mode
lifecycle" → "annotation flow lifecycle" (marking mode no longer
exists; flow now drives through DraftCard)
· 29-kbd: the "when to use chip vs aria" matrix example swapped to
a neutral command-palette case (its prior "New annotation ⌘⇧N"
claim was stale)
· UX_SPEC.md: rail Add-button entry restated as single-key N
· full-prototype: rail add button shortcut chip
Cascaded to markup.alego.cloud as new versions of each mockup.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to PR #32 — surfaced by Phase 5 re-verification on prod.
GLYPH_NON_MACnow resolvesenter→ ↵ andbackspace→ ⌫ (matching the Mac branch's existing glyphs) instead of the words "Enter" / "Backspace".Why
The DraftCard action row (Cancel · Draft Ctrl+S · Send Ctrl+Enter) overflowed the 300 px rail on Windows / Linux: "Enter" alone is ~50 px. The Mac branch (
⌘↵= 14 px) fit; non-Mac didn't. Switching to ↵ recovers ~36 px on Send and brings Cancel back inside the rail across all OSes.Symmetry note
The DS specimen at
docs/design/design-system/29-kbd.html(line 234) already rendered ↵ in the rail-shortcut preview. The runtime was drifting from the documented contract; this fix re-aligns it.Accessibility unchanged
SR_NAME.enteris still'Enter', so thearia-labelon the kbd group keeps spelling out the key for screen readers.Test plan
pnpm tsc --noEmitcleanpnpm biome check src/components/Kbd/keys.tscleanRelated