Buttons - Front end

[MariannevanLierop]

30

### Tasks

[iamskip]

@Michel-Verhoeven Gisteren heb ik samen met Jeffrey gekeken naar de tokens van de Button. De focus van de button component wordt geregeld via een andere component, namelijk de focus ring. Deze component wordt gestyled met de ‘Focus’ tokens, die te vinden zijn in de common laag. In zowel het ontwerp als in Tokens Studio staat dit nu goed ingesteld. Ik heb gisteren een succesvolle push naar GitHub gedaan.

Utrecht heeft dit op dezelfde manier opgelost: Link naar Utrecht’s focus-ring component.

Zou je kunnen controleren of je hier nu verder mee kunt? Mocht je tegen problemen aanlopen, dan kun je altijd contact opnemen met Robbert van NLDS. Hij heeft het Design System van Utrecht ontwikkeld.

[iamskip]

UX-Feedback

@Michel-Verhoeven Over het algemeen ziet het er goed uit. Ik heb een paar opmerkingen over de toegankelijkheid. De focusring lijkt mogelijk onvoldoende contrast te hebben met de witte achtergrond en de donkergroene kleur van de button in de Hover Focus Visible state. Dit kan een toegankelijkheidsprobleem opleveren, vooral wanneer Els gaat testen. Dit is iets dat ik verder in het ontwerp ga aanpakken. Ik zal met Els overleggen om ervoor te zorgen dat er voldoende contrast is in elke state en dat het ontwerp voldoet aan de toegankelijkheidsrichtlijnen.

[ElsGroffen]

@Michel-Verhoeven ik heb vandaag met @iamskip gekeken naar het button element.

Mijn opmerkingen:

• Stippellijn bij focus is ielig(2x2px) en komt daarna druk over. In de kromming van de focusrand hebben drie van de 4 pixels een te laag contrast met de achtergrond. In het figmabestand van Vladimir oogt deze focusrand meer solide, graag deze aanhouden
• Focusrand bij voorkeur meer richting streepjes dan stippen
• Focusrand bij voorkeur meer marge tussen knop en focuslijn zodat er geen contrastprobleem is tussen focusrand en knopkleur
• Knop Subtle -> bij hover verschijnt alleen een andere achtergrondkleur, die te weinig contrast heeft met de achtergrond. Oplossing kan gevonden worden in een rand. Vladimir gaat dit overleggen bij de mensen van het DS. Dit is ook als een primary knop de status disabled heeft.

Dit is het tot nu toe. Vladimir neemt deze opmerkingen mee. Als er een nieuw ontwerp is kan ik nog een keer kijken naar toegankelijkheidsissues.

Ter info: Ik heb nu alleen naar het button element gekeken. Uiteindelijk zal de hele pagina, met alle begeleidende teksten en functionaliteiten beoordeeld moeten worden op toegankelijkheid.

[Michel-Verhoeven]

@ElsGroffen er staat een nieuwe versie klaar op staging

• Stippellijn bij focus is ielig(2x2px) en komt daarna druk over. In de kromming van de focusrand hebben drie van de 4 pixels een te laag contrast met de achtergrond.
• In het figmabestand van Vladimir oogt deze focusrand meer solide, graag deze aanhouden Focusrand bij voorkeur meer richting streepjes dan stippen

Focusrand is nu dashed gemaakt ipv dotted

• Focusrand bij voorkeur meer marge tussen knop en focuslijn zodat er geen contrastprobleem is tussen focusrand en knopkleur

Er zit nu 1px offset op, dit lijkt nu voldoende. Ik heb getest met 2px maar dat is te veel in mijn optiek omdat er dan weinig ruimte zit wanneer je meer elementen naast elkaar plaatst, zie voorbeeld hieronder (met 2px offset)

• Knop Subtle -> bij hover verschijnt alleen een andere achtergrondkleur, die te weinig contrast heeft met de achtergrond. Oplossing kan gevonden worden in een rand. Vladimir gaat dit overleggen bij de mensen van het DS. Dit is ook als een primary knop de status disabled heeft.

Dit moet @iamskip eerst oplossen in het design, ik heb hiervoor nog geen nieuwe waarde in de design tokens gezien. Als die is toegevoegd dan kan ik hem toepassen.

@iamskip verder viel mij op dat in het design de "Hover + focus-visible" bij de default, primary en secondary secondary buttons geen border hebben. Dit is vreemd want in de "Hover" state hebben ze het wel in het design. Bij "Hover + focus-visible" heb je eigenlijk beide states die op de button van toepassing zijn dus dan zouden ook beide styles moeten toepassen. Heb je hier bewust geen border gepakt? Anders moet ik hier speciaal een uitzondering voor maken en kunnen we niet meer de opzet van Utrecht gebruiken.

[ElsGroffen]

@Michel-Verhoeven blij met dashed in plaats van dotted. Is veel duidelijker nu. Thx Ik wacht af welke oplossing @iamskip heeft voor de knop Subtle

[iamskip]

@Michel-Verhoeven Deze opmerking/vraag leg ik bij de ontwerpers van NLDS neer, aangezien dit een component is dat we één op één overnemen. Het enige dat we hier doen, is onze branding tokens toepassen.

[iamskip]

@Michel-Verhoeven Ik heb de aanpassingen voor Knop Subtle in de tokens doorgevoerd en deze wijzigingen gepusht naar GitHub.

[Michel-Verhoeven]

@iamskip de nieuwe tokens zijn ingeladen en heb een nieuwe deploy gedaan op staging