Add Hold-to-Talk Keyboard Shortcut and Button Tooltips for Better UX
Description
This MR enhances user interaction by introducing:
- Keyboard shortcut support for “Hold to Talk”
- Hover-based tooltips for all action buttons
Currently, users rely on mouse interactions and may not clearly understand how certain features work. This update improves efficiency and usability by enabling keyboard-based control and providing contextual guidance via tooltips.
Changes Implemented
1. Hold-to-Talk Keyboard Shortcut
- Added press-and-hold keyboard functionality (e.g., Spacebar)
- Recording starts on keydown and stops on keyup
- Prevents triggering while typing in input/textarea fields
- Prevents default browser behavior (e.g., page scroll)
- Matches the existing “Hold to Talk” button behavior
2. Button Tooltips (Hover Guidance)
- Added tooltips for all major buttons
- Tooltips explain what the button does + how to use it
- Follows the same style/behavior as the existing reference button
- Ensures consistent UX across the application
Example Tooltips
- Hold to Talk → “Press and hold (or use Space) to record, release to stop”
- Push-to-Talk → “Click to start and stop recording”
- Continuous (VAD) → “Auto-records when speech is detected”
Screenshots
Expected Behavior
- Users can use keyboard (hold key) to control recording
- Hovering over any button shows a helpful tooltip
- Tooltips appear instantly and disappear on mouse leave
- No interference with typing or browser default shortcuts
Acceptance Criteria
-
Hold-to-Talk works via keyboard (keydown → start, keyup → stop) -
Does not trigger inside input/textarea fields -
Default browser behavior is prevented where necessary -
Tooltips are available for all buttons -
Tooltip messages are clear and consistent -
Works across major browsers
closes #21 (closed)
Edited by srilatha bandari