Dictation Microphone Button
Component Detail
Description
A microphone icon button rendered inline within free-text report fields to trigger dictation. Only appears on fields explicitly designated for dictation, never starts audio capture automatically, and provides clear visual affordance distinguishing it from other field actions.
dictation-microphone-button
Summaries
The Dictation Microphone Button directly enables hands-free report entry for field professionals, reducing data entry time and friction in high-volume workflows. By surfacing voice input only where it adds value — on designated free-text fields — the product avoids overwhelming users with unnecessary controls, maintaining a clean and intuitive interface. This targeted approach increases adoption of the dictation feature among clinicians, inspectors, or field staff who need to capture detailed observations without interrupting their workflow. The result is faster report completion, lower error rates from manual typing, and a competitive differentiator in productivity-focused mobile applications.
Disabling the button when permissions are denied also prevents user confusion and protects the organisation from poor reviews stemming from broken feature states.
This is a low-complexity UI component with a single upstream dependency on the Transcription State Manager, making it straightforward to isolate and deliver independently. Development effort is minimal — primarily icon rendering, state-driven style switching, and tap event dispatch — but thorough testing is required across permission-denied, engine-unavailable, and active-recording scenarios to ensure the disabled/hidden states behave correctly on both iOS and Android. Integration testing with the Transcription State Manager must be scheduled before end-to-end dictation flows can be verified. Accessibility validation (screen reader announcements for state changes) adds a small but non-negotiable QA overhead.
No deployment blockers are anticipated beyond ensuring the parent field components are ready to host the button.
The Dictation Microphone Button is a stateless-ish Flutter widget that observes DictationState from the Transcription State Manager via its `setRecordingState()` interface and renders distinct visual styles for idle, active-recording, and processing states. It emits `onTap()` intents upward rather than calling the service directly, keeping it decoupled from business logic. The `disable(String reason)` and `enable()` methods allow the parent field or the state manager to gate interactivity based on permission status or engine availability. `announceStateChange(String semanticLabel)` hooks into Flutter's Semantics layer to post accessibility notifications.
The component must be conditionally injected only into fields flagged for dictation support — field configuration determines visibility, not the button itself. Keep styling in a dedicated theme token rather than hardcoded colours to support dark mode and high-contrast accessibility themes.
Responsibilities
- Render microphone icon button on designated free-text fields only
- Communicate idle, active-recording, and processing states via distinct visual styles
- Dispatch start and stop dictation intents on explicit user tap
- Hide or disable itself when dictation is unavailable (permissions denied, no speech engine)
Interfaces
onTap()
setRecordingState(DictationState state)
disable(String reason)
enable()
announceStateChange(String semanticLabel)
Relationships
Used Integrations (1)
External integrations and APIs this component relies on