Make clickable data-table rows keyboard accessible

Open Beginner friendly
#16 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript

Research direction

Start with frontend/src/components/ui/data-table.tsx and trace how onRowClick is applied to rows. Check the evaluation-build and evaluation-run pages to understand current usage, then run the frontend build and lint checks. Done means interactive rows support keyboard focus plus Enter and Space while nested controls and non-interactive rows retain their current behavior.

Written by the indexing model from the issue text.

Description

accessibility good first issue help wanted

Summary

The shared DataTable component makes rows clickable when an onRowClick handler is supplied. Those rows are mouse-accessible, but they cannot currently receive keyboard focus or be opened with the keyboard.

The component is used by the evaluation-build and evaluation-run screens, so a focused fix improves both locations.

Scope

  • Make only interactive data-table rows keyboard focusable.
  • Support Enter and Space to invoke the same callback as a row click.
  • Preserve the current behavior that clicks on nested buttons and form controls do not trigger the row action.
  • Keep non-interactive rows unchanged.

Acceptance criteria

  • A keyboard user can tab to an interactive row.
  • Pressing Enter or Space opens/activates the same row action as a mouse click.
  • Nested buttons, inputs, selects, and textareas remain independently usable.
  • The frontend build and lint checks pass.

Helpful files

  • frontend/src/components/ui/data-table.tsx
  • frontend/src/features/evaluation-builds/page.tsx
  • frontend/src/features/evaluations/page.tsx

Please keep this focused on keyboard interaction; a broader table-component rewrite is out of scope.

Dominant language
Python
Stars
5
Forks
10
Avg merge
6h 49m
Merged PRs (30d)
96

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from forthfate/openorbit

All issues in forthfate/openorbit

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.