fix(draft-card): Phase 5 followups — buttons fit, sr-only, copy, locale, iframe shortcut#32
Merged
Merged
Conversation
…le, iframe shortcut
Surfaced by visual+behavior QA against prod (docs/qa/2026-05-23-draft-annotation-phase5.md).
B1 — N keyboard shortcut now fires when iframe is focused.
useDraftKeyboard accepts an optional iframeRef; when present, the same
keydown handler attaches to iframe.contentDocument (same-origin only,
guarded with try/catch). Re-attaches on iframe `load` so it follows
version-switches. AppMainViewer threads its iframeRef through.
B2 — Action-row buttons fit inside the 300 px rail.
Drop the 8 px gap to 6 px; pass `className={styles.kbdInBtn}` to the
two Kbds inside the Draft + Send buttons. The new `.kbdInBtn` rule in
DraftCard.module.css targets the rendered <kbd> element (higher
specificity than the Kbd module's `.key`) to compress min-width 20→14 px,
font-size 10.5→9.5 px, padding 2px 6px→1px 4px. Recovers ~30 px; Cancel
is no longer clipped. Sibling Kbd consumers (annotations-rail add button,
command palette) are untouched.
B3 — `.sr-only` class now ships globally.
Added the canonical visually-hidden recipe to src/app/globals.css so
`<Form.Label className="sr-only">Annotation body</Form.Label>` stops
rendering as visible text above the textarea.
M1 — AlertDialog body copy branches over (bodyLen, pinCount).
"You'll lose 0 pins and the text you typed" → "You'll lose the text you
typed." (and similar branches for pins-only, both, neither). Discard is
disabled on the empty branch in practice, but the copy handles all four
combinations defensively.
M2 — Char counter no longer drifts by browser locale.
Replaced toLocaleString() (which renders `10.000` in pt-BR, `10,000` in
en-US) with a fixed thousands-separator regex matching the DS-32 contract
(`10 000` with a thin space).
4 tasks
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
Five fixes surfaced by visual+behavior QA of #31 against prod. Quick wins; no API surface changes.
useDraftKeyboardaccepts an optionaliframeRef; bridges keydown fromiframe.contentDocumentto the parent's handler (same-origin only, try/catch guarded). AppMainViewer threads its iframeRef through..kbdInBtnclassName passed to<Kbd>(min-width 14, font 9.5 px, padding 1 4); actions row gap 8 → 6 px. Recovers ~30 px. Sibling Kbd consumers (annotations-rail add button, command palette) are untouched.Form.Label className="sr-only"rendered as visible "Annotation body" textsrc/app/globals.css.10.000(pt-BR) instead of DS-spec10 000toLocaleString()with a fixed thousands-separator regex.Test plan
pnpm tsc --noEmitcleanpnpm biome check src/components/DraftCard src/hooks/useDraftKeyboard.ts src/components/MockupViewer/AppMainViewer.tsx src/app/globals.css— clean10 000Related
docs/qa/2026-05-23-draft-annotation-phase5.md(gitignored local artifact)