Description
Keyboard shortcuts now exist in multiple places (dashboard quick-actions, global g-then-letter navigation, table interactions) with no single place for a user to discover what's available. A global Shift+/ ('?') triggered modal listing every registered shortcut, grouped by context, makes the existing shortcuts discoverable.
Requirements and context
- Add a components/ui/dialog.tsx-based modal listing every shortcut grouped by area (global, dashboard, transactions)
- Bind the modal to the '?' key globally, suppressed while a text input has focus
- Keep the shortcut list data-driven so new shortcuts are easy to register going forward
- Must be accessible (WCAG 2.1 AA), responsive, and consistent with existing design tokens
- Should be tested and easy to review
Suggested execution
Fork the repo and create a branch
git checkout -b feature/global-shortcut-help-modal
Implement changes
- Update/Write:
components/common/app-layout.tsx
- Add/Update tests:
components/common/app-layout.test.tsx
- Add documentation:
design/a11y-checklist.md
- Annotate accessibility (contrast, keyboard nav, ARIA)
- Validate responsive behavior across breakpoints (sm 640, md 768, lg 1024, xl 1280)
Test and commit
- Run tests:
pnpm test (or repo's test command)
- Cover edge cases (empty/error/loading, long text, dark mode)
- Include before/after screenshots and accessibility notes
Example commit message
feat: add a global keyboard-shortcut help modal
Guidelines
- WCAG 2.1 AA compliance
- Clear documentation and spec hand-off
- Timeframe: 96 hours
Description
Keyboard shortcuts now exist in multiple places (dashboard quick-actions, global g-then-letter navigation, table interactions) with no single place for a user to discover what's available. A global Shift+/ ('?') triggered modal listing every registered shortcut, grouped by context, makes the existing shortcuts discoverable.
Requirements and context
Suggested execution
Fork the repo and create a branch
Implement changes
components/common/app-layout.tsxcomponents/common/app-layout.test.tsxdesign/a11y-checklist.mdTest and commit
pnpm test(or repo's test command)Example commit message
Guidelines