Skip to content

Add a global '?' keyboard-shortcut help modal cataloguing shortcuts across the app #922

Description

@Jagadeeshftw

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    GrantFox OSSGrantFox open-source programMaybe RewardedGrantFox: potentially rewarded contributionOfficial Campaign | FWC26GrantFox official campaign issueStellar WaveIssues in the Stellar wave programaccessibilityAccessibility (WCAG)frontendFrontend implementationui/uxUser experience and interaction design

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions