[UI/UX Design] Design a Dashboard widget rearrangement UI #395

Description

Dashboard widget order is fixed. Design a rearrangement mode where users drag widgets to reorder or resize (S/M/L), with a keyboard-accessible move affordance and a reset default.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/pages/Dashboard.tsx
• Provide keyboard move (Up/Down/Left/Right) as drag-drop alternative

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/dashboard-widget-rearrange
• Implement changes
  • Design an "Edit layout" mode toggle with save/cancel
  • Add drag handles, size chips, and keyboard move
  • Persist layout per user with reset default
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • Empty layout, single-widget layouts, RTL, screen-reader move
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: Dashboard widget rearrangement

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours