Skip to content

Conversation

@Tsopic
Copy link
Member

@Tsopic Tsopic commented Jan 23, 2026

Summary

Comprehensive cleanup of unused CSS, Svelte 5 warnings, and accessibility issues. This PR significantly improves code quality and reduces warnings from 85 to 10 (88% reduction).

CSS Cleanup After StatusBadge Migration (255 lines removed)

Badge CSS cleanup (13 files):

  • Remove all duplicate badge CSS after StatusBadge component adoption
  • Files: assets, contacts, employees, invoices, quotes, orders, payroll, absences, tsd, tax, settings/email, payments, payments/cash

Additional CSS cleanup (5 files):

  • Remove unused .header CSS from accounts, payments, reports pages
  • Remove empty .declarations ruleset from tax page

Svelte 5 Fixes

  • Fix chartCanvas/cashFlowCanvas to use $state for proper reactivity in dashboard

Accessibility Improvements (9 files)

  • Add for/id associations to form labels in banking pages
  • Add aria-label to close buttons in cost-centers modals and alerts
  • Change group labels (line items, logo sections) from <label> to <span>
  • Add tabindex="-1" to dialog elements for focus management
  • Add keyboard handlers (Escape key) on modal overlays

Results

Metric Before After Improvement
Total warnings 85 10 -75 (88% reduction)

Remaining 10 warnings are OnboardingWizard's intentional form initialization pattern (capturing prop values on mount for edit forms)

Files Changed: 28 total

  • 18 files for CSS cleanup
  • 9 files for accessibility fixes
  • 1 file for Svelte 5 state fix

Test plan

  • npm run check passes (0 errors, 10 warnings)
  • Visual verification that badges still render correctly
  • Verify form labels are properly associated (screen reader test)
  • Verify modal Escape key works

🤖 Generated with Claude Code

Tsopic and others added 5 commits January 23, 2026 08:29
These badge styles are now defined in the shared StatusBadge component
using :global() selectors. This cleanup removes 50 lines of duplicate CSS.

- assets/+page.svelte: Remove badge-draft, badge-active, badge-disposed, badge-sold
- contacts/+page.svelte: Remove badge-customer, badge-supplier, badge-both
- employees/+page.svelte: Remove badge-fulltime, badge-parttime, badge-contract
  (keep badge-active/badge-inactive for boolean is_active display)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Complete CSS cleanup after StatusBadge migration. This removes 205 additional
lines of duplicate badge CSS from 10 more page components.

Files cleaned:
- invoices/+page.svelte: 30 lines (draft, sent, partial, paid, overdue, voided)
- quotes/+page.svelte: 30 lines (draft, sent, accepted, rejected, expired, converted)
- orders/+page.svelte: 30 lines (pending, confirmed, processing, shipped, delivered, cancelled)
- payroll/+page.svelte: 25 lines (draft, calculated, approved, paid, declared)
- employees/absences/+page.svelte: 20 lines (pending, approved, rejected, cancelled)
- tsd/+page.svelte: 20 lines (draft, submitted, accepted, rejected)
- tax/+page.svelte: 15 lines (draft, submitted, accepted)
- settings/email/+page.svelte: 15 lines (success, danger, muted)
- payments/+page.svelte: 10 lines (received, made)
- payments/cash/+page.svelte: 10 lines (received, made)

Result: Reduced CSS warnings from 85 to 46 (eliminated all badge-related warnings)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove unused .header CSS from accounts, payments pages
- Remove unused .header .btn and .header button from reports page
- Remove empty .declarations ruleset from tax page
- Fix chartCanvas/cashFlowCanvas to use $state for Svelte 5 compatibility

Reduces warnings from 46 to 39 (7 more warnings eliminated)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add for/id associations to form labels in banking pages
- Add aria-label to close buttons in cost-centers modals and alerts
- Change group labels (line items, logo) from <label> to <span>
  since they don't associate with single form controls

Reduces warnings from 39 to 14 (25 a11y warnings fixed)

Remaining 14 warnings are mostly OnboardingWizard's intentional
form initialization pattern (capturing prop values on mount).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add tabindex="-1" to dialog elements for focus management
- Add keyboard handlers for Escape key on modal overlays
- Add svelte-ignore comments for intentional non-interactive interactions

Reduces warnings from 14 to 10 (all remaining are OnboardingWizard's
intentional form initialization pattern)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@Tsopic Tsopic merged commit 657e63a into main Jan 23, 2026
10 checks passed
@Tsopic Tsopic deleted the chore/css-cleanup branch January 23, 2026 07:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants