ExpandButton

ReactSass

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.

const [isExpanded, setIsExpanded] = useState(false);

return (
    <ExpandSection
        forceCompact={false}
        title={isExpanded ? "Skjul seksjonen igjen" : "Vis den skjulte seksjonen"}
        onClick={(e, expanded) => {
            setIsExpanded(expanded);
        }}
    >
        <h3 className="jkl-heading-3 jkl-spacing-xl--bottom">Skjult seksjon</h3>
        <p className="jkl-portal-paragraph">
            Her kommer det masse informasjon som er relevant, men ikke så relevant at vi alltid vil vise
            det.
        </p>
        <p className="jkl-portal-paragraph">
            Vi kunne kanskje brukt en Accordion, men vi har ikke <em>flere</em> ting vi vil strukturere på
            denne måten. Det ser litt rart ut med ett AccordionItem, så da bruker vi heller en ExpandButton
        </p>
    </ExpandSection>
);

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.

Et eksempel på en footer med innhold som kan ekspanderes. Øverst ser vi lukket tilstand, med pil pekende oppover. Under ser vi åpen tilstand, med pilen pekende nedover. Klikk for å se større.

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.