Hopp til innhold

ExpandButton

Med en ExpandButton kan vi presentere mye innhold på liten plass. Knappen kan brukes frittstående, og styre ekspandering av innhold som ikke er direkte under komponenten.

Noen ganger trenger vi å gi brukerne som ønsker det litt mer informasjon.

Denne komponenten skal ikke brukes i en liste under hverandre. Om du har flere seksjoner med innhold du vil at skal vises og skjules uavhengig av hverandre bruker du en Accordion.

Viktig informasjon bør alltid ligge synlig, ikke skjult bak en ExpandButton.

Knappen bør ha en tekst som beskriver hva som skjules. Om det er tydelig fra sammenhengen hva knappen er til, for eksempel ved ekspandering av en tabellrad, kan den skjules visuelt.

Varianter

Som hovedregel skal ekspanderingen av innhold skje i retning nedover. Et unntak er dersom du har innhold i en bunnmeny som skal ekspanderes oppover. I de tilfellene kan ExpandButton brukes med pila pekende i retningen innholdet kommer til å ekspandere, altså motsatt retning av det vanlige.

Tilgjengelighet

Det er viktig å hjelpe skjermlesere med å forstå at det er en knapp som kommer til å påvirke annet innhold. Inspisér gjerne HTMLen som genereres av eksempelet og se hvilke attributter som settes, og hvilken verdi de har i åpen og lukket tilstand.

På selve knappen ser du sannsynligvis:

  • id
  • aria-expanded="false" når lukket og aria-expanded="true" når åpen (styres av isExpanded-propen)
  • aria-controls med en ID som peker på innholdet som styres av knappen

På innholdet som styres av knappen ser du sannsynligvis:

  • id
  • aria-labelledby med en ID som peker tilbake på knappen
  • role="group"
  • hidden hvis innholdet er skjult

ExpandSection-komponenten håndterer alt dette, men den plasserer alltid innholdet som ekspanderes direkte under knappen. Om du trenger en annen layout må du bruke ExpandButton direkte, og sørge for å teste med skjermleser.

React API

Her finner du en oversikt over props på komponentene i pakken.