Zwevende veldlabels straddelen in donkere modus een harde rand

brenno commented

2026-07-24 17:38:18 +00:00

Owner

Wat je ziet

In de donkere modus loopt er een harde horizontale rand dwars door elk
zwevend veldlabel. "Waarde", "Eenheid", "Label", "Type" in de cockpit-editor;
"Hoofdkleur en bovenbalk" en de rest in Instellingen → App-thema. Het leest
alsof de onderste helft van de letters is afgesneden.

In het lichte thema is er niets te zien.

Waarom

Het is geen afknipping. Het label zweeft zoals Material dat doet: half boven
de bovenrand van het veld, half erin. De bovenste helft staat op de
schermachtergrond, de onderste op de vulling van het veld.

inputDecorationTheme in lib/theme/app_theme.dart zet filled: true met
fillColor: surfaceColor en een OutlineInputBorder. De gap van die
OutlineInputBorder onderbreekt alleen de lijn, niet de vulling. Het
label straddelt dus altijd een kleurovergang — in beide thema's.

Alleen valt hij in het lichte thema niet op:

profiel	schermachtergrond	veldvulling	verschil
Europa	`#F4F7FC`	`#FFFFFF`	nauwelijks zichtbaar
Donker	`#0F172A`	`#1E293B`	duidelijke rand

Gevonden tijdens de rondgang van #780. Het valt buiten dat issue omdat het
geen contrastdefect is en de reparatie een ontwerpkeuze vraagt.

Wat er te kiezen valt

Alle drie raken élk tekstveld in de app en verschuiven dus goldens:

filled: false voor de omrande velden — dat is de standaard Material
"outlined text field", en dan is er geen rand om doorheen te lopen. De
velden verliezen hun vlak.
Het label binnen het veld laten zakken (FloatingLabelBehavior /
een gevulde stijl met onderstreping in plaats van een omranding).
De twee kleuren dichter bij elkaar brengen in het donkere profiel. Dat
verzacht het symptoom en laat de oorzaak staan; bovendien zijn eigen
profielen te bewerken, dus het geldt niet voor iedereen.

Voorkeur van mij is 1: het is de stijl waar Material deze combinatie voor
bedoeld heeft, en het is de enige die de oorzaak wegneemt in plaats van de
zichtbaarheid ervan.

Reproductie

Instellingen → App-thema → profiel Donker → Opslaan.
Nieuwe presentatie, slidetype Cockpit.
Kijk naar "Waarde" en "Eenheid" boven de invoervelden van Meter 1.

## Wat je ziet In de donkere modus loopt er een harde horizontale rand dwars door elk zwevend veldlabel. "Waarde", "Eenheid", "Label", "Type" in de cockpit-editor; "Hoofdkleur en bovenbalk" en de rest in Instellingen → App-thema. Het leest alsof de onderste helft van de letters is afgesneden. In het lichte thema is er niets te zien. ## Waarom Het is geen afknipping. Het label zweeft zoals Material dat doet: half boven de bovenrand van het veld, half erin. De bovenste helft staat op de schermachtergrond, de onderste op de vulling van het veld. `inputDecorationTheme` in `lib/theme/app_theme.dart` zet `filled: true` met `fillColor: surfaceColor` en een `OutlineInputBorder`. De gap van die `OutlineInputBorder` onderbreekt alleen de *lijn*, niet de vulling. Het label straddelt dus altijd een kleurovergang — in beide thema's. Alleen valt hij in het lichte thema niet op: | profiel | schermachtergrond | veldvulling | verschil | |---|---|---|---| | Europa | `#F4F7FC` | `#FFFFFF` | nauwelijks zichtbaar | | Donker | `#0F172A` | `#1E293B` | duidelijke rand | Gevonden tijdens de rondgang van #780. Het valt buiten dat issue omdat het geen contrastdefect is en de reparatie een ontwerpkeuze vraagt. ## Wat er te kiezen valt Alle drie raken élk tekstveld in de app en verschuiven dus goldens: 1. `filled: false` voor de omrande velden — dat is de standaard Material "outlined text field", en dan is er geen rand om doorheen te lopen. De velden verliezen hun vlak. 2. Het label binnen het veld laten zakken (`FloatingLabelBehavior` / een gevulde stijl met onderstreping in plaats van een omranding). 3. De twee kleuren dichter bij elkaar brengen in het donkere profiel. Dat verzacht het symptoom en laat de oorzaak staan; bovendien zijn eigen profielen te bewerken, dus het geldt niet voor iedereen. Voorkeur van mij is 1: het is de stijl waar Material deze combinatie voor bedoeld heeft, en het is de enige die de oorzaak wegneemt in plaats van de zichtbaarheid ervan. ## Reproductie 1. Instellingen → App-thema → profiel *Donker* → Opslaan. 2. Nieuwe presentatie, slidetype *Cockpit*. 3. Kijk naar "Waarde" en "Eenheid" boven de invoervelden van Meter 1.

brenno added the

bug

label

2026-07-24 17:38:18 +00:00

brenno added the

in-progress

label

2026-07-24 19:30:38 +00:00

brenno commented

2026-07-24 19:30:38 +00:00

Author

Owner

Opgepakt, optie 1: filled: false voor de omrande velden. Tak: fix/veldlabel-rand-811.

Reikwijdte: lib/theme/app_theme.dart (het inputDecorationTheme-blok), plus de goldens die daardoor verschuiven en een toets die de combinatie vulling+omranding afdekt zodat hij niet terugkomt.

