Tabs@navikt/ds-react

betaOppdatert 13. juni 2022

aksel.nav.no

Retningslinjer

Du bør bare bruke automatisk aktivering (selectionFollowsFocus) dersom innholdet i tabpanel allerede eksisterer i DOMen. Hvis ikke, kan brukeropplevelsen for tastaturnavigasjonsbrukere være ekstremt treg.

Bruk med navigasjon

Intensjonen med bruk av tabs er å alltid kunne ha en kobling mellom tab og tabpanel. Når man bruker tabs for sidenavigasjon blir ofte siden oppdatert og fokusmarkering blir tilbakestilt. Dette fører til at eks brukere av hjelpeteknologi mister konteksten av hva som endret seg ved tab-navigering.

Men som mange andre regler finnes det unntak. I tilfeller der url oppdateres uten side-oppdatering vil konteksten forbli slik den var og hjelpeteknologier fungerer som ønsket. Dette kan ofte løses ved bruk av shallow-routing, noe de fleste routing-teknologiene støtter. Under er et slikt eksempel med bruk av Nextjs.

<Tabs 
  value={selectedTab} 
  onChange{() => router.push(url, undefined, {shallow: true})}
>
  <Tabs.List>
    <Tabs.Tab value="tab-1" label="Tab 1" />
    <Tabs.Tab value="tab-2" label="Tab 2" />
  </Tabs.List>
  <Tabs.Panel value="tab-1">Panel 1</Tabs.Panel>
  <Tabs.Panel value="tab-2">Panel 2</Tabs.Panel>
</Tabs>

Bruke eget tabpanel

I noen tilfeller ønsker man ikke å bruke <Tabs.Panel/>. I de tilfellene er det viktig å bruke riktige roller og aria props. Her er en kode-snippet som løser akkurat det.

const [value, setValue] = useState("skap");
return (
  <>
    <Tabs value={value} onChange={setValue}>
      <Tabs.List>
        <Tabs.Tab
          value="skap"
          label="Skap"
          id="skap-tab"
          aria-controls="skap-panel"
        />
        <Tabs.Tab
          value="oppvaskmaskin"
          label="Oppvaskmaskin"
          id="oppvaskmaskin-tab"
          aria-controls="oppvaskmaskin-panel"
        />
        <Tabs.Tab
          value="fryser"
          label="Fryser"
          id="fryser-tab"
          aria-controls="fryser-panel"
        />
      </Tabs.List>
    </Tabs>
    <div
      role="tabpanel"
      hidden={value !== "skap"}
      aria-labelledby="skap-tab"
      id="skap-panel"
      tabIndex={0}
    >
      Innhold skap
    </div>
    <div
      role="tabpanel"
      hidden={value !== "oppvaskmaskin"}
      aria-labelledby="oppvaskmaskin-tab"
      id="oppvaskmaskin-panel"
      tabIndex={0}
    >
      Innhold oppvaskmaskin
    </div>
    <div
      role="tabpanel"
      hidden={value !== "fryser"}
      aria-labelledby="fryser-tab"
      id="fryser-panel"
      tabIndex={0}
    >
      Innhold fryser
    </div>
  </>
);

Props

Tabs

size
Type	`"medium" \| "small"`
Description	Changes padding and font-size
Default	`"medium"`

onChange
Type	`((value: string) => void)`
Description	onChange callback for selected Tab

value
Type	`string`
Description	Controlled selected value

defaultValue
Type	`string`
Description	If not controlled, a default-value needs to be set

selectionFollowsFocus
Type	`boolean`
Description	Automatically activates tab on focus/navigation
Default	`false`

className
Type	`string`

ref
Type	`Ref<HTMLDivElement>`

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

Tabs.List

Required
children
Type	`ReactNode`
Description	<Tabs.Tab /> elements

loop
Type	`boolean`
Description	Loops back to start when navigating past last item

className
Type	`string`

ref
Type	`Ref<HTMLDivElement>`

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

Tabs.Tab

Komponenten er implementert med OverridableComponent

label
Type	`ReactNode`
Description	Tab label

icon
Type	`ReactNode`
Description	Tab Icon

Required
value
Type	`string`
Description	Value for state-handling

iconPosition
Type	`"left" \| "top"`
Description	Icon position
Default	`"left"`

className
Type	`string`

ref
Type	`Ref<HTMLButtonElement>`

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

Tabs.Panel

Required
children
Type	`ReactNode`
Description	Tab panel content

Required
value
Type	`string`
Description	Value for state-handling

className
Type	`string`

ref
Type	`Ref<HTMLDivElement>`

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

Tabs@navikt/ds-react

Installasjon

Retningslinjer

Bruk med navigasjon

Bruke eget tabpanel

Props

Var denne artikkelen til hjelp?