Hopp til innhold

Høydepunkter fra april 2022

William Killerud

2022.04.28

Her er høydepunktene fra Jøkul i april.

  • Et skikkelig løft ble gjort for å få Jøkul til å funke i høykontrastmodus
  • Portalen har fått en ny onboardingflyt
  • Vi samlet det vi har av guider for litt mer viderekomne under et eget menypunkt
  • Noen bugs i Figma-biblioteket har blitt retta
    • TextInput og TextArea er responsive igjen
    • Ditto navigasjonskort
  • Støtte for React 18 og server-side rendering
  • Mulig å skjule labels for alle skjemafelter visuelt

Ellers pågår det en viktig diskusjon om compact og mobil i Figma-skisser. Om du har vært frustrert med tingenes tilstand er tiden for å si ifra.

Høykontrastmodus og Jøkul

Vi ble oppmerksomme på at Jøkul hadde mange kritiske mangler som gjorde løsningene våre utilgjengelige for brukere av høykontrastmodus (forced colors). Disse er rettet, og det er viktig at alle oppdaterer til nyeste versjon.

Design for høykontrastmodus

Høykontrastmodus legger noen begrensninger på design:

  • Vi har kun åtte farger
  • Alle åtte fargene er styrt av brukeren selv
  • Fargene er funksjonelle - aldri dekorative
  • Skygger finnes ikke
  • Bilder må antas å være visuelt utilgjengelige for brukeren

Dette gir noen spennende utfordringer både på komponentnivå og høyere, for eksempel:

  • Er animasjoner og ulike tilstander synlige nok når vi ikke har skygger eller kan animere mellom farger?
  • Hvordan kan vi tydeliggjøre hvilken av knappene våre som er primær og sekundær?
  • Er det mulig å forstå innholdet på siden uten å se bilder, eller bruke skjermleser?
  • Hvordan skiller vi på ulike typer tags når vi ikke har farger?

Enn så lenge har fokuset til Jøkul-teamet vært på å få komponentene til å fungere overhode i høykontrastmodus. Om du vil bryne deg på denne designutfordringen, si i fra på designsystemforum så hjelper noen fra Jøkul-teamet deg i gang!

Sjekk deres egen kode også

Ta en sjekk på teamets egen kode også, for å se om dere har noen av de samme feilene vi gjorde i Jøkul.

De groveste feilene skjedde der vi skrudde av border og outline for å bruke box-shadow til å lage designet vi var ute etter. I høykontrastmodus skrus alt av box-shadow helt av. Om du da ikke har border eller outline blir tingene dine usynlige.

Du finner to nye mixins i Jøkul som kan være til hjelp:

Vi har skrevet noe om hvordan du kan teste i testguiden vår under Universell utforming.

Ny onboarding

Jøkul-teamet har brukt april til å designe et nytt onboardingløp for designsystemet. En del av det er synlig her i portalen. På landingssiden finner du tre navigasjonskort som peker til en flunkende ny Kom i gang-seksjon. Ta en titt, og kom gjerne med tilbakemeldinger!

Start her om Jøkul er nytt for deg.

Nytt sted for guider

Med en ny Kom i gang-seksjon endte vi opp med noe innhold som ikke helt passet inn, men som vi likevel ville ta vare på. De har fått et nytt hjem under Guider.

Sitter du inne med noen hvordan kan jeg-spørsmål som kunne trengt en guide? Gi lyd, så kanskje det dukker opp en guide etter hvert.

React 18 og server-side rendering

React 18 ble lansert 29. mars, og Jøkul ble ferdig migrert 8. april. I forbindelse med oppgraderingen, nå som Reacts egen useId er tilgjengelig i versjon 18, har Jøkul fått støtte for server-side rendering og hydrering i klienten. Om du for eksempel vil bruke Jøkul i Remix skal det være mulig.

Jøkul støtter fortsatt React 17. Om du skulle støte på noen problemer med å bruke Jøkul på versjon 17 så si ifra!

Skjule labels visuelt

Nå er det mulig å gjøre så labels på skjemafelter bare dukker opp for skjermlesere. Alle skjemafelter har fått propen labelProps, som du kan bruke til å sette labelProps.srOnly.

<TextInput label="Godt navn" labelProps={{ srOnly: true }} />

Diverse bugfikser

  • David Aasterud gjorde så den nye useId med støtte for React 18 også fungerte riktig i React 17 (#2833)
  • Kenneth Apeland fikset en feil med tekstfarge i dark mode på landingssiden (#2841)

Takk

Takk til alle bidragsytere, både på GitHub og i Figma!

  • daa1
  • kennidenni

En stor takk også til alle som er med på designsystemforum!