Opgepakt, optie 1: `filled: false` voor de omrande velden. Tak: `fix/veldlabel-rand-811`. Reikwijdte: `lib/theme/app_theme.dart` (het `inputDecorationTheme`-blok), plus de goldens die daardoor verschuiven en een toets die de combinatie vulling+omranding afdekt zodat hij niet terugkomt.

brenno referenced this issue

2026-07-24 19:38:34 +00:00

fix(a11y): de donkere modus als geheel bekeken — elf bevindingen, en de twee poorten die ze niet zagen (#780) #817

brenno referenced this issue

2026-07-24 19:38:43 +00:00

De donkere modus is nooit als geheel bekeken — vier defecten op één dag, drie ongemeld #780

brenno referenced this issue

2026-07-24 19:43:07 +00:00

De donkere modus is nooit als geheel bekeken — vier defecten op één dag, drie ongemeld #780

brenno referenced this issue from a commit

2026-07-24 20:12:50 +00:00

fix(a11y): het zwevende veldlabel liep door een kleurovergang (#811)

brenno referenced this issue from a commit

2026-07-24 20:13:17 +00:00

docs(source-map): het outlined veld en waarom de rand van rol wisselde (#811)

brenno referenced this issue from a pull request that will close it,

2026-07-24 20:13:46 +00:00

fix(a11y): het zwevende veldlabel liep door een kleurovergang — en de rand kon het veld niet alleen dragen #820

brenno referenced this issue

2026-07-24 20:22:55 +00:00

make check valt om op een bedorven build/test_cache, en de melding wijst naar de verkeerde test #798

brenno referenced this issue

2026-07-24 20:26:25 +00:00

De donkere modus, ronde twee: de vijf oppervlakken die #780 niet heeft bekeken #821

brenno referenced this issue from a commit

2026-07-24 20:29:50 +00:00

fix(a11y): het zwevende veldlabel liep door een kleurovergang (#811)

brenno referenced this issue from a commit

2026-07-24 20:29:50 +00:00

docs(source-map): het outlined veld en waarom de rand van rol wisselde (#811)

brenno closed this issue

2026-07-24 20:29:56 +00:00

brenno commented

2026-07-24 20:30:14 +00:00

Author

Owner

Gemerged in a5097015 (PR #820), op main geverifieerd.

Optie 1, om de reden die je zelf gaf: het is de enige die de oorzaak wegneemt in plaats van de zichtbaarheid ervan.

Eén ding zat er niet in je afweging, en het draaide de reparatie half om. Je noemde "de velden verliezen hun vlak" als de prijs. Dat klopt, maar het is niet de hele rekening: zonder vulling is de rand het enige dat het veld nog markeert, en gemeten kon outlineVariant dat niet dragen — 1,58–1,92:1 tegen de achtergrond eronder. Mee omgezet naar outline: 4,18–5,61:1, over de 3:1 die WCAG 1.4.11 voor de grens van een bedieningselement vraagt, en de rol die Material 3 hier zelf voorschrijft. Het veld is dus beter vindbaar dan vóór de reparatie.

Goldens verschuiven niet. Je verwachtte van wel; de goldens dekken SlidePreviewWidget, en een dia gebruikt geen InputDecoration.

De dertien plekken met een eigen filled: true (notitiebalk, zoekbalk, tabelkoppen) blijven zoals ze zijn. Die kiezen bewust een vlak, en geen van alle heeft een zwevend label — nagekeken, niet aangenomen.

De regressietest meet op pixels en niet op een themavlag: tegen de oude code droeg 91,7% van het veldoppervlak een eigen vulling (12.573 van 13.708), nu 0%. Vier toetsen, alle vier één keer rood gezien.

Poort: make check groen, ook na rebase op #814 en #812 — 6.561 tests, dekking 86,5%, per-bestandsvloer 0.

Gemerged in `a5097015` (PR #820), op main geverifieerd. Optie 1, om de reden die je zelf gaf: het is de enige die de oorzaak wegneemt in plaats van de zichtbaarheid ervan. **Eén ding zat er niet in je afweging, en het draaide de reparatie half om.** Je noemde "de velden verliezen hun vlak" als de prijs. Dat klopt, maar het is niet de hele rekening: zonder vulling is de rand het enige dat het veld nog markeert, en gemeten kon `outlineVariant` dat niet dragen — 1,58–1,92:1 tegen de achtergrond eronder. Mee omgezet naar `outline`: 4,18–5,61:1, over de 3:1 die WCAG 1.4.11 voor de grens van een bedieningselement vraagt, en de rol die Material 3 hier zelf voorschrijft. Het veld is dus **beter** vindbaar dan vóór de reparatie. **Goldens verschuiven niet.** Je verwachtte van wel; de goldens dekken `SlidePreviewWidget`, en een dia gebruikt geen `InputDecoration`. **De dertien plekken met een eigen `filled: true`** (notitiebalk, zoekbalk, tabelkoppen) blijven zoals ze zijn. Die kiezen bewust een vlak, en geen van alle heeft een zwevend label — nagekeken, niet aangenomen. De regressietest meet op pixels en niet op een themavlag: tegen de oude code droeg 91,7% van het veldoppervlak een eigen vulling (12.573 van 13.708), nu 0%. Vier toetsen, alle vier één keer rood gezien. Poort: `make check` groen, ook na rebase op #814 en #812 — 6.561 tests, dekking 86,5%, per-bestandsvloer 0.

Rows
Columns

Zwevende veldlabels straddelen in donkere modus een harde rand #811

Wat je ziet

Waarom

Wat er te kiezen valt

Reproductie