Dynamic Text Scaling Without Layout Breakage
Many peer mentors, particularly older volunteers, rely on their device's system font size setting. Flutter's text scaling must be fully supported via the dynamic-type-scale-service, which maps system text size preferences to the app's design token typography scale. All text containers must grow with their content; no text may be rendered with a fixed pixel height that clips content. The accessible-text-style-system must provide all typographic styles as relative units, and the accessibility-design-token-enforcer ensures no component overrides text scale with hardcoded sizes. Layouts must be tested at 200% text scale without horizontal overflow.
User Story
Acceptance Criteria
- Given a peer mentor sets their device font size to 200% in iOS/Android accessibility settings, when they open the app, then all text scales proportionally and no content is clipped, truncated without scroll access, or overlaps other elements
- Given a peer mentor views the activity registration bottom sheet at 150% font scale, when reading field labels and button text, then all text is fully visible and the bottom sheet scrolls to accommodate the expanded content
- Given the dynamic-type-scale-service applies a type scale, when a component uses accessible-text-style-system, then no text style uses a fixed pixel size — all sizes are responsive to the system scale factor
- Given a peer mentor uses VoiceOver with large text enabled on iOS, when they navigate through the notification center, then text at any font scale is read correctly and visual rendering matches audible announcements
- Given a developer adds a new screen, when the flutter-accessibility-lint-config runs, then any hardcoded text size that ignores system scaling triggers a lint warning
Business Value
The workshop documentation explicitly calls out scalable text as a MUST HAVE requirement shared by all three organizations. Older volunteers who form a significant portion of peer mentor networks are the primary beneficiaries. Dynamic text scaling is also a WCAG 2.2 AA requirement (Success Criterion 1.4.4). Building it into the design token system means compliance is automatic for all future screens, avoiding the significant rework cost of retrofitting scalable text after initial development.
Components
- Accessible Text Style System ui
- Dynamic Type Scale Service service
- Accessibility Design Token Enforcer infrastructure
- Token Accessibility Enforcer service
- Design Token Provider data
- Accessibility Token Manifest data
- Flutter Accessibility Lint Configuration infrastructure