mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandClaude Fable 5
daec380cdb
The existing `tiny-text` rule owns long body copy and deliberately exempts the UI furniture layer (nav, footer, links, buttons, labels, uppercase micro-labels). That left a real gap: a build shipped its entire furniture layer (nav links, category names, timecodes, meta rows) at 8px because the chosen pixel font only steps in 8px increments, and the design hook waved it through as merely "not on the DESIGN.md ramp" -- which the model resolved by adding 8px to the ramp. Being on the ramp launders the token, not the legibility problem. New `undersized-ui-text` quality rule closes that laundering path: - Flags interactive and short content-bearing text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below an 11px floor. The floor holds inside a footer; only non-interactive legal smallprint gets the softer 10px floor. - Ignores the design system entirely, so a value ON the ramp is still flagged. - Uppercase letterspaced micro-labels stay in scope (still functional). - Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. em/rem/%-sized text that computes at or above the floor never fires. - Complements tiny-text without double-flagging: long non-furniture body copy stays with tiny-text. Implemented as a single check in checkQuality (rules/checks.mjs), so both the static-html (jsdom) and browser adapters pick it up through the unified per-element path -- no dual wiring. Registered in registry/antipatterns.mjs. TDD: fixture tests/fixtures/antipatterns/undersized-ui-text.html (7 flag / 7 pass shapes), failing test first, then implement. Full fixtures suite 64/64. Deferred (blocked by an active release-gate eval reading build/_data/dist): regenerate the browser bundle (bun run build:browser -> cli/engine/detect-antipatterns-browser.js) and the extension detector (bun run build:extension -> extension/detector/detect.js + antipatterns.json) so the standalone browser/extension artifacts carry the new rule. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
97 lines
3.5 KiB
HTML
97 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>undersized-ui-text fixture</title>
|
|
<style>
|
|
/* Explicit pixel dimensions because jsdom does no layout. */
|
|
body { font-family: system-ui, sans-serif; font-size: 16px; }
|
|
.col { display: inline-block; width: 480px; vertical-align: top; }
|
|
|
|
/* --- should-flag styles --- */
|
|
.nav-link { font-size: 8px; }
|
|
.category { font-size: 8px; }
|
|
.meta { font-size: 9px; }
|
|
.btn-small { font-size: 10px; width: 120px; height: 24px; }
|
|
.cell-small { font-size: 9px; }
|
|
.caps-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
|
|
.footer-link { font-size: 8px; }
|
|
|
|
/* --- should-pass styles --- */
|
|
.legal { font-size: 10px; line-height: 1.5; } /* non-interactive footer smallprint at 10px */
|
|
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); font-size: 4px; }
|
|
.sup-marker { font-size: 8px; }
|
|
.sub-marker { font-size: 8px; }
|
|
.em-parent { font-size: 20px; }
|
|
.em-child { font-size: 0.6em; } /* resolves to 12px, above the floor */
|
|
.mock-terminal { width: 400px; }
|
|
.term-line { font-size: 9px; } /* legitimately small code/terminal text */
|
|
.normal-link { font-size: 12px; } /* at the floor, allowed */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ================= SHOULD FLAG (functional/UI text below the 11px floor) ================= -->
|
|
<div class="col" id="should-flag">
|
|
<h2>Should flag</h2>
|
|
|
|
<!-- interactive: nav link at 8px -->
|
|
<nav aria-label="primary">
|
|
<a href="/docs" class="nav-link">Flag Nav Link</a>
|
|
</nav>
|
|
|
|
<!-- non-interactive furniture: category label at 8px -->
|
|
<span class="category">Flag Category</span>
|
|
|
|
<!-- non-interactive furniture: meta row at 9px -->
|
|
<span class="meta">Flag Meta Row</span>
|
|
|
|
<!-- interactive: button label at 10px -->
|
|
<button type="button" class="btn-small">Flag Button</button>
|
|
|
|
<!-- structural furniture: table cell at 9px -->
|
|
<table>
|
|
<tbody>
|
|
<tr><td class="cell-small">Flag Table Cell</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- decorative letterspaced uppercase micro-label at 10px: STILL functional, not exempt -->
|
|
<span class="caps-label">Flag Caps Label</span>
|
|
|
|
<!-- interactive text in a footer stays on the 11px floor: footer link at 8px -->
|
|
<footer>
|
|
<a href="/privacy" class="footer-link">Flag Footer Link</a>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- ================= SHOULD PASS ================= -->
|
|
<div class="col" id="should-pass">
|
|
<h2>Should pass</h2>
|
|
|
|
<!-- non-interactive legal fine print in a footer at 10px: floor drops to 10px for smallprint -->
|
|
<footer>
|
|
<p class="legal">Pass Legal Fine Print copyright 2026 all rights reserved across this jurisdiction</p>
|
|
</footer>
|
|
|
|
<!-- visually-hidden / screen-reader text: never rendered, exempt -->
|
|
<span class="sr-only">Pass Sr Only</span>
|
|
|
|
<!-- sup / sub markers are exempt by tag -->
|
|
<p>Reference<sup class="sup-marker">Pass Sup Marker</sup> and water<sub class="sub-marker">Pass Sub Marker</sub></p>
|
|
|
|
<!-- em-sized text relative to a large parent computes to 12px, above the floor -->
|
|
<div class="em-parent"><span class="em-child">Pass Em Sized</span></div>
|
|
|
|
<!-- code / terminal mock: legitimately small, exempt -->
|
|
<div class="mock-terminal">
|
|
<span class="term-line">Pass Terminal Line</span>
|
|
</div>
|
|
|
|
<!-- functional text exactly at the 12px floor is allowed -->
|
|
<a href="/home" class="normal-link">Pass Normal Link</a>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|