Route Input Fields Widget
Component Detail
Description
A reusable Flutter widget pair providing the origin text field and the optional destination text field. The destination field is clearly labelled as optional to respect participant privacy, and both fields integrate with the accessibility layer for screen-reader support.
route-input-fields
Summaries
The Route Input Fields Widget captures the travel origin and optional destination information that forms part of each mileage claim record, providing the audit trail the organisation needs to verify claims and satisfy finance and compliance requirements. By clearly labelling the destination as optional and including a privacy hint, the design respects participant confidentiality — a critical consideration when the app is used by peer mentors who may be visiting service users in sensitive contexts. The widget's reusable, accessible design also ensures that any future claim types requiring route information can benefit from the same consistent, compliant input experience without additional development cost, protecting the organisation's investment.
The Route Input Fields Widget is a low-complexity, zero-dependency component that can be built and signed off independently of the broader mileage form. Its reusable design means it is a good candidate for early delivery so that other form screens requiring route inputs can depend on a stable version without scheduling conflicts. The main delivery consideration is the WCAG 2.2 AA compliance requirement: touch target sizing, label association, and screen-reader announcement must all be verified on both iOS and Android with assistive technologies enabled. The privacy hint text for the optional destination field should be reviewed by the programme's data protection officer before the component is finalised, to ensure the language meets organisational policy and regulatory expectations.
The Route Input Fields Widget exposes a clean constructor interface accepting required onOriginChanged and optional onDestinationChanged callbacks, plus a validate method that returns a Map of field-name-to-error-message pairs for use by the parent form's validation pass. The getValues method returns a typed RouteValues object to avoid stringly-typed data extraction. Both fields must use explicit InputDecoration with a visible label and an associated semanticsLabel for screen-reader support; do not rely on hint text alone as it disappears on focus and fails WCAG 2.2 label-persistence requirements. The destination field's optional status should be communicated via both a '(optional)' suffix in the label and a helperText privacy hint rendered below the field using the design token text-secondary colour.
Touch targets must meet the 44×44 logical pixel minimum; wrap fields in a GestureDetector with appropriate padding if the default Flutter sizing falls short.
Responsibilities
- Render labelled origin input with required validation
- Render labelled destination input marked as optional with privacy hint
- Expose value-change callbacks to the parent form
- Meet WCAG 2.2 AA touch target and label association requirements
Interfaces
RouteInputFields({required onOriginChanged, onDestinationChanged})
build(BuildContext context)
validate() → Map<String, String>
getValues() → RouteValues