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

Merged

brenno merged 2 commits from fix/veldlabel-rand-811 into main

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

brenno commented

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

Owner

Closes #811.

Een zwevend label staat half boven de bovenrand van het veld en half erin, en de gap van een OutlineInputBorder onderbreekt alleen de lijn — niet het vlak. Met filled: true liep er dus altijd een kleurovergang dwars door de letters. In het lichte profiel viel dat niet op (#F4F7FC tegen #FFFFFF), in het donkere las het als een afgesneden onderste letterhelft (#0F172A tegen #1E293B).

Optie 1 uit het issue, en om de reden die daar staat: het is de enige die de oorzaak wegneemt in plaats van de zichtbaarheid ervan. Zonder vulling neemt het veld over waar het op staat, en dan is er niets om doorheen te lopen. Dat is ook precies wat Material 3 met een outlined tekstveld bedoelt — de combinatie vulling + omranding was de afwijking, niet de norm.

Wat het issue niet voorzag

Het issue schreef "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.

	rand tegen de achtergrond eronder
`outlineVariant` (was)	1,58 – 1,92:1
`outline` (nu)	4,18 – 5,61:1

WCAG 1.4.11 vraagt 3:1 voor de grens van een bedieningselement. Het veld is dus beter vindbaar dan vóór de reparatie, niet slechter — en outline is ook de rol die Material 3 hier zelf voorschrijft.

Wat er níet in zit

De dertien plekken die zélf filled: true met een eigen kleur zetten (de notitiebalk, de zoekbalk, de tabelkoppen). Die kiezen bewust een vlak, en geen van alle heeft een zwevend label — nagekeken, niet aangenomen.

Goldens verschuiven niet: de goldens dekken SlidePreviewWidget, en een dia gebruikt geen InputDecoration. Het issue vermoedde van wel.

Poort

make check groen in een verse worktree: 6.561 tests, dekking 86,5%, per-bestandsvloer 0.

De regressietest meet de oorzaak op pixels en niet op een themavlag — wat de gebruiker ziet is het vlak, niet het veld dat het zette. Tegen de oude code droeg 91,7% van het veldoppervlak een eigen vulling (12.573 van 13.708 pixels); nu 0%. De randmeting loopt over alle drie de ingebouwde profielen. Alle vier de toetsen zijn één keer rood gezien tegen de oude waarden, met de gemeten verhouding in de foutmelding.

fromProfile kwam door dit blok over de 150 regels van check_method_length; het is een top-level helper geworden in dezelfde library, niet een verhoogde basislijn.

Closes #811. Een zwevend label staat half boven de bovenrand van het veld en half erin, en de gap van een `OutlineInputBorder` onderbreekt alleen de *lijn* — niet het vlak. Met `filled: true` liep er dus altijd een kleurovergang dwars door de letters. In het lichte profiel viel dat niet op (#F4F7FC tegen #FFFFFF), in het donkere las het als een afgesneden onderste letterhelft (#0F172A tegen #1E293B). Optie 1 uit het issue, en om de reden die daar staat: het is de enige die de oorzaak wegneemt in plaats van de zichtbaarheid ervan. Zonder vulling neemt het veld over waar het op staat, en dan is er niets om doorheen te lopen. Dat is ook precies wat Material 3 met een *outlined* tekstveld bedoelt — de combinatie vulling + omranding was de afwijking, niet de norm. ## Wat het issue niet voorzag Het issue schreef "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. | | rand tegen de achtergrond eronder | |---|---| | `outlineVariant` (was) | 1,58 – 1,92:1 | | `outline` (nu) | 4,18 – 5,61:1 | WCAG 1.4.11 vraagt 3:1 voor de grens van een bedieningselement. Het veld is dus **beter** vindbaar dan vóór de reparatie, niet slechter — en `outline` is ook de rol die Material 3 hier zelf voorschrijft. ## Wat er níet in zit De dertien plekken die zélf `filled: true` met een eigen kleur zetten (de notitiebalk, de zoekbalk, de tabelkoppen). Die kiezen bewust een vlak, en geen van alle heeft een zwevend label — nagekeken, niet aangenomen. Goldens verschuiven niet: de goldens dekken `SlidePreviewWidget`, en een dia gebruikt geen `InputDecoration`. Het issue vermoedde van wel. ## Poort `make check` groen in een verse worktree: 6.561 tests, dekking 86,5%, per-bestandsvloer 0. De regressietest meet de oorzaak op **pixels** en niet op een themavlag — wat de gebruiker ziet is het vlak, niet het veld dat het zette. Tegen de oude code droeg 91,7% van het veldoppervlak een eigen vulling (12.573 van 13.708 pixels); nu 0%. De randmeting loopt over alle drie de ingebouwde profielen. Alle vier de toetsen zijn één keer rood gezien tegen de oude waarden, met de gemeten verhouding in de foutmelding. `fromProfile` kwam door dit blok over de 150 regels van `check_method_length`; het is een top-level helper geworden in dezelfde library, niet een verhoogde basislijn.

brenno added 2 commits

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

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

Een zwevend label staat half boven de bovenrand van het veld en half
erin, en de gap van een OutlineInputBorder onderbreekt alleen de lijn en
niet het vlak. Met `filled: true` liep er dus altijd een kleurovergang
dwars door de letters. In het lichte profiel viel dat niet op (#F4F7FC
tegen #FFFFFF), in het donkere las het als een afgesneden onderste
letterhelft (#0F172A tegen #1E293B).

Zonder vulling neemt het veld over waar het op staat en is er niets om
doorheen te lopen — wat Material 3 met een *outlined* tekstveld ook
bedoelt.

De rand moet het veld dan alleen dragen, en gemeten kon `outlineVariant`
dat niet: 1,58-1,92:1 tegen de achtergrond eronder. Mee omgezet naar
`outline` (4,18-5,61:1), over de 3:1 van WCAG 1.4.11 voor de grens van
een bedieningselement.

De regressietest meet op pixels, niet op een themavlag: tegen de oude
code droeg 91,7% van het veldoppervlak een eigen vulling.

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

scans / scans (pull_request) Successful in 3m17s

Details

79bfc42b02

brenno force-pushed fix/veldlabel-rand-811 from 79bfc42b02

scans / scans (pull_request) Successful in 3m17s

Details

to 6982d71bdf

scans / scans (pull_request) Successful in 3m18s

Details

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

Compare