Accessible Text Style System
Component Detail
Description
Provides a Flutter TextTheme derived entirely from design tokens, ensuring all body copy uses FontWeight.w400 or heavier and that no italic styles are applied to form labels or body text. Responds to the OS dynamic type setting (textScaleFactor) without breaking layouts by capping scale per text role.
accessible-text-style-system
Summaries
The Accessible Text Style System ensures the application meets WCAG 2.2 typography standards, directly reducing legal and regulatory exposure from accessibility non-compliance claims. By systematically enforcing readable font weights and respecting users' OS-level text size preferences, the app becomes usable by a broader audience including users with low vision or reading disabilities. This expands the addressable market, supports app store accessibility ratings, and demonstrates measurable corporate responsibility — factors that increasingly influence enterprise procurement decisions, user retention scores, and brand reputation in accessibility-sensitive industries.
This shared mobile component carries medium complexity and depends solely on design-token-provider, making it a foundational deliverable whose delays cascade across all typography-dependent features. Because it is marked shared, it must be stable before feature teams begin building form screens. Development requires close coordination with the design team to ensure token mappings cover all required text roles (bodyLarge, labelMedium, etc.). Testing must include OS dynamic type stress tests at maximum scale factors across all form layouts, plus automated weight compliance checks.
Late-breaking token schema changes are the primary risk — a mitigation contract with the design system team on token stability should be established at sprint planning.
Implemented as a Flutter utility exposing `buildTextTheme(BuildContext)` and `resolveTextStyle(String tokenKey)`. All font weight, size, and family decisions are driven exclusively from design-token-provider — zero hardcoded values. `applyDynamicTypeScale(double scaleFactor)` clamps per-role scale using `getMaxAllowedScale(TextRole)` to prevent overflow in constrained layouts. `validateWeightCompliance(TextStyle)` is designed for use in widget tests and CI assertions to catch regressions.
Since this component is shared across features, any token schema change requires full regression testing of all consuming widgets. Keep the role-to-scale-cap mapping in a single config map rather than scattered across call sites to simplify future maintenance and design-driven updates.
Responsibilities
- Define TextTheme with explicit, token-driven font weights (minimum w400 for body)
- Prohibit italic font styles on form labels and body copy
- Respect OS dynamic type scaling within safe layout bounds
- Expose named text styles (bodyLarge, labelMedium, etc.) from design tokens
Interfaces
buildTextTheme(BuildContext context) → TextTheme
resolveTextStyle(String tokenKey) → TextStyle
applyDynamicTypeScale(double scaleFactor) → TextStyle
validateWeightCompliance(TextStyle style) → bool
getMaxAllowedScale(TextRole role) → double
Relationships
Related Data Entities (1)
Data entities managed by this component