fix: eliminate checkout/cart layout shift and low-contrast muted text

Live Lighthouse + performance-trace audits against the running dev app
found two real, measurable defects:

- /checkout and /warenkorb rendered the cart-store's default empty
  state before Zustand's persist middleware finished reading
  localStorage, so any customer who already had items in their cart
  saw an "empty cart" flash before the real form appeared (CLS 0.82).
  Fixed by tracking hasHydrated in the store and rendering the
  existing route skeleton until rehydration completes. Verified via
  Chrome DevTools performance trace: CLS 0.82 -> 0.00 on both pages.

- axe-core (via Lighthouse) flagged text-ink/60 on the cream
  background at 4.09:1 contrast, under the 4.5:1 WCAG AA minimum for
  normal-size text. Bumped to text-ink/70 (5.61:1) everywhere the same
  token is used at text-xs/text-sm across 7 files.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Sonnet 5 committed 2026-09-06 03:35:57 +02:00
1 parent 6143e5704d
commit 0402f7510d
8 files changed
+43 -12

No files matched your search

+12
View File
@@ -16,6 +16,13 @@ export interface CartItem {
interface CartState {
items: CartItem[];
isOpen: boolean;
// Client-only: waehrend des Server-Renders und des allerersten Client-
// Renders (bevor persist localStorage gelesen hat) ist dies immer false,
// damit UI, die auf "items.length === 0" verzweigt (Checkout/Warenkorb),
// nicht kurz einen falschen "leerer Warenkorb"-Zustand zeigt, bevor die
// echten, aus localStorage wiederhergestellten Positionen ankommen.
hasHydrated: boolean;
setHasHydrated: (hasHydrated: boolean) => void;
openCart: () => void;
closeCart: () => void;
addItem: (item: Omit<CartItem, "quantity">, quantity?: number) => void;
@@ -29,6 +36,8 @@ export const useCartStore = create<CartState>()(
(set) => ({
items: [],
isOpen: false,
hasHydrated: false,
setHasHydrated: (hasHydrated) => set({ hasHydrated }),
openCart: () => set({ isOpen: true }),
closeCart: () => set({ isOpen: false }),
addItem: (item, quantity = 1) =>
@@ -64,6 +73,9 @@ export const useCartStore = create<CartState>()(
// UI-Zustand und darf nach einem Seiten-Reload nicht wiederhergestellt
// werden (sonst poppt das Cart-Drawer nach jedem Reload erneut auf).
partialize: (state) => ({ items: state.items }),
onRehydrateStorage: () => (state) => {
state?.setHasHydrated(true);
},
}
)
);