refactor: account settings page audit — tokens, a11y, hierarchy #123

2026-03-30T05:45:32Z

chihlasm commented

2026-03-30 05:45:32 +00:00

(Migrated from github.com)

Summary

Complete technical audit pass on AccountSettingsPage.tsx addressing all P0/P1/P2 findings from /audit.

Token normalization

Replaced 15+ hard-coded Tailwind color utilities (red-400, emerald-400, yellow-500, blue-400, rose-500, amber-500) with semantic tokens (text-danger, bg-success-dim, bg-warning-dim, bg-info-dim, etc.)
Fixed progress bar: track bg-accent + fill bg-primary both resolved to #60a5fa — bar was invisible in default state. Track is now bg-muted.
Fixed plan badge WCAG AA violation: bg-accent text-muted-foreground (~1.5:1 contrast) → bg-accent-dim text-accent-text
Fixed SSO button arbitrary rgba() values → bg-muted border-border

Accessibility

Added aria-label to role-change select (Role for {member.name}), remove member button (Remove {member.name}), resend invite button (Resend invite to {email})
Added p-1 padding to icon-only buttons (was 16px bare icon, now 32px tap target)

Interaction consistency

Replaced inline inviteError/inviteSuccess state with toast.success/toast.error — consistent with every other mutation on the page
Added toast feedback to handleSaveName and handleRemoveMember (previously silent on both success and failure)
Fixed transition-all → transition-colors on all 7 nav link cards (per project convention, lesson 81)
Fixed hover:border-border (same as default — no visual change) → hover:border-border-hover on nav cards

Structure & copy

Consolidated 5 separate {isAccountOwner && ...} nav card blocks into one <> fragment with a "Team Settings" section label
Removed duplicate embedded <BrandingSettings> component (Branding nav card already links to /account/branding)
Removed orphaned BrandingSettings import and unused user store selector
Fixed "tree categories" → "flow categories" (user-facing terminology)
Fixed Target Lists description (removed reference to maintenance flows hidden in pilot)
Fixed label="Trees" → label="Flows" in UsageStat
Removed duplicate text-xs class in SSO Enterprise badge
Removed internal (Task 11) comment noise

Test Coverage

No new application code paths — all changes are CSS class replacements, ARIA attributes, import removals, and copy fixes. TypeScript clean (npx tsc -b).

Pre-Landing Review

No issues found. Pure UI normalization — no security, data, or logic surface.

Design Review

Token violations corrected. No new design patterns introduced.

Test plan

Account Settings page loads for owner and non-owner roles
Usage stat progress bars visible at 0%, ~50%, ~80%, 100%
Plan badges readable (Free = neutral, Pro/Team = blue tint)
Subscription status badges render correctly for all states
Invite form: send success/failure shows toast (not inline text)
Remove member: shows "Member removed" toast on success
Rename account: shows "Account name updated" toast on success
Team Settings section label visible to owners, absent for non-owners
Hover on nav link cards shows border color change
Role select has accessible label (verify with screen reader or DevTools)

🤖 Generated with Claude Code

