fix(ui): WCAG light-theme accent, overflow-safe audit page, formal address
Some checks are pending
Security / Security check (push) Waiting to run

Accessibility/responsive audit pass with two new permanent test
gates (test/a11y_test.dart: WCAG text contrast + labeled tap
targets on every page in both themes; test/responsive_test.dart:
no layout overflow at 800/960/1280/1920 px). Findings fixed:

- Light theme primary/tertiary sky-500 → sky-700: white text on
  the lighter accent only reached 2.8:1 (welcome CTA, active
  sidebar label); sky-700 clears WCAG AA at ~5.9:1. Dark theme
  unchanged (already compliant). FABs now follow the same accent
  instead of Material 3's washed-out tonal default.
- Audit page: filter chips collapse into a checkmark popup menu
  below 900 px window width (app bar overflowed); the live-status
  bar's left text is now Expanded with ellipsis so the row can
  shrink, and the disconnected state's copyable error gets the
  full remaining width.
- German strings now use formal address consistently (~20 strings
  still used du-forms next to Sie-forms on welcome/setup), the
  audit event-type chip "Step" is "Schritt", and the doctor
  page's event count pluralises correctly in both languages.

flutter analyze clean, 64 tests green. Screenshot pass light+dark
via the guide-shots harness (verified parity, no overflows).

Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it 2026-07-15 04:34:19 +02:00
parent efaa089454
commit da58125f20
9 changed files with 339 additions and 95 deletions

View file

@ -197,7 +197,11 @@ class ChainTheme {
static ThemeData light() {
final scheme = ColorScheme(
brightness: Brightness.light,
primary: ChainColors.accentDeep,
// Sky-700, not sky-500: white button/label text on the lighter
// accent only reaches 2.8:1 WCAG AA needs 4.5:1 (a11y_test.dart
// pins this). The dark theme keeps the lighter accent because it
// pairs it with near-black text.
primary: ChainColors.accentMuted,
onPrimary: ChainColors.lightSurface,
primaryContainer: const Color(0xFFE0F2FE),
onPrimaryContainer: ChainColors.accentMuted,
@ -205,7 +209,7 @@ class ChainTheme {
onSecondary: ChainColors.lightSurface,
secondaryContainer: ChainColors.lightSurfaceHigh,
onSecondaryContainer: ChainColors.lightText,
tertiary: ChainColors.accentDeep,
tertiary: ChainColors.accentMuted,
onTertiary: ChainColors.lightSurface,
tertiaryContainer: const Color(0xFFE0F2FE),
onTertiaryContainer: ChainColors.accentMuted,
@ -261,6 +265,13 @@ class ChainTheme {
),
margin: EdgeInsets.zero,
),
// Match FABs to the filled-button accent: Material 3 defaults
// them to primaryContainer, which reads as a washed-out tonal
// surface next to the sky-700 CTAs in the light theme.
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: scheme.primary,
foregroundColor: scheme.onPrimary,
),
filledButtonTheme: FilledButtonThemeData(
style: FilledButton.styleFrom(
backgroundColor: scheme.primary,