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
.
<Tabsvalue={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.Tabvalue="skap"label="Skap"id="skap-tab"aria-controls="skap-panel"/><Tabs.Tabvalue="oppvaskmaskin"label="Oppvaskmaskin"id="oppvaskmaskin-tab"aria-controls="oppvaskmaskin-panel"/><Tabs.Tabvalue="fryser"label="Fryser"id="fryser-tab"aria-controls="fryser-panel"/></Tabs.List></Tabs><divrole="tabpanel"hidden={value !== "skap"}aria-labelledby="skap-tab"id="skap-panel"tabIndex={0}>Innhold skap</div><divrole="tabpanel"hidden={value !== "oppvaskmaskin"}aria-labelledby="oppvaskmaskin-tab"id="oppvaskmaskin-panel"tabIndex={0}>Innhold oppvaskmaskin</div><divrole="tabpanel"hidden={value !== "fryser"}aria-labelledby="fryser-tab"id="fryser-panel"tabIndex={0}>Innhold fryser</div></>);
Props
Tabs
Type |
|
---|---|
Description | Changes padding and font-size |
Default | "medium" |
Type |
|
---|---|
Description | onChange callback for selected Tab |
Type |
|
---|---|
Description | Controlled selected value |
Type |
|
---|---|
Description | If not controlled, a default-value needs to be set |
Type |
|
---|---|
Description | Automatically activates tab on focus/navigation |
Default | false |
Type |
|
---|
Type |
|
---|
* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!
Tabs.List
Type |
|
---|---|
Description | <Tabs.Tab /> elements |
Type |
|
---|---|
Description | Loops back to start when navigating past last item |
Type |
|
---|
Type |
|
---|
* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!
Tabs.Tab
- Komponenten er implementert med OverridableComponent
Type |
|
---|---|
Description | Tab label |
Type |
|
---|---|
Description | Tab Icon |
Type |
|
---|---|
Description | Value for state-handling |
Type |
|
---|---|
Description | Icon position |
Default | "left" |
Type |
|
---|
Type |
|
---|
* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!
Tabs.Panel
Type |
|
---|---|
Description | Tab panel content |
Type |
|
---|---|
Description | Value for state-handling |
Type |
|
---|
Type |
|
---|
* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!