Skip to content

Add keyboard accessibility to ProjectTree action bar #125

Description

@DrumRobot

Problem

The action bar in ProjectTree.svelte uses opacity-0 group-hover:opacity-100 to reveal action buttons (rename, compress, delete, resume) on hover. Keyboard users can focus these invisible buttons, creating an accessibility gap.

Solution

Add group-focus-within:opacity-100 to the action bar's class list so buttons become visible when any child element receives keyboard focus.

Note: The exact location may have changed after PR #95 merge. Search for opacity-0 + group-hover pattern in ProjectTree or SessionActions components.

Origin

CodeRabbit review on PR #95 (outside diff comment). Pre-existing issue affecting all action buttons.

Storybook

  • Verify keyboard tab navigation renders action buttons visible in existing ProjectTree stories

Acceptance Criteria

  • Action buttons visible on keyboard focus (not just hover)
  • No visual regression on mouse hover behavior

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions