Loader

Om komponenten

Formålet med loaderen er å gi brukeren beskjed om at innhold må lastes inn. Etter at innholdet er ferdig lastet inn, skal loaderen forsvinne og bruker må få beskjed om at nytt innhold er dukket opp.

Hvordan er den universelt utformet?

Ved bruk av en loader/spinner for innholdsinnlasting, er det viktig å sette role="status" og aria-live="polite" på wrapperen til loaderen. Dette er for å indikere til brukeren at innhold lastes inn og oppdatere brukeren deretter. aria-busy settes for å indikere at element modifiseres og at man kanskje nødt til å vente før alle endringer er komplette og kan oppdateres til brukes. aria-busy er satt til true når innholdet lastes inn og false når den er ferdig innlastet. I tillegg, bruker vi aria-label='Loading for å gi en beskrivelse av hva som skjer dersom det ikke er noen tekst sendt inn til komponenten.

Loaderen er universelt utformet og er dermed tilgjengelig for alle brukere som den er.

<!-- React: PktLoader.tsx -->
<div
  role="status"
  aria-live="polite"
  aria-busy={isLoading}
  className={`pkt-loader--${inline ? 'inline' : 'box'}`}
>
  {isLoading ? (
    <div className={classes} data-testid="pkt-loader" ref={ref} {...props}>
      <PktIcon
        name={getVariant(variant)}
        aria-label="loading"
        path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
        className={`pkt-loader__svg pkt-loader__${variant}`}
      />
      {message && <p>{message}</p>}
    </div>
  ) : (
    children
  )}
</div>