Add keyboard navigation support for data table rows

[usmanimamu17-create]

The DataTable component (src/components/data-table.tsx) supports row selection via click, but does not implement keyboard navigation. Users cannot navigate between rows using arrow keys, select rows with Enter/Space, or open row details with Enter. This violates WCAG 2.1 keyboard accessibility requirements.

Why this is architecturally hard

1. Table uses TanStack Table's useReactTable hook without built-in keyboard navigation primitives
2. Virtualized rows are absolutely positioned, making traditional DOM focus management incompatible
3. Table body must maintain a "roving tabindex" pattern where only one row is focusable at a time

Proposed design

Implement a useTableKeyboardNavigation hook that maintains focusedIndex state, listens for ArrowUp/ArrowDown/Enter/Space key events, updates focus index within bounds, sets tabIndex on focused row, and triggers selection on Enter/Space.

Acceptance criteria

• Pressing ArrowDown/ArrowUp moves focus between adjacent rows
• Pressing Enter or Space selects the focused row
• Focused row has visible focus ring indicator
• Screen reader announces row content when focused

Getting started

Files: src/components/data-table.tsx

[Penielka]

can i be ssigned this

[grantfox-oss]

🦊 GrantFox — @Penielka has been assigned to this issue as part of the Third Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #268)
2. Your PR will be reviewed by the ApexChainx maintainers

Good luck! Track your progress on GrantFox.