Skip to content

Dashboard Hook Logs table rows are not keyboard-accessible #525

Description

@chhhee10

Description

In the Hook Logs table (app/components/session-hooks-panel.tsx:329), a row is expanded only via
<tr onClick={() => toggleRow(i)}> with cursor-pointer. The row has no tabIndex, no
role="button", and no onKeyDown, and the disclosure indicator is a bare <ChevronDown> icon
(:342), not a button. Interaction is mouse-only.

Steps to Reproduce

  1. Open a session's Hook Logs panel in the dashboard.
  2. Using only the keyboard (Tab / Enter / Space), try to expand a row to see its details
    (Session ID, CWD, full reason, matched policies).
  3. There is no focusable control — the detail panel is unreachable without a mouse. Screen-reader
    users get no affordance that the row is interactive.

Expected Behavior

Row expansion should be operable by keyboard and announced to assistive tech — e.g. Tab to focus,
Enter/Space to toggle, with aria-expanded reflecting state.

Failproof AI Version

0.0.14-beta.1

Node.js / Bun Version

Bun 1.3+

Operating System

macOS

Additional Context

Approachable a11y starter. Either make the chevron cell a real <button aria-expanded=…>, or add
role="button", tabIndex={0}, an Enter/Space onKeyDown, and aria-expanded to the <tr>.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood first issueGood for newcomers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions