Accessibility Fix: Sidebar Rail Tooltips Now Work for Keyboard & Touch Users

Release: v0.1.194 · Control: MOB-12 · Category: Touch Interaction

Overview

The sidebar navigation rail uses icon-only buttons to save space. To help users understand what each icon does, a tooltip label appears alongside each button. Prior to this release, those tooltips were only triggered by mouse hover — meaning anyone not using a mouse had no way to see the labels.

This release fixes that gap.

The Problem

The RailTooltip component in both sidebar-nav.tsx and sidebar-footer.tsx relied solely on the group-hover:opacity-100 Tailwind utility to make tooltip labels visible:

<!-- Before -->
<span class="opacity-0 transition-opacity duration-150 group-hover:opacity-100">
  Dashboard
</span>

This approach excluded two groups of users:

Keyboard users — navigating the sidebar with Tab or arrow keys causes focus to land on icon buttons, but no tooltip appeared to identify them.
Touch users — on mobile and tablet devices, there is no hover event, so icon-only buttons were completely unlabelled during interaction.

For a product built around fair, transparent processes for landlords, agents, and tenants, accessible navigation is a baseline requirement.

The Fix

A single CSS class addition resolves the issue. group-focus-within:opacity-100 has been added to the RailTooltip className, so the tooltip now becomes visible whenever any element within the group receives focus — in addition to hover:

<!-- After -->
<span class="opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100">
  Dashboard
</span>

Because RailTooltip is a shared component used in both sidebar-nav.tsx and sidebar-footer.tsx, this single change fixes the behaviour across the entire sidebar rail.

Behaviour After This Change

Interaction	Tooltip visible before	Tooltip visible after
Mouse hover	✅ Yes	✅ Yes
Keyboard focus (Tab)	❌ No	✅ Yes
Touch / tap (mobile)	❌ No	✅ Yes

No Breaking Changes

This change is purely additive. The existing hover behaviour is unchanged. There are no API changes, no data migrations, and no configuration required.

Affected Files

src/components/sidebar-nav.tsx