🎨 UX/UI & Accessibility Review Report

This report was generated using the combined heuristics and guidelines from the following activated skills:

📱 1. Mobile Usability & Ergonomics (`ux-audit`, `ui-visual-validator`)

Verdict: FAIL

Heuristic Violated: Aesthetic and Minimalist Design / Cognitive Load
- Finding: The top toolbar attempts to render ~10 actions (Undo, Redo, Search, Library, Loop, POI, Save, Export, Import, Compare, Theme, User Avatar) in a single row or flex container on a 390px wide screen.
- Remediation: Introduce a "Hamburger" or "More" menu (Bottom Sheet or Drawer on mobile) for secondary actions like Export, Import, Compare, Theme, and Loop. Keep only core actions (Search, Layers/Map Styles, User Profile) on the main screen.
Heuristic Violated: Flexibility and Efficiency of Use (Thumb-friendly design)
- Finding: The "Route Builder" panel inputs ("Start point", "End point") are positioned at the absolute bottom. When the virtual keyboard opens, it completely covers the inputs and the map.
- Remediation: When inputs are focused on mobile, either scroll the container into view or render a full-screen "Search Mode" overlay so the user can see what they are typing.

Verdict: NEEDS IMPROVEMENT

Note: Lighthouse automated A11y score is 100/100, which means basic ARIA and structural HTML rules are met. However, manual interaction reveals functional a11y issues.
Rule Violated: Touch Targets (Minimum 44x44px)
- Finding: Due to the overlapping toolbar elements (BUG-008), the effective touch targets for "Undo/Redo", "Routing profile", and "Surface" selectors overlap with map controls (Zoom). It is impossible to accurately tap these with a thumb.
- Remediation: Re-layout the mobile controls. MapLibre controls should be moved down or to the right side, avoiding the top-left/top-center overlapping area.
Rule Violated: Error Identification & Labels
- Finding: Chrome DevTools reported A form field element should have an id or name attribute. This breaks screen reader associations and browser autofill.
- Remediation: Audit all <input>, <select>, and <textarea> elements to ensure they have unique ids linked to a <label> (or proper aria-label).

Verdict: FAIL

Rule Violated: Visual Hierarchy & Stacking Context
- Finding: The user avatar, "Logout" button, and "Loading..." text render on top of the Route Builder panel and routing profile dropdowns (BUG-010). The Z-index scale is broken or not centralized.
- Remediation: Implement a strict Z-index token scale (e.g., z-map: 0, z-controls: 10, z-panel: 20, z-modal: 30, z-toast: 40). Ensure the Route Builder has a higher stacking context than the map controls and base toolbar.

Verdict: FAIL

Heuristic Violated: Visibility of System Status
- Finding: The "Loading..." text in the top right is (a) unstyled/intrusive, and (b) gets stuck infinitely if the backend fails (BUG-001). Furthermore, the Library Page shows a hanging "Loading..." text when the API is down (BUG-007).
- Remediation: Replace text-based "Loading..." with a skeleton loader, spinner, or top progress bar. Add explicit timeout logic and Error Boundary fallbacks (e.g., "Failed to load route. Try again.") to recover from backend failures gracefully.
Heuristic Violated: Recognition rather than Recall
- Finding: Disabled buttons (Undo/Redo when history is empty) provide no tactile or visual feedback explaining why they are disabled if a user taps them.

To bring this UI up to production/StyleSeed standards:

Redesign Mobile Layout: Move toolbar actions into a mobile-friendly Bottom Navigation or "More" drawer.
Fix Z-Index: Standardize z-index values across all floating elements and panels.
Implement Error States: Replace infinite "Loading..." with actual error boundaries and retry buttons.
Fix Form A11y: Add id / name to all inputs.