2 Commits

Author	SHA1	Message	Date
Guillem Arias Fauste	e07d641ead	fix(design-system): DS::Button a11y audit — focus ring, touch target, type default, icon-only label (#1840) ... * fix(design-system): DS::Button a11y audit Closes #1738. Four concrete fixes surfaced by the savings-goals audit + #1737 universal checklist: 1. Focus ring (WCAG 2.4.7). `base.css` had `focus-visible:outline-gray-900` which is **1.07:1** against the primary button's gray-900 background — invisible. Widen to `outline-2 outline-offset-2`, place outline outside the button via offset, and add a dark-mode `outline-white` so the ring is always visible against the page chrome regardless of the button surface. 2. Touch target (WCAG 2.5.5). Icon-only buttons at the default `:md` size were `w-9 h-9` = 36×36, below the 44×44 enhanced target. Bump `md.icon_container_classes` to `w-11 h-11` and `lg.icon_container_classes` to `w-12 h-12` to keep the size scale intact. `sm` stays at 32×32 (already passes WCAG 2.5.8 AA's 24×24 minimum; intentional compact-density variant). 3. Default button type. `content_tag(:button, ...)` inherits the HTML default `type="submit"`, so a DS::Button rendered inside a form steals Enter-key submission from the first text input (reproducible in the form stepper). Default to `type="button"` in the non-`href` branch; existing form submitters pass `type: "submit"` explicitly and continue to work. The `button_to` (href) branch keeps the submit default because button_to wraps its own form. 4. Icon-only accessible name. Icon-only buttons render no text node, so AT users hear "button" with no name. Derive a humanized aria-label from the icon key (e.g. `icon: "more-horizontal"` → `aria-label="More horizontal"`); explicit `aria: { label: }` on the caller still wins. Soft fallback — callers should still pass meaningful labels for richer copy. Plus: replace the stale `fg-white` icon class on the destructive variant with `text-inverse` (the `fg-*` namespace was deprecated in #1626 so `fg-white` resolved to nothing; the icon was using its helper-default color rather than the white the design intended). Out of scope: - Menu avatar trigger (custom 36×36 button bypassing DS::Button) — belongs to #1743 DS::Menu audit. - DS::FilledIcon `lg` size container (decorative, not interactive) — belongs to #1742. * fix(design-system): force type=submit on StyledFormBuilder#submit The DS::Button default-type-button change in the previous commit broke every `form.submit "Log in"` callsite because `StyledFormBuilder#submit` (app/helpers/styled_form_builder.rb) renders a DS::Button under the hood with no explicit `type:`. After the default flip, those submit buttons rendered as `type="button"`, so submitting forms (login, password reset, every form using `form.submit`) silently no-ops. CI surfaced this via ~30 system tests failing in the `sign_in` helper, which couldn't get past the login page. Pin `type: "submit"` on the DS::Button rendered by `StyledFormBuilder#submit`. The 22 view-level `f.submit` / `render DS::Button.new(type: :submit, ...)` callers already pass type explicitly and are unaffected. * fix(review): href-branch type-button bug + focus-ring tokens + profile Save submit CodeRabbit P1+P2 review on #1840: 1. button.rb: `merged_opts.delete(:href)` always returned nil because Buttonish#initialize strips :href from opts into @href, so the `if href.blank?` guard was ALWAYS true. Every DS::Button rendered via button_to (the href branch) got `type="button"` on the inner button, breaking submission of those button_to-generated forms (e.g. imports/_ready.html.erb publish button, imports/_failure.html.erb try-again button). Drop the local `href = merged_opts.delete(:href)` so the guard now reads the @href reader, leaving the href branch's HTML default intact. 2. settings/profiles/show.html.erb: the Save button is rendered with `render DS::Button.new(...)` inside `styled_form_with` (not via form.submit), so the StyledFormBuilder#submit type-pin from 624e9794 doesn't cover it. Pass `type: :submit` explicitly so the profile form submits again under the default-type-button policy. 3. base.css: replace raw `outline-gray-900` / `outline-white` with the established alpha-ring focus pattern (focus-visible:ring-alpha-black-300 + theme-dark:ring-alpha-white-300) already used by app/components/settings/provider_card.html.erb and sure-design-system/components.css. Keeps a11y focus ring while using DS tokens. * fix(review): add type: :submit to DS::Button submitters inside forms CI test_system on #1840 surfaced 6 failures (confirm-dialog close, property create/edit, transaction filter apply) caused by the same gap that db563f3d started addressing: the default-type-button policy on DS::Button means every \`render DS::Button.new(...)\` inside a \`<form>\` (or \`styled_form_with\`) that relies on the HTML default to submit is now an inert \`type="button"\`. Audited every \`render DS::Button.new(\` callsite repo-wide for the combination (no \`type:\`, no \`href:\`, inside a form context) and pinned \`type: :submit\` explicitly on the 12 forms that need it: - layouts/shared/_confirm_dialog.html.erb: Confirm button inside the global \`<form method=\"dialog\">\` — fixes test_should_allow_revoking_API_key_with_confirmation. - properties/{new,edit,balances}.html.erb: Save/Next submitter inside \`styled_form_with\` — fixes test_can_create_property_account, test_can_persist_property_subtype. - transactions/searches/_menu.html.erb: Apply inside the filter form — fixes test_can_filter_uncategorized_transactions, test_all_filters_work_and_empty_state_shows_if_no_match, test_can_open_filters_and_apply_one_or_more. - transactions/bulk_updates/new.html.erb: Save in bulk-edit drawer. - account_sharings/show.html.erb: Save in account-sharing form. - category/deletions/new.html.erb, tag/deletions/new.html.erb: destructive + safe submit buttons in deletion dialog forms. - family_merchants/merge.html.erb: Submit in merge form. - subscriptions/upgrade.html.erb: contribute_and_support_sure submit. - rules/_category_rule_cta.html.erb: Dismiss inside the rule_prompts_disabled form. Cancel/close DS::Button instances inside these same forms intentionally keep the \`type=button\` default since they drive JS-only actions (\`DS--dialog#close\`, \`DS--menu#close\`). * fix(review): add type: :submit to 4 remaining form-context DS::Button callers Second sweep for the same default-type-button regression that 24c517eb fixed for 12 callsites. The latest CI run on this branch narrowed the failures from 6 to 2 (the property wizard's Address step still failed because that view was not in the first sweep). Audited via a wider 4000-char form-context window: - app/views/properties/address.html.erb: Save inside styled_form_with — fixes the remaining test_can_create_property_account + test_can_persist_property_subtype by letting Step 3 of the property wizard complete. - app/views/onboardings/goals.html.erb: Submit inside form_with so the onboarding goals step submits. - app/views/account_sharings/show.html.erb (owner-side form): Save button for the family-share permissions form (the non-owner Save was already fixed in 24c517eb). - app/views/transactions/_attachments.html.erb: Upload inside styled_form_with — kept the JS-driven hook (attachment_upload_target) but explicit type:submit covers the no-JS fallback. * fix(review): pin type=submit on the Save currencies button Codex P1 (third pass) caught one more in-form DS::Button I missed in the earlier sweeps: \`app/views/settings/preferences/show.html.erb:185\` renders the Save currencies submit deep inside a long \`styled_form_with\` block. The form-context scan I used had a finite look-back window which missed it because the matching \`styled_form_with\` opener sits ~80 lines / 4k+ characters above the button. Switched to a whole-file scan to confirm no further callsite remains.	2026-05-20 18:12:36 +02:00
Guillem Arias Fauste	e250d266e8	refactor(design-system): single-source design tokens via DTCG JSON (#1604) ... * refactor(css): rename maybe-design-system → sure-design-system Rename design system CSS file and directory to match the project name post-rebrand. Update internal imports plus references in CLAUDE.md, copilot instructions, and Junie guidelines. No CSS rules change; Tailwind compiled output is byte-identical. * build(tokens): introduce single-source tokens.json + build script Make the design system a tool-agnostic single source of truth. - tokens/sure.tokens.json: every primitive, semantic alias, and Tailwind utility token in one W3C DTCG-flavored file. - tools/tokens/build.mjs: ~120 LOC plain Node script (zero deps) that resolves token references and emits Tailwind v4 source CSS. - app/assets/tailwind/sure-design-system/_generated.css: build output — the @theme block, dark-mode overrides, and 50 @utility blocks. - Hand-written CSS split into base.css (element resets), components.css (form-field/checkbox/tooltip/qrcode), and prose.css (prose dark overrides). The 5 maybe-design-system/*-utils.css files are removed — their contents now live inside _generated.css. - application.css gains `@source not "../../../tokens"` so Tailwind's content scanner ignores the JSON file (it would otherwise treat token keys like `bg-surface` as "used" classes and skip tree-shaking). - package.json: `npm run tokens:build` and `npm run tokens:check`. - .gitattributes: _generated.css marked linguist-generated. Functional parity verified: compiled `tailwind.css` has the same 378 CSS variables and byte-identical non-:root rules as before. The only diff is which of Tailwind's internal `:root,:host` blocks each variable lands in, which is invisible to the browser. * build(tokens): wire tokens build into bin/setup Run `npm install && npm run tokens:build` after bundle so a fresh checkout reaches a runnable state with one command. * docs(css): explain @source not exclusion of tokens dir Adds a comment so future readers know why tokens/ is excluded from Tailwind's content scanner (utility keys in the JSON would otherwise be treated as used classes and bypass tree-shaking). * docs(tokens): add tokens/README Schema overview, workflow, custom $extensions reference, and a list of the edge cases the build script handles. Lands as a follow-up commit on the same branch so reviewers landing on the diff have something to read before opening sure.tokens.json. * Update tokens/README.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Guillem Arias Fauste <gariasf@proton.me> * docs(tokens): swap em-dashes for colons in README * refactor(tokens): move tokens to design/, build script to bin/ Per PR review feedback (jjmata): - tokens/ → design/tokens/ — top-level design/ namespace leaves room for future design assets (Figma exports, design docs, etc.) without cluttering the repo root. - tools/tokens/build.mjs → bin/tokens.mjs — keeps all developer-facing scripts in one place (bin/) regardless of language. Path references updated in: - bin/tokens.mjs (TOKENS / OUT / generated header) - package.json (tokens:build, tokens:check) - app/assets/tailwind/application.css (@source not directive) - app/assets/tailwind/sure-design-system.css (comment) - app/assets/tailwind/sure-design-system/_generated.css (regenerated) - design/tokens/README.md (workflow examples) bin/tokens.mjs gains a +x bit. Tailwind compile verified. * docs(tokens): normalize README paths to repo-root style Files section was mixing relative-to-README paths (`../../bin/...`) with repo-root paths (`design/tokens/...`) used elsewhere in the same README. Switching everything to repo-root style for consistency. * fix(tokens): validate {ref} placeholders against the known token set CodeRabbit caught: resolveTemplate() and refToClass() would happily emit var(--foo-bar) or bg-foo-bar for any {foo.bar} input, so a typo in design/tokens/sure.tokens.json would silently ship broken CSS. Now build() pre-computes the set of valid token paths from the walker, and resolveTemplate() / refToClass() throw a clean "[tokens] Unknown token reference ..." error when a placeholder doesn't match. Top-level catch surfaces just the message and exits 1, no Node stack trace noise. Smoke-tested both directions: - Valid JSON: builds. - {color.gray.NONEXISTENT|5%}: fails with clear message, exit 1. * docs(tokens): humanize README prose * One more refenrece to `maybe-design-system` --------- Signed-off-by: Guillem Arias Fauste <gariasf@proton.me> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Juan José Mata <jjmata@jjmata.com>	2026-05-01 14:46:33 +02:00