fix(ui): the pay button was off the screen
Asked to find what was wrong with the product, I measured it instead of looking at it, and the first rule I wrote failed immediately. The pay button sat 699px below the fold at 1280x800 and 1298 below it on a phone. Pressing INSERT COIN on the arcade demo changed nothing a visitor could see. Three previous audits had clicked through this flow and passed it, because whoever clicks already knows where the button is. The cause was an earlier fix. A round in August moved the whole disclosure panel above the button, correctly refusing to bury the caveats under the call to action, and 985px of rows then pushed the button two screens down. Both things were right and they cannot both be done that way, so the short version now sits above the button and the full list stays below it, still open. Three mutations of that order fail the unit tests. Also measured and fixed: - The total was 12px, the same size as its own label, and it is both what the payer agrees to and the finding this project is built on. It has its own block at 26px now. "7 STRK, or 13 with nothing shielded yet" was one sentence carrying two prices; the figure and the condition are separate lines. - Tap targets under 44px across all three apps: a select arriving unstyled at 19px, six inputs at 33 and 36, five buttons at 33 and 35. - h1 at 20px against 14px body text on the arcade and the dashboard. - The arcade canvas was 442x330, a coin-op cabinet the size of a postcard. At 600x450 it broke the two-column layout, which the audit caught in the same run; the wrap width now clears it. - The payer page printed the memo, then the widget printed it again underneath. - A sentence about receipts sat in the block someone reads before deciding. test/layout-audit.mjs holds seven rules and returns measurements, not opinions. test/layout-check.html runs all seven screens at two viewports: 14 of 14 clean, and reverting any one of these fixes turns it red. Two rules were wrong and were corrected against the standard rather than loosened: 44px is WCAG 2.5.5 and right for a payment control, while a link is held to 2.5.8's 24px and a link inside a sentence is exempt entirely. And "visible" first meant the top edge was above the fold, which passed a button showing nine of its forty-four pixels; it now means the whole control, with 16px of clearance for a phone's address bar. 198 tests pass. The QR pixel round-trip and both denial-of-service attacks were re-run afterwards and still hold.
B
bongbongcrypto committed
cc3b4b3deab045dc8ccd488ff99834cfc9eeffd6
Parent: 8209655