fix(ascii): make the AI Config mark legible at the size it renders - #298
Merged
Conversation
`⚿` (SQUARED KEY) was never missing from the font the way it looked. It drew correctly -- it is simply a boxed glyph whose meaning lives in fine interior detail, and at the 11px the header renders it at, the box outline is all that survives. Pixel-compared against the .notdef box a browser draws for a glyph it genuinely lacks: at 34px the two are plainly different, at 11px they are not. `◇` instead, hollow to AI Analyze's filled `◈`, so the program's two AI surfaces read as one family. It is a bold silhouette rather than a boxed one, which is what the rest of the deck's alphabet already is (`◉ ● ⏹ ⇋ ✕ ⧉ ⟳`) and what survives 11px. Note `▣` and `⊞` were rejected for sharing exactly the old glyph's defect. The mark is `aria-hidden` at both callsites now, matching what the deck documents everywhere else (`ui/modal.tsx`, `IconLabelButton`, `preset-picker`). Unhidden, it had been joining the accessible name, so a screen reader opened the header button with "squared key". The button needs `gap-2xs` for the space it used to get free: putting the mark in its own element to hide it also makes it a flex item of the button's row, and flex drops the leading whitespace of the text item beside it. The modal heading is inline and needs nothing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Follow-up to #295, which flagged this as "renders as tofu". That diagnosis was wrong, and the
real one changes the fix.
⚿(U+26BF SQUARED KEY) is not missing from the font. It draws correctly — it is simply a boxedglyph whose meaning lives in fine interior detail, and at the 11px the header renders it at, the box
outline is all that survives. Pixel-compared against the
.notdefbox a browser draws for a glyphit genuinely lacks:
.notdef⚿U+26BFSo the bug is legibility at size, not coverage.
▣and⊞were rejected as replacements forsharing exactly the same defect.
The mark
◇, hollow to AI Analyze's filled◈, so the program's two AI surfaces read as one family:It is a bold silhouette rather than a boxed one — which is what the rest of the deck's alphabet
already is (
◉ ● ⏹ ⇋ ✕ ⧉ ⟳), and what survives 11px. Zero emoji-presentation risk, unlike theobvious semantic alternative
⚙(U+2699 takes colour emoji presentation on some platforms).Two things that came with it
The mark is
aria-hiddennow, at both callsites — matching what the deck documents everywhereelse (
ui/modal.tsx,IconLabelButton,preset-picker). Unhidden it had been joining theaccessible name, so a screen reader opened the header button with "squared key configure ai". It
is now
"configure ai", pinned by a test.The header button needs
gap-2xs. Putting the mark in its own element to hide it also makes ita flex item of the button's row, and flex drops the leading whitespace of the text item beside it —
the space that used to come free from a single text node. Caught in the browser, not in tests: the
DOM
textContentstill reads"◇ configure ai"either way. The modal heading is inline and needsnothing.
Verified
Header and modal driven in Chrome. Accessible name resolves to
configure ai; modal keeps its ownaria-label="AI configuration"; both marks reportaria-hidden. Full suite green (2138 testsacross 5 workspaces), typecheck and Biome clean.
🤖 Generated with Claude Code