## Summary Complete technical audit pass on `AccountSettingsPage.tsx` addressing all P0/P1/P2 findings from `/audit`. **Token normalization** - Replaced 15+ hard-coded Tailwind color utilities (`red-400`, `emerald-400`, `yellow-500`, `blue-400`, `rose-500`, `amber-500`) with semantic tokens (`text-danger`, `bg-success-dim`, `bg-warning-dim`, `bg-info-dim`, etc.) - Fixed progress bar: track `bg-accent` + fill `bg-primary` both resolved to `#60a5fa` — bar was invisible in default state. Track is now `bg-muted`. - Fixed plan badge WCAG AA violation: `bg-accent text-muted-foreground` (~1.5:1 contrast) → `bg-accent-dim text-accent-text` - Fixed SSO button arbitrary `rgba()` values → `bg-muted border-border` **Accessibility** - Added `aria-label` to role-change select (`Role for {member.name}`), remove member button (`Remove {member.name}`), resend invite button (`Resend invite to {email}`) - Added `p-1` padding to icon-only buttons (was 16px bare icon, now 32px tap target) **Interaction consistency** - Replaced inline `inviteError`/`inviteSuccess` state with `toast.success`/`toast.error` — consistent with every other mutation on the page - Added toast feedback to `handleSaveName` and `handleRemoveMember` (previously silent on both success and failure) - Fixed `transition-all` → `transition-colors` on all 7 nav link cards (per project convention, lesson 81) - Fixed `hover:border-border` (same as default — no visual change) → `hover:border-border-hover` on nav cards **Structure & copy** - Consolidated 5 separate `{isAccountOwner && ...}` nav card blocks into one `<>` fragment with a "Team Settings" section label - Removed duplicate embedded `<BrandingSettings>` component (Branding nav card already links to `/account/branding`) - Removed orphaned `BrandingSettings` import and unused `user` store selector - Fixed "tree categories" → "flow categories" (user-facing terminology) - Fixed Target Lists description (removed reference to maintenance flows hidden in pilot) - Fixed `label="Trees"` → `label="Flows"` in UsageStat - Removed duplicate `text-xs` class in SSO Enterprise badge - Removed internal `(Task 11)` comment noise ## Test Coverage No new application code paths — all changes are CSS class replacements, ARIA attributes, import removals, and copy fixes. TypeScript clean (`npx tsc -b`). ## Pre-Landing Review No issues found. Pure UI normalization — no security, data, or logic surface. ## Design Review Token violations corrected. No new design patterns introduced. ## Test plan - [ ] Account Settings page loads for owner and non-owner roles - [ ] Usage stat progress bars visible at 0%, ~50%, ~80%, 100% - [ ] Plan badges readable (Free = neutral, Pro/Team = blue tint) - [ ] Subscription status badges render correctly for all states - [ ] Invite form: send success/failure shows toast (not inline text) - [ ] Remove member: shows "Member removed" toast on success - [ ] Rename account: shows "Account name updated" toast on success - [ ] Team Settings section label visible to owners, absent for non-owners - [ ] Hover on nav link cards shows border color change - [ ] Role select has accessible label (verify with screen reader or DevTools) 🤖 Generated with [Claude Code](https://claude.com/claude-code)

railway-app[bot] commented

2026-03-30 05:45:52 +00:00

(Migrated from github.com)

🚅 Deployed to the resolutionflow-pr-123 environment in selfless-grace

Service	Status	Web	Updated (UTC)
hopeful-liberation	✅ Success (View Logs)	Web	Apr 1, 2026 at 12:43 am
patherly	✅ Success (View Logs)	Web	Apr 1, 2026 at 12:42 am

🚅 Deployed to the [resolutionflow-pr-123](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134?environmentId=2b91441b-a271-41b7-8810-0ec306d1e55f) environment in **[selfless-grace](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134)** | **Service** | **Status** | **Web** | **Updated** (UTC) | | :--- | :--- | :--- | :--- | | hopeful-liberation | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/e1db2ee3-d241-4f45-abe4-c9c5fdf483d5?id=51db40e1-e4c1-4fec-9c67-038bdc2bfedd&environmentId=2b91441b-a271-41b7-8810-0ec306d1e55f)) | [Web](https://hopeful-liberation-resolutionflow-pr-123.up.railway.app) | Apr 1, 2026 at 12:43 am | | patherly | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/95f556ff-5264-4116-a0c2-618a2fc53ba4?id=2c444199-0380-46ca-a5b9-4588c1407615&environmentId=2b91441b-a271-41b7-8810-0ec306d1e55f)) | [Web](https://patherly-resolutionflow-pr-123.up.railway.app) | Apr 1, 2026 at 12:42 am |

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#123