Calculator Input Panel
Component Detail
Description
Form panel collecting the volunteer activity parameters used as inputs to the calculation — primarily session count and average duration. Uses semantic markup and sufficient contrast to meet WCAG 2.2 AA requirements and screen-reader compatibility.
calculator-input-panel
Summaries
The Calculator Input Panel ensures that every peer mentor, regardless of ability or device, can accurately enter their volunteering activity data to generate meaningful benefit reports. By meeting WCAG 2.2 AA accessibility standards — including screen-reader compatibility and sufficient colour contrast — the organisation demonstrates inclusive design commitments that are increasingly required by public health funders and grant bodies. A frictionless, accessible input experience directly affects completion rates for the benefit calculation flow: if volunteers cannot easily enter their data, the feature fails to generate the shareable impact stories that drive awareness and recruitment. This component underpins the credibility and reach of the entire impact reporting capability.
The Calculator Input Panel is a self-contained, dependency-free form component with low implementation complexity. Its primary delivery consideration is accessibility compliance: WCAG 2.2 AA validation (contrast ratios, semantic markup, screen-reader testing with TalkBack and VoiceOver) must be factored into QA time, which is typically underestimated for mobile form components. The stepper-based numeric inputs require edge-case testing for boundary values (minimum/maximum session counts and durations) and inline error state rendering. Because the component has no external dependencies, it can be built and tested in isolation on a Widgetbook or Storybook-equivalent before integration into the parent screen, reducing integration risk.
Estimate 2–3 days including accessibility QA.
CalculatorInputPanel is a stateless Flutter widget that receives the current field values and exposes typed change callbacks: `onSessionCountChanged(int)` and `onAverageDurationChanged(int)`. Internally it renders two labelled numeric stepper fields using Flutter's `Semantics` widget to provide accessible labels and `ExcludeSemantics` where purely decorative. Inline validation is performed via the `validate() → bool` method, which checks that session count is within [1, 999] and average duration within [5, 480] minutes, surfacing errors via `Text` widgets with `role: alert` semantics. The `reset()` method clears controller state and re-emits zero-value change events.
No form library dependency is required; state is owned by the parent screen, keeping this widget purely presentational and trivially testable with `flutter_test` widget tests.
Responsibilities
- Render labelled numeric input fields with steppers for session count and duration
- Validate input ranges and surface inline errors accessibly
- Emit change events consumed by the parent screen
Interfaces
build(BuildContext)
onSessionCountChanged(int)
onAverageDurationChanged(int)
reset()
validate() → bool