Bufdir Field Row Widget
Component Detail
Description
Renders a single label-value pair from the Bufdir form with an inline validation state indicator. Supports three visual states: normal, warning (empty or below threshold), and anomaly (value differs significantly from prior period). Color contrast meets WCAG 2.2 AA, and the warning icon includes a text alternative for screen readers.
bufdir-field-row-widget
Summaries
The Bufdir Field Row Widget is the foundational building block of the government reporting interface, rendering each individual data point that will appear in the official Bufdir submission. By embedding real-time validation feedback directly alongside each field value, coordinators can immediately see which figures are missing, below threshold, or unexpectedly different from the prior year — without navigating to a separate review screen. This reduces report preparation time and the likelihood of submitting incomplete or anomalous data to government authorities. Meeting WCAG 2.2 AA color contrast requirements ensures the application satisfies legal accessibility obligations and is usable by staff with visual impairments, reducing organisational compliance risk.
This is a foundational, medium-complexity UI widget with no external dependencies, making it a good candidate for early parallel development. It must be completed before the Bufdir Report Section Widget and any preview screen integration work can begin. Development scope includes three visual states (normal, warning, anomaly), accessible color contrast verification, screen reader label generation, and a tooltip or inline description for validation issues. A dedicated accessibility review is required against WCAG 2.2 AA criteria — budget time for this in the QA plan.
Since this widget is used extensively across all report sections, any design changes to it will have broad visual impact; agree on the final visual specification before implementation begins to avoid rework.
A stateless or lightly stateful Flutter widget receiving a field label, computed value, and a `ValidationState` enum (normal, warning, anomaly) as constructor parameters. `getValidationState()` maps input data to the appropriate state and drives icon selection and color theming — use the app's semantic color tokens rather than hardcoded hex values to ensure theme consistency. `getAccessibilityLabel()` composes a full natural-language label combining the field name, value, and validation status, injected via `Semantics(label: ...)` so TalkBack and VoiceOver read the complete field context in one announcement. `showIssueDetail()` triggers an inline tooltip or bottom sheet explaining the validation issue.
Ensure warning icon assets include a `semanticsLabel` parameter. This widget is the leaf-level renderer and should be kept narrow in responsibility — all validation logic lives upstream in the validation service.
Responsibilities
- Display field label and computed value
- Render appropriate validation state icon and colour
- Provide accessible tooltip or description for validation issues
- Expose semantic label to screen reader
Interfaces
build(BuildContext)
getValidationState()
getAccessibilityLabel()
showIssueDetail()