Skip to content

Add keyboard accessibility to ProjectTree action bar #125

@DrumRobot

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions