fix(a11y): laat het instellingenvenster tegen zijn eigen 200%-tekstschaling (#646) #688

Merged

brenno merged 1 commit from fix/instellingen-zijbalk-646 into main 2026-07-22 20:51:40 +00:00

Conversation 0 Commits 1 Files changed 5 +297 -54

brenno commented 2026-07-22 20:51:33 +00:00

Owner

Copy link

Lost het hoofditem van #646 op: het instellingenvenster bezweek bij 200% tekstgrootte — de instelling die het zelf aanbiedt.

Het probleem

OciDeck biedt tekstschaling tot 200% aan, uitdrukkelijk als toegankelijkheidsinstelling (WCAG 1.4.4). Zet je hem aan en open je Instellingen, dan leest de zijbalk "Einste…", "App-De…", "Präsent…", "Lizenz u…". Een navigatie waarop je niet meer kunt navigeren, voor precies de gebruiker die de instelling nodig had.

Oorzaak: een vaste breedte van 234 pixels, en elk label op één regel met ellipsis.

De reparatie

• De zijbalk groeit mee met de tekstschaal, tot anderhalf keer. Eén-op-één zou 468 px zijn en het venster opeten — dan is de navigatie leesbaar en de inhoud niet.
• Labels mogen twee regels gebruiken. Verticale ruimte is hier goedkoper dan horizontale: de lijst scrolt toch al.
• Elk item draagt een tooltip met de volle naam. Dat is het vangnet, niet de oplossing — een tooltip moet je eerst ontdekken.
• Op 100% verandert er niets: de breedte is dan exact 234, zoals hij was.

Drie fouten die niemand gemeld had

Bij het schrijven van de test kwamen er drie overloopfouten uit, alle drie dezelfde klasse — een Row met tekst en geen ruimte om te wijken:

Waar	Hoeveel	Wat je kwijt was
De knoppenbalk onderaan	261 px naar rechts	De opslaanknop, aan de kant die wegviel
De kop van een inklapbare sectie	398 px naar rechts	De titel van de sectie
De kolom van het venster zelf	65 px naar onderen	De hele voetbalk onder de vensterrand

De knoppen stapelen nu (Wrap), de koppen breken af (Flexible + twee regels), en het venster groeit mee — begrensd door het scherm, want een dialoog die groter is dan het scherm ruilt het ene probleem voor het andere.

Over de test, en wat die níét kan

Onder flutter test is het lettertype een testfont waarin elk teken even breed is als hoog. "Lizenz und Datenschutz" is daar 22 vierkanten breed en past in geen redelijke kolom, ook op 100% niet. Een toets "er kapt niets af" zou dus rood staan op een interface die in het echt prima leest, en groen te maken zijn door de kolom absurd breed te maken — een test die je naar het verkeerde antwoord duwt.

De test meet daarom wat het testfont overleeft: de breedte groeit mee (en houdt zich in), labels krijgen twee regels, de tooltip draagt de volle naam. Plus de eigenschap waar het werkelijk om gaat: grotere tekst mag niet méér informatie kosten dan kleine tekst. Die grens staat in de test zelf opgeschreven — een test die doet alsof ze meer bewijst dan ze kan, is erger dan geen test.

Duits als taal, want daarin viel het op; met korte woorden zou de test slagen zonder dat er iets was opgelost.

Getoetst

• make check groen. make test-golden groen (de zijbalk is op 100% onveranderd, dus de goldens verschuiven niet).
• make check-secrets en make sast: schoon.
• Twee mutaties geplant — de vaste breedte terug, en maxLines terug naar 1. Beide maken de test rood. De eerste poging trof per ongeluk een andere maxLines: 2 in hetzelfde bestand en leverde groen op; dat was mijn mutatie die miste, niet de test. Opnieuw gericht en toen wél rood.
• Niet gedaan: met een echt lettertype gekeken. Dat is beeldkeuring en vraagt de app draaiend. De test bewaakt de structuur; hoe het er uitziet is daarmee niet vastgesteld.

Wat van #646 overblijft

De issue bundelt zes kleinere observaties uit dezelfde sessie. Die blijven staan: de consentmuur die "Akkoord" grijs laat zonder te zeggen waarom, de dubbele opslagdialoog, de half-Engelse macOS-menubalk, de foutmelding bij een kapotte .md zonder reden of regelnummer, de tijdstempel in de exportnaam, en het Cockpit-diatype dat in de standaardlijst staat terwijl de informatieveiligheidsmodule uit is en belooft verborgen te blijven.

Die laatste twee noemt de issue zelf als de enige met echte gebruikersimpact. Het Cockpit-item is bovendien een gebroken belofte, geen schoonheidsfoutje — dat verdient een eigen ronde.

Werkt aan #646; die blijft open voor de rest.

Lost het hoofditem van #646 op: het instellingenvenster bezweek bij 200% tekstgrootte — de instelling die het zelf aanbiedt. ## Het probleem OciDeck biedt tekstschaling tot 200% aan, uitdrukkelijk als toegankelijkheidsinstelling (WCAG 1.4.4). Zet je hem aan en open je Instellingen, dan leest de zijbalk "Einste…", "App-De…", "Präsent…", "Lizenz u…". Een navigatie waarop je niet meer kunt navigeren, voor precies de gebruiker die de instelling nodig had. Oorzaak: een vaste breedte van 234 pixels, en elk label op één regel met ellipsis. ## De reparatie - De zijbalk **groeit mee** met de tekstschaal, tot anderhalf keer. Eén-op-één zou 468 px zijn en het venster opeten — dan is de navigatie leesbaar en de inhoud niet. - Labels mogen **twee regels** gebruiken. Verticale ruimte is hier goedkoper dan horizontale: de lijst scrolt toch al. - Elk item draagt een **tooltip** met de volle naam. Dat is het vangnet, niet de oplossing — een tooltip moet je eerst ontdekken. - Op 100% verandert er niets: de breedte is dan exact 234, zoals hij was. ## Drie fouten die niemand gemeld had Bij het schrijven van de test kwamen er drie overloopfouten uit, alle drie dezelfde klasse — een `Row` met tekst en geen ruimte om te wijken: | Waar | Hoeveel | Wat je kwijt was | | --- | --- | --- | | De knoppenbalk onderaan | 261 px naar rechts | De **opslaanknop**, aan de kant die wegviel | | De kop van een inklapbare sectie | 398 px naar rechts | De titel van de sectie | | De kolom van het venster zelf | 65 px naar onderen | De hele voetbalk onder de vensterrand | De knoppen stapelen nu (`Wrap`), de koppen breken af (`Flexible` + twee regels), en het venster groeit mee — begrensd door het scherm, want een dialoog die groter is dan het scherm ruilt het ene probleem voor het andere. ## Over de test, en wat die níét kan Onder `flutter test` is het lettertype een testfont waarin elk teken even breed is als hoog. "Lizenz und Datenschutz" is daar 22 vierkanten breed en past in geen redelijke kolom, ook op 100% niet. Een toets *"er kapt niets af"* zou dus **rood staan op een interface die in het echt prima leest**, en groen te maken zijn door de kolom absurd breed te maken — een test die je naar het verkeerde antwoord duwt. De test meet daarom wat het testfont overleeft: de breedte groeit mee (en houdt zich in), labels krijgen twee regels, de tooltip draagt de volle naam. Plus de eigenschap waar het werkelijk om gaat: **grotere tekst mag niet méér informatie kosten dan kleine tekst.** Die grens staat in de test zelf opgeschreven — een test die doet alsof ze meer bewijst dan ze kan, is erger dan geen test. Duits als taal, want daarin viel het op; met korte woorden zou de test slagen zonder dat er iets was opgelost. ## Getoetst - `make check` groen. `make test-golden` groen (de zijbalk is op 100% onveranderd, dus de goldens verschuiven niet). - `make check-secrets` en `make sast`: schoon. - Twee mutaties geplant — de vaste breedte terug, en `maxLines` terug naar 1. Beide maken de test rood. De eerste poging trof per ongeluk een andere `maxLines: 2` in hetzelfde bestand en leverde groen op; dat was mijn mutatie die miste, niet de test. Opnieuw gericht en toen wél rood. - **Niet gedaan: met een echt lettertype gekeken.** Dat is beeldkeuring en vraagt de app draaiend. De test bewaakt de structuur; hoe het er uitziet is daarmee niet vastgesteld. ## Wat van #646 overblijft De issue bundelt zes kleinere observaties uit dezelfde sessie. Die blijven staan: de consentmuur die "Akkoord" grijs laat zonder te zeggen waarom, de dubbele opslagdialoog, de half-Engelse macOS-menubalk, de foutmelding bij een kapotte `.md` zonder reden of regelnummer, de tijdstempel in de exportnaam, en het Cockpit-diatype dat in de standaardlijst staat terwijl de informatieveiligheidsmodule uit is en belooft verborgen te blijven. Die laatste twee noemt de issue zelf als de enige met echte gebruikersimpact. Het Cockpit-item is bovendien een gebroken belofte, geen schoonheidsfoutje — dat verdient een eigen ronde. Werkt aan #646; die blijft open voor de rest.

brenno added 1 commit 2026-07-22 20:51:33 +00:00

fix(a11y): laat het instellingenvenster tegen zijn eigen 200%-tekstschaling (#646) ... 6c56e7bcdb

OciDeck biedt tekstschaling tot 200% aan als toegankelijkheidsinstelling. Het
eigen instellingenvenster kon daar niet tegen: de zijbalk had een vaste breedte
van 234 pixels en elk label kapte af op één regel — "Einste…", "App-De…",
"Präsent…", "Lizenz u…". Een navigatie waarop je niet meer kunt navigeren, voor
precies de gebruiker die de instelling aanzette.

De zijbalk groeit nu mee tot anderhalf keer (één-op-één zou 468 px zijn en het
venster opeten), labels mogen twee regels gebruiken — verticale ruimte is hier
goedkoper, want de lijst scrolt toch al — en elk item draagt een tooltip met de
volle naam als vangnet. Op 100% verandert er niets: dan is de breedte exact 234
zoals hij was.

**Drie fouten die niemand gemeld had, gevonden bij het schrijven van de test**,
alle drie dezelfde klasse — een `Row` met tekst en geen ruimte om te wijken:

- de knoppenbalk onderaan liep 261 px buiten beeld, mét de opslaanknop aan de
  kant die wegviel. Nu een `Wrap`: bij krapte stapelen ze.
- de kop van een inklapbare sectie 398 px. Nu `Flexible` met twee regels.
- de kolom van het venster zelf 65 px naar onderen, omdat kop en voet meegroeien
  terwijl de hoogte vaststond. Nu groeit het venster mee, begrensd door het
  scherm — een dialoog die groter is dan het scherm ruilt het ene probleem voor
  het andere.

**Over de test.** Onder `flutter test` is elk teken even breed als hoog, dus
"er kapt niets af" is daar niet te meten: dat zou rood staan op een interface die
in het echt prima leest, en groen te maken zijn door de kolom absurd breed te
maken. De test meet daarom wat het testfont overleeft — de breedte groeit mee,
labels krijgen twee regels, de tooltip draagt de volle naam — plus de eigenschap
waar het werkelijk om gaat: grotere tekst mag niet méér informatie kosten dan
kleine tekst. Die grens staat in de test zelf opgeschreven, want een test die
doet alsof ze meer bewijst dan ze kan is erger dan geen test.

Duits als taal, want daarin viel het op; met korte woorden zou de test slagen
zonder dat er iets was opgelost. Twee mutaties geplant (vaste breedte terug, en
maxLines terug naar 1): beide maken hem rood.

De rest van #646 (consentmuur, dubbele opslagdialoog, de macOS-menubalk, de
foutmelding bij een kapotte .md, het Cockpit-diatype in de standaardlijst) is
een aparte ronde; dit is het item met de titel.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

brenno merged commit 122cc4a4e2 into main 2026-07-22 20:51:40 +00:00

brenno referenced this pull request from a commit 2026-07-22 20:51:41 +00:00

Merge pull request 'fix(a11y): laat het instellingenvenster tegen zijn eigen 200%-tekstschaling (#646)' (#688) from fix/instellingen-zijbalk-646 into main

brenno referenced this pull request 2026-07-22 20:52:00 +00:00

[Bug] The Settings sidebar truncates at the 200% text scale the app itself offers #646

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

accepted

Assessed and will be built

  

bug

Something is broken

  

declined

Assessed and will not be built

  

docs

Documentation only

  

duplicate

Already tracked elsewhere

  

enhancement

New feature or improvement request

  

good first issue

Small, self-contained, and a good place to start

  

in-progress

Someone is working on this right now. Do not start it in parallel.

  

needs-info

Waiting for the reporter

  

privacy

Personal data can leak. Handled before anything else.

  

security

A weakness someone could use. Handled before anything else.

  

triage

Awaiting assessment

No labels

accepted

bug

declined

docs

duplicate

enhancement

good first issue

in-progress

needs-info

privacy

security

triage

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

LibreKAT/Ocideck!688

No description provided.