Validation Summary Banner
Component Detail
Description
Sticky banner at the top of the preview screen that summarises the number and severity of validation issues found in the current report draft. Tapping the banner opens a filterable list of all flagged fields so the coordinator can jump directly to each issue. Disappears when there are no issues.
bufdir-validation-summary-banner
Summaries
The Validation Summary Banner acts as an at-a-glance quality gate within the Bufdir report preview, giving coordinators an immediate, unambiguous indication of how many errors or warnings remain before they can safely submit. Rather than requiring staff to scroll through the entire report to find problems, a single tap on the banner opens a filtered list of every flagged field, allowing direct navigation to each issue. This dramatically reduces the time spent on pre-submission review and significantly lowers the risk of submitting non-compliant reports to government authorities. The banner disappears automatically when all issues are resolved, providing a satisfying confirmation that the report is ready — reinforcing quality habits without adding process overhead.
This is a low-complexity component with a single dependency on the Bufdir Field Validation Service, which must be available before integration testing can proceed. Development scope is contained: sticky positioning, reactive issue count display (errors vs. warnings), a tap handler opening the issue list panel, and a live region announcement for screen reader users. Because the banner reacts to aggregated validation state, it should be tested with a range of report scenarios — reports with no issues, warnings only, errors only, and mixed — to verify correct rendering and disappearance behaviour.
Low delivery risk overall, but coordinate the issue list panel design with the UX team early, as that interaction is the primary user journey triggered from this component.
A reactive Flutter widget that subscribes to the `BufdirFieldValidationService` stream or provider, rebuilding whenever the aggregated issue count changes. `getTotalIssueCount()`, `getErrorCount()`, and `getWarningCount()` surface the counts for display and conditional rendering — the banner should use a `Visibility` or null-return guard in `build()` to suppress itself entirely when `getTotalIssueCount() == 0`. `openIssueList()` triggers navigation to or overlay of the filterable issue list panel, passing the current issue list as arguments. Implement the banner as a `SliverPersistentHeader` or use a `Stack` with `Positioned` to achieve sticky behaviour within the preview scroll context.
The issue count update must be announced via a `Semantics(liveRegion: true)` widget so screen reader users are notified without losing focus — debounce announcements to avoid noise during rapid data changes.
Responsibilities
- Display count of errors and warnings in the report
- Open issue list panel on tap
- Update reactively as aggregated data changes
- Announce issue count changes to screen readers via live region
Interfaces
build(BuildContext)
openIssueList()
getTotalIssueCount()
getErrorCount()
getWarningCount()