UI-Politur: Kontrast, Abstaende, Typografie, Bewegung

Kein Redesign — Schwarz/Rot, 4 Tabs und Lieder/Kategorie bleiben. Grundlage sind die Design-Skills: ui-ux-pro-max (Barrierefreiheit, Touch, Typografie, Bewegung), ui-design/mobile-android (Material 3) und die Token-Disziplin aus Hue. Behobene Maengel (messbar, nicht Geschmack): - Text in Colors.white38 an 17 Stellen = 3,4:1 Kontrast, WCAG verlangt 4,5:1. Ersetzt durch drei benannte Stufen (text1 15,9:1 / text2 8,8:1 / text3 4,9:1). theme_kontrast_test.dart rechnet die Verhaeltnisse bei jedem Lauf nach, statt sie zu behaupten. - SubTabs waren ~38 dp hoch (Material 3 verlangt 48), ohne Ripple und ohne Uebergang. Jetzt 48 dp, InkWell, AnimatedContainer, und die Auswahl wird Vorlesehilfen als Zustand gemeldet (Semantics.selected). - mini_player.dart: Expanded UM eine feste Hoehe herum — zwei widerspruechliche Angaben. Entschaerft. - Emoji in Bedienelementen der Einstellungen (jeweils neben einem echten Icon) entfernt. Neu in shared/theme.dart: MeloSpace (8er-Raster), MeloRadius, MeloMotion, Farbrollen text1/2/3 + border + hairline, minTouchTarget, vollstaendiges textTheme (7 Stufen) und Themes fuer Listen, Sheets, Snackbars, Fortschritt, Trenner. 318 Tests gruen (23 neue, 1 uebersprungen), flutter analyze ohne Befund. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FpPu4nuKjKKeX1RpdDeX81
2026-08-21 12:40:25 +02:00
parent 2df85e650e
commit bc861f6087
23 changed files with 773 additions and 184 deletions
@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:melo/shared/sub_tabs.dart';
+import 'package:melo/shared/theme.dart';
+
+Widget _wrap(Widget child) => MaterialApp(
+      theme: MeloTheme.dark,
+      home: Scaffold(body: child),
+    );
+
+void main() {
+  testWidgets('jeder Reiter ist mindestens 48 dp hoch — sonst trifft man ihn '
+      'im Gehen nicht', (tester) async {
+    await tester.pumpWidget(_wrap(SubTabs(
+      labels: const ['Lieder', 'Kategorie', 'Künstler'],
+      index: 0,
+      onChanged: (_) {},
+    )));
+    await tester.pumpAndSettle();
+
+    for (final label in ['Lieder', 'Kategorie', 'Künstler']) {
+      final flaeche = tester.getSize(find.ancestor(
+        of: find.text(label),
+        matching: find.byType(AnimatedContainer),
+      ));
+      expect(flaeche.height, greaterThanOrEqualTo(MeloTheme.minTouchTarget),
+          reason: 'Reiter "$label" ist nur ${flaeche.height} dp hoch');
+      expect(flaeche.width, greaterThanOrEqualTo(MeloTheme.minTouchTarget));
+    }
+  });
+
+  testWidgets('ein Tipp meldet den angetippten Reiter', (tester) async {
+    int? gewaehlt;
+    await tester.pumpWidget(_wrap(SubTabs(
+      labels: const ['Lieder', 'Kategorie'],
+      index: 0,
+      onChanged: (i) => gewaehlt = i,
+    )));
+
+    await tester.tap(find.text('Kategorie'));
+    await tester.pumpAndSettle();
+
+    expect(gewaehlt, 1);
+  });
+
+  testWidgets('der aktive Reiter ist auch ohne Farbe erkennbar', (tester) async {
+    final semantik = tester.ensureSemantics();
+
+    await tester.pumpWidget(_wrap(SubTabs(
+      labels: const ['Lieder', 'Kategorie'],
+      index: 1,
+      onChanged: (_) {},
+    )));
+    await tester.pumpAndSettle();
+
+    // Vorlesehilfen brauchen die Auswahl als Zustand, nicht als Farbe —
+    // wer die weiße Pille nicht sieht, erfährt sonst nie, wo er ist.
+    expect(
+      tester.getSemantics(find.text('Kategorie')),
+      isSemantics(label: 'Kategorie', isSelected: true, isButton: true),
+    );
+    expect(
+      tester.getSemantics(find.text('Lieder')),
+      isSemantics(label: 'Lieder', isSelected: false, isButton: true),
+    );
+
+    // Muss vor Testende passieren — addTearDown wäre zu spät.
+    semantik.dispose();
+  });
+
+  testWidgets('jeder Reiter gibt beim Antippen Rückmeldung (Ripple)',
+      (tester) async {
+    await tester.pumpWidget(_wrap(SubTabs(
+      labels: const ['Lieder', 'Kategorie'],
+      index: 0,
+      onChanged: (_) {},
+    )));
+
+    // Ohne InkWell bliebe der Tipp unbestätigt — der Nutzer weiß nicht,
+    // ob er getroffen hat.
+    expect(find.byType(InkWell), findsNWidgets(2));
+  });
+
+  testWidgets('der Wechsel wird animiert, nicht gesprungen', (tester) async {
+    await tester.pumpWidget(_wrap(SubTabs(
+      labels: const ['Lieder', 'Kategorie'],
+      index: 0,
+      onChanged: (_) {},
+    )));
+    await tester.pumpAndSettle();
+
+    final container = tester.widget<AnimatedContainer>(find.ancestor(
+      of: find.text('Lieder'),
+      matching: find.byType(AnimatedContainer),
+    ));
+    expect(container.duration, MeloMotion.fast);
+    expect(container.curve, MeloMotion.curve);
+  });
+}