Form "Files" .dso-primary heeft geen zichtbare focus

[MichielDHVD]

Aanleiding Bevinding uit de test van Stichting Accessibility in 2021: De knop 'document toevoegen' knoppen op de volgende pagina's hebben geen zichtbare focus. Zorg ervoor dat elk interactief UI component een zichtbare focus heeft.

In de wizard wordt de volgende gewenste gebruiksactie altijd 'primair' gestyled. Zo wordt de gebruiker door het proces heengeleid. Op de stap 'documenten' is bij een gevraagde bijlage (accordion) eerst de knop 'document toevoegen' primair gestyled, en als er documenten zijn toegevoegd krijgt de knop 'volgende' primaire styling.

Knoppen krijgen browser default focus styling.

Formulier elementen niet. De knop 'document toevoegen' in component Files krijgt custom focus styling. Die gelijk is aan een primaire knop.

Zou het component Files geen knoppen kunnen gebruiken met browser default focus styling? Nee, want het is geen echte button. We stijlen namelijk het element.

Werkzaamheden Naast class="dso-secondary" ook custom styling toevoegen voor class="dso-primairy".

De focus kan gelijk zijn aan de hover styling.

Ontwerp

[PieterVerheij]

@MichielDHVD wat is de scope van deze aanpassingen? Nu zit deze styling alleen op uploud in de form-group.dso-files: moet ik het zo lezen dat alleen daar de focus-styling moet worden aangepast, of voor ALLE dso-primary-buttons?

[bramhoosemans]

@PieterVerheij Alleen styling toevoegen in form-group.dso-files. Knoppen buiten 'Files' krijgen browser default focus styling.

[PieterVerheij]

Welke kleur is het lichtgroen bij Primary - Disabled? Deze hebben wij nog niet in ons scss-palet.

$grasgroen:             #39870c;    // 100% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
$grasgroen-80:          #609f3c;    //  80% tint       - Normal text: WCAG AA: Fail;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: Fail;
$grasgroen-40:          #afcf9d;    //  40% tint       - niet te gebruiken als leestekst
$grasgroen-10:          #ebf3e6;    //  10% tint       - niet te gebruiken als leestekst

$lime:                  #79b929;
$lime-20:               #e4f1d4;

$bosgroen-130:          #15301e;    // 130% tint
$bosgroen:              #275937;    // 100% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
$bosgroen-80:           #527a5e;    //  80% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
$bosgroen-60:           #7d9886;    //  60% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: Fail;
$bosgroen-40:           #a8bcaf;    //  40% tint       - niet te gebruiken als leestekst
$bosgroen-10:           #e9eeeb;    //  10% tint       - niet te gebruiken als leestekst

[bramhoosemans]

Dat is $grasgroen-40. Maar dan de échte 40% grasgroen vertaling op een witte achtergrond.

Er staat nog een taak op de backlog om alle kleurwaardes langs te lopen, want er zijn al meerdere verschillen aan het licht gekomen.

[PieterVerheij]

@bramhoosemans te bewonderen op https://www.dso-toolkit.nl/_1451/components/detail/group-files.html