Bufdir Report Section Widget
Component Detail
Description
Renders a single named section of the Bufdir report (e.g., 'Individrettede aktiviteter', 'Gruppetilbud') as a collapsible card containing a list of field rows. Each section header is labelled and focusable for keyboard and screen reader navigation. Highlights sections that contain at least one validation issue with a visual indicator.
bufdir-report-section-widget
Summaries
The Bufdir Report Section Widget is a core interface component that enables coordinators to navigate complex government reporting forms with confidence and ease. By presenting each reporting category as a clearly labelled, collapsible panel, the widget reduces cognitive overload and allows staff to focus on one section at a time. Validation issues are visually flagged at the section level, enabling rapid identification of incomplete or incorrect data before submission. This directly reduces the risk of rejected reports, costly resubmissions, and compliance penalties.
The accessibility-first design ensures the tool is usable by all staff regardless of ability, supporting inclusive workforce practices and aligning with public sector digital accessibility mandates.
This medium-complexity UI widget is a dependency of the Bufdir report preview screen and must be delivered before end-to-end preview testing can begin. It depends on the Bufdir Field Row Widget, so that component must be completed first. Development effort covers collapsible state management, section-level validation badge logic, and keyboard and screen reader accessibility conformance to WCAG 2.2 AA. Accessibility testing with assistive technologies (screen readers, keyboard-only navigation) should be scheduled as a dedicated QA pass.
Risk: if the field row widget is delayed, this widget cannot be integrated or tested in context. Plan for a short integration buffer when scheduling the preview feature milestone.
Implements a stateful Flutter widget wrapping a collapsible card pattern. The `build(BuildContext)` method renders a section header with a semantic heading level appropriate to its position in the report hierarchy, followed by a list of `BufdirFieldRowWidget` children. `toggleExpanded()` updates local expansion state, driving an `AnimatedCrossFade` or equivalent collapse animation. `getSectionValidationCount()` aggregates validation states from child field rows and returns a count used to conditionally render a badge overlay on the section header.
`scrollIntoView()` programmatically scrolls the widget into the viewport, invoked when the user taps an issue in the validation summary banner. Ensure the section header uses `Semantics(header: true)` and that the badge includes a text alternative so VoiceOver and TalkBack announce issue counts correctly.
Responsibilities
- Display section title and field rows
- Collapse or expand section on user interaction
- Show section-level validation badge when issues exist
- Ensure semantic heading hierarchy for screen readers
Interfaces
build(BuildContext)
toggleExpanded()
getSectionValidationCount()
scrollIntoView()