Skip to content

Make clickable data-table rows keyboard accessible #16

Description

@forthfate

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityBarrier affecting people with disabilitiesgood first issueGood for newcomershelp wantedExtra attention is needed

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions