Message
Message formidler status eller resultatet av en handling — informasjon, suksess, advarsel eller feil — uten å avbryte flyten. Komponenten brukes inline, tett på innholdet den forklarer, og kan strekkes til full bredde av forelderen.
For at meldinger skal annonseres pålitelig for skjermlesere må <Message> ligge inni en <MessageRegion>. Regionen eier de stabile ARIA-live-regionene som annonseringen skriver til. En <Message> uten region rendres visuelt, men annonseres ikke (og logger en advarsel i utviklingsmodus).
Egnet til
- Vise informasjon som gir kontekst eller forklaring
- Bekrefte at noe har gått bra
- Gjøre brukeren oppmerksom på noe viktig
- Vise advarsler eller feil som ikke stopper flyten
- Forklare konsekvenser eller neste steg
Uegnet til
- Kritiske feil som stopper videre fremdrift
- Midlertidige bekreftelser — bruk toast
- Situasjoner som krever aktiv bekreftelse — bruk modal
- Globale systembeskjeder — bruk SystemMessage
- Lange eller komplekse forklaringer som krever egen side
Kom i gang
Kode
<MessageRegion> <Message status="info">Vi har mottatt søknaden din og behandler den nå</Message> </MessageRegion>
Eksempler
Varianter
Velg status ut fra budskapet: info for nøytral informasjon, success for bekreftelse, warning for noe brukeren bør være oppmerksom på, og danger for noe som har gått galt og bør følges opp. Hver status har et fast statusikon som rendres automatisk. Fargene kobles via data-status, som setter --ix-color-status-*-variablene — meldingsflaten bruker surface-fargen for sin status.
Kode
<MessageRegion> <VStack gap="md"> <Message status="info">Vi behandler søknaden din</Message> <Message status="success">Endringene dine er lagret</Message> <Message status="warning">Det er kort tid til fristen for å svare</Message> <Message status="danger">Vi klarte ikke å gjennomføre betalingen</Message> </VStack> </MessageRegion>
Med tittel
Budskapet (children) er alltid med og bærer innholdet. Trenger meldingen en overskrift, kan du legge til en valgfri title over budskapet — den løfter fram hovedpoenget når meldingen er lengre. En kort melding klarer seg ofte uten tittel.
Kode
<MessageRegion> <Message status="info" title="Behandling pågår"> Vi har mottatt søknaden din og behandler den nå </Message> </MessageRegion>
Med lenke
En lenke kan peke videre til mer informasjon. Lenken er ikke en egen prop — den skrives som en del av innholdet med den vanlige Indeks-lenken LinkText (React) / .ix-link-text (HTML). Det er ingenting message-spesifikt ved lenken. Lenketeksten skal beskrive målet og være meningsfull lest alene.
Kode
<MessageRegion> <Message status="info" title="Behandling pågår"> <p>Vi har mottatt søknaden din og behandler den nå</p> <LinkText href="#">Les mer om saksbehandling</LinkText> </Message> </MessageRegion>
Med lukkeknapp
En valgfri lukkeknapp lar brukeren skjule meldingen. I React skjuler komponenten seg selv når brukeren klikker på krysset; onClose kalles i tillegg hvis du trenger å rydde opp egen tilstand. I ren HTML må du fjerne eller skjule elementet selv. Lukkeknappen må ha et tilgjengelig navn (closeLabel / aria-label).
Kode
<MessageRegion> <Message status="success" title="Endringene er lagret" closeLabel="Lukk melding" > Du kan trygt lukke denne meldingen </Message> </MessageRegion>
Full bredde
Sett fullWidth (React) / data-full-width (HTML) for at meldingen skal strekke seg til full bredde av forelderen. I en vertikal VStack / ix-stack (align-items: flex-start) krymper en melding ellers til innholdsbredden; fullWidth overstyrer det så den fyller bredden. Avrundede hjørner beholdes. Full bredde kombineres ofte med en lukkeknapp.
Kode
<MessageRegion> <VStack gap="md"> <Message status="info">Krymper til innholdsbredden</Message> <Message status="info" fullWidth closeLabel="Lukk melding"> Vi oppdaterer nettbanken i natt mellom 02 og 04 </Message> </VStack> </MessageRegion>
Retningslinjer
Velg riktig variant basert på budskap
Statusen skal reflektere alvorlighetsgrad og forventet reaksjon. info gir nøytral kontekst, success bekrefter en vellykket handling, warning gjør brukeren oppmerksom på noe, og danger signaliserer at noe har gått galt og bør følges opp.
Bruk full bredde når meldingen skal fylle bredden
Full bredde passer når meldingen ligger i en kolonne-layout (f.eks. en vertikal VStack/ix-stack) og skal fylle bredden i stedet for å krympe til innholdsbredden — typisk en melding som gjelder hele seksjonen den står i. La meldingen krympe til innholdsbredden når den hører til et smalt, avgrenset innhold.
Plasser meldingen i riktig kontekst
Message skal stå nær innholdet den forklarer eller støtter. En melding i full bredde hører naturlig hjemme der budskapet gjelder hele seksjonen eller kolonnen den ligger i.
Hold tekst og innhold kort og tydelig
Bruk korte, forklarende titler og konsis brødtekst. Unngå teknisk språk.
Ikke avslutt tittel eller enkeltsetning med punktum
Titler avsluttes aldri med punktum. Når selve meldingen er én enkelt setning, sløyfer du også punktumet — det leses som en kort beskjed, ikke en tekstblokk. Først når brødteksten består av flere setninger setter du punktum som normalt.
Unngå overbruk
For mange Message-komponenter på samme side kan oppleves som støy. Bruk dem bevisst.
Bruk ikon med omtanke
Ikonet støtter forståelsen av budskapet, men skal aldri være eneste informasjonsbærer. Teksten er alltid viktigst, og containeren skal verken være klikkbar eller ha hover-state.
Universell utforming
Hva du selv må sørge for
- Pakk meldinger i en
<MessageRegion>— regionen eier de stabile ARIA-live-regionene som annonseringen skriver til. Uten den annonseres ikke meldingen. Se MessageRegion. - Skriv alltid beskrivende tekst — Message skal alltid ha et budskap (children) som bærer innholdet (tittel er en valgfri overskrift), og teksten må stå alene uten å være avhengig av ikon eller farge.
- Gi lukkeknappen et tilgjengelig navn — send inn
closeLabel(React) elleraria-label(HTML), f.eks. «Lukk melding». Konsumenten er ansvarlig for riktig språk; det finnes ingen hardkodet fallback. - Skriv meningsfull lenketekst — lenketeksten skal beskrive målet og gi mening lest alene, ikke «klikk her».
- Sett
announceOnPageLoadfor meldinger som er til stede ved sidelast — meldinger som settes inn dynamisk (etter en handling) annonseres automatisk, men en melding som allerede er der ved sidelast er stille som standard. SettannounceOnPageLoadfor f.eks. server-rendret success/feil etter en redirect. - Sett opp egen live-region ved ren HTML-bruk —
MessageRegion-automatikken finnes kun i React. I ren HTML må du selv ha en stabil, tomrole="status"-region (aria-live="polite",aria-atomic="false") i DOM og legge meldingsteksten til som en egen node når meldingen settes inn.
Hva komponenten gjør automatisk
- Annonsering via
<MessageRegion>— det synlige Message-elementet har bevisst ingenrole/aria-live. I stedet legger komponenten meldingsteksten til som en egen node i en stabil, skjultpolitelive-region i<MessageRegion>. Stabile regioner er det som gjør annonsering pålitelig — en region som settes inn samtidig med innholdet annonseres ofte ikke. Hver melding blir en egen node (aria-atomic="false"), slik at flere meldinger som dukker opp tett etter hverandre alle leses opp fortløpende i tur, uten å avbryte hverandre. - Stille ved sidelast — meldinger som finnes ved første sidelast leses ikke opp automatisk (så en side full av meldinger ikke leser seg selv opp). Bruk
announceOnPageLoadfor å overstyre. Meldinger som settes inn senere annonseres automatisk. - Statusikon rendres som en dekorativ
<ix-icon data-badge name="…" aria-hidden="true">— en sirkel i status-fill(følgerdata-status) med en lys glyf oppå (info,hakeellerutropstegnper status).aria-hidden="true"holder den ute av tilgjengelighetstreet; varianten formidles av teksten. - Fokusindikator — meldingen får ingen ring rundt seg selv; kun lukkeknappen har sin egen
:focus-visible-ring. Lenker bruker:focus-visible.
Tastaturnavigasjon
| Tast | Handling |
|---|---|
| Tab | Flytter fokus til lenke og/eller lukkeknapp |
| Shift+Tab | Flytter fokus til forrige fokuserbare element |
| Enter | Aktiverer fokusert element — følger lenke eller lukker meldingen |
| Space | Aktiverer lukkeknappen når den har fokus |
Skjermleser
- Dynamisk innsetting: teksten legges til som en egen node i MessageRegion sin stabile polite-region (role="status") og annonseres høflig når skjermleseren er ledig
- Flere meldinger samtidig: hver melding blir en egen node og leses fortløpende i tur (aria-atomic="false"), uten at den siste overskriver eller avbryter de andre
- Til stede ved sidelast: stille som standard — annonseres kun hvis announceOnPageLoad er satt
- Lukkeknapp ved fokus: "[closeLabel], knapp"
WCAG-kriterier
Sist gjennomgått: 2026-06-24 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier9 ditt ansvar · 15 håndtert · 38 ikke relevant · 0 ikke på plass
Ditt ansvar (9)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 4.1.3 Statusmeldinger | AA | Pakk Message i en MessageRegion. For at meldinger skal annonseres pålitelig for skjermlesere må <Message> ligge inni en <MessageRegion>. Regionen eier de stabile, alltid-tilstedeværende ARIA-live-regionene som annonseringen skriver til. Det synlige Message-elementet har bevisst ingen role/aria-live, fordi en live-region som settes inn samtidig med innholdet annonseres upålitelig. En Message uten region rendres visuelt, men annonseres ikke (og logger en advarsel i utviklingsmodus). |
| 1.4.1 Bruk av farge | A | Beskrivende tekst er påkrevd og må stå alene. Message skal alltid ha et budskap (children) som bærer innholdet (tittel er en valgfri overskrift). Teksten må formidle budskapet uten å være avhengig av ikon eller farge. For varianten danger/warning bør teksten også forklare konsekvensen eller hva brukeren bør gjøre videre. |
| 1.1.1 Ikke-tekstlig innhold | A | Beskrivende tekst er påkrevd og må stå alene. Message skal alltid ha et budskap (children) som bærer innholdet (tittel er en valgfri overskrift). Teksten må formidle budskapet uten å være avhengig av ikon eller farge. For varianten danger/warning bør teksten også forklare konsekvensen eller hva brukeren bør gjøre videre. |
| 4.1.3 Statusmeldinger | AA | Sett announceOnPageLoad for meldinger til stede ved sidelast. Meldinger som settes inn dynamisk (etter en handling) annonseres automatisk via MessageRegion. En melding som allerede er til stede ved første sidelast er stille som standard, slik at en side full av meldinger ikke leser seg selv opp. Sett announceOnPageLoad=true for meldinger som er til stede ved sidelast og likevel skal leses opp — typisk server-rendret success/feil etter en redirect tilbake fra en tredjepart. |
| 4.1.2 Navn, rolle, verdi | A | Gi lukkeknappen et tilgjengelig navn via closeLabel. Lukkeknappen har kun et dekorativt ikon. Send inn closeLabel (React) eller aria-label (HTML), f.eks. «Lukk melding». Uten dette hører skjermleserbrukeren bare «knapp». Konsumenten er ansvarlig for riktig språk (bokmål «Lukk melding», nynorsk «Steng melding», engelsk «Close message») — komponenten har ingen hardkodet fallback. |
| 2.4.6 Overskrifter og ledetekster | AA | Gi lukkeknappen et tilgjengelig navn via closeLabel. Lukkeknappen har kun et dekorativt ikon. Send inn closeLabel (React) eller aria-label (HTML), f.eks. «Lukk melding». Uten dette hører skjermleserbrukeren bare «knapp». Konsumenten er ansvarlig for riktig språk (bokmål «Lukk melding», nynorsk «Steng melding», engelsk «Close message») — komponenten har ingen hardkodet fallback. |
| 2.4.4 Formål med lenke (i kontekst) | A | Skriv meningsfull lenketekst. Lenke er ikke en egen prop — den skrives som en del av innholdet med den vanlige Indeks-lenken LinkText (React) eller .ix-link-text (HTML). Lenketeksten skal beskrive målet, ikke være «klikk her» eller «les mer» uten kontekst, og gi mening lest isolert av en skjermleser. Lenketeksten er aldri hardkodet — konsumenten sender den inn på riktig språk. |
| 2.4.9 2.4.9 | ? | Skriv meningsfull lenketekst. Lenke er ikke en egen prop — den skrives som en del av innholdet med den vanlige Indeks-lenken LinkText (React) eller .ix-link-text (HTML). Lenketeksten skal beskrive målet, ikke være «klikk her» eller «les mer» uten kontekst, og gi mening lest isolert av en skjermleser. Lenketeksten er aldri hardkodet — konsumenten sender den inn på riktig språk. |
| 4.1.3 Statusmeldinger | AA | Sett opp en stabil live-region selv ved ren HTML-bruk. MessageRegion-automatikken finnes kun i React. Bruker du ren HTML må du selv legge én stabil, tom live-region i DOM ved sidelast — role="status" aria-live="polite" aria-atomic="false" — og legge meldingsteksten til som en egen node når meldingen settes inn. Regionen må eksistere før teksten settes inn for at skjermlesere skal fange opp endringen, og aria-atomic="false" gjør at flere meldinger leses fortløpende i tur i stedet for at den siste overskriver de andre. |
Håndtert av komponenten (15)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Semantisk struktur: tittel i <strong>, brødtekst i <p>. |
| 1.3.2 Meningsfull rekkefølge | A | Innhold følger naturlig leserekkefølge i DOM: ikon, tittel, tekst, evt. lenke, og lukkeknapp til slutt. |
| 1.4.1 Bruk av farge | A | Variant kommuniseres med ikon + tekst i tillegg til farge — farge er aldri eneste signal. |
| 1.4.3 Kontrast (minimum) | AA | Tekst bruker --ix-color-foreground-main-default på status-surface, som oppfyller kontrastkravet for alle statuser i både light og dark mode. |
| 1.4.4 Endre tekststørrelse | AA | Relative enheter (font-size-tokens) — skalerer korrekt ved 200 % zoom. |
| 1.4.10 Omflyt | AA | Mobile-first uten faste bredder — reflower korrekt ned til 320px viewport uten horisontal scroll. |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Fokusindikator oppfyller 3:1 kontrastkrav via --ix-outline-default. Kun lukkeknappen har sin egen ring (:focus-visible) — meldingen ringes ikke rundt seg selv. |
| 2.1.1 Tastatur | A | Lukkeknapp er native <button> og aktiveres med Enter/Space. Fullt opererbart med tastatur. |
| 2.1.2 Ingen tastaturfelle | A | Ingen tastaturfeller — fokus navigeres fritt ut med Tab/Shift+Tab. |
| 2.4.3 Fokusrekkefølge | A | Følger naturlig tab-rekkefølge i DOM. |
| 2.4.7 Synlig fokus | AA | Tydelig fokusindikator: kun lukkeknappen har sin egen ring (:focus-visible) — meldingen ringes ikke rundt seg selv. Lenker bruker :focus-visible. |
| 2.5.8 Målstørrelse (minimum) | AA | Lukkeknappen har min. 44×44 px touch-mål. |
| 3.2.1 Ved fokus | A | Ingen kontekstendring ved fokus. Containeren er ikke klikkbar og har ingen hover-state. |
| 4.1.2 Navn, rolle, verdi | A | Native <button> for lukk (rolle button, navn fra aria-label). |
| 4.1.3 Statusmeldinger | AA | Annonsering skjer via én stabil, alltid-tilstedeværende polite live-region i <MessageRegion>. Det synlige elementet har ingen role/aria-live; hver melding legges til som en egen node (aria-atomic="false") etter at regionen er montert, slik at dynamisk innsatte meldinger annonseres pålitelig og flere meldinger leses fortløpende i tur uten å avbryte hverandre. Meldinger til stede ved sidelast er stille med mindre announceOnPageLoad er satt. |
Ikke relevant (38)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Statusikonet er en dekorativ <ix-icon data-badge> (sirkel + glyf via mask-image). Den er rent dekorativ og merkes aria-hidden="true", så den eksponeres ikke for skjermlesere; varianten formidles av tekst. Derfor er ingen alt-tekst nødvendig. |
| 1.2.1 Bare lyd og bare video (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.2 Teksting (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.4 Teksting (direkte) | AA | Ingen medieelementer. |
| 1.2.5 Synstolking (forhåndsinnspilt) | AA | Ingen medieelementer. |
| 1.3.3 Sensoriske egenskaper | A | Formidler ikke instruksjoner basert på sensoriske egenskaper. |
| 1.3.4 Visningsretning | AA | Ingen fast orientering — tilpasser seg visningsretning. |
| 1.3.5 Identifiser formål med inndata | AA | Ikke et skjemafelt som ber om personlig informasjon. |
| 1.4.2 Styring av lyd | A | Ingen lydelementer. |
| 1.4.5 Bilder av tekst | AA | Ingen bilder av tekst. |
| 1.4.12 Tekstavstand | AA | |
| 1.4.13 Innhold ved hover eller fokus | AA | |
| 2.1.4 Tastatursnarveier | A | Ingen egendefinerte tastatursnarveier. |
| 2.2.1 Justerbar hastighet | A | Ingen tidsbegrensede funksjoner. |
| 2.2.2 Pause, stopp, skjul | A | Ingen animasjon eller automatisk oppdatering. |
| 2.3.1 Terskelverdi på tre glimt | A | Ingen blinkende eller glimtende innhold. |
| 2.4.1 Hoppe over blokker | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.2 Sidetitler | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.5 Flere måter | AA | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.11 Fokus ikke skjult (minimum) | AA | Native <button> dekkes ikke av andre elementer ved fokus. |
| 2.5.1 Pekerbevegelser | A | Ingen gestbaserte interaksjoner — enkelt klikk/tap. |
| 2.5.2 Avbryt peker | A | Native elementer — nettleseren håndterer pekerinteraksjon (pointer-cancel). |
| 2.5.4 Bevegelsesaktivering | A | Ingen bevegelsesbasert interaksjon. |
| 2.5.6 Samtidige inndatamekanismer | A | |
| 2.5.7 Drabevegelser | A | Ingen drag-and-drop. |
| 3.1.1 Språk på siden | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 3.1.2 Språk på deler av innhold | AA | Komponenten setter ikke lang-attributt — innhold er på sidespråket. |
| 3.2.2 Ved inndata | A | Ingen automatisk kontekstendring ved fokus eller input. |
| 3.2.3 Konsistent navigasjon | AA | Sidekrav — gjelder ikke enkeltkomponenter. |
| 3.2.4 Konsistent identifikasjon | AA | Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter. |
| 3.2.6 Konsistent hjelp | A | Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider. |
| 3.3.1 Identifikasjon av feil | A | |
| 3.3.2 Ledetekster eller instruksjoner | A | |
| 3.3.3 Forslag ved feil | AA | |
| 3.3.4 Forhindring av feil (juridisk, økonomisk, data) | AA | Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter. |
| 3.3.7 Redundant oppføring | A | Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess. |
| 3.3.8 Tilgjengelig autentisering (minimum) | AA | Ikke en autentiseringskomponent. |
Props / API
| Prop | Type | Standard | Beskrivelse |
|---|---|---|---|
status | 'info' | 'success' | 'warning' | 'danger' | Status; styrer farge og ikon. Settes som data-status slik at fargevariablene kobles automatisk. Påkrevd | |
title | string | Valgfri overskrift over budskapet | |
children | ReactNode | Budskapet — påkrevd. Rendres rått — skriv selv <p> og evt. en lenke med LinkText. Påkrevd | |
closeLabel | string | aria-label på lukkeknappen. Lukkeknappen vises kun når denne er satt | |
onClose | () => void | Kalles etter at meldingen er skjult ved klikk på lukkeknappen. Komponenten skjuler seg selv; onClose er kun for ev. opprydding | |
fullWidth | boolean | false | Strekk meldingen til full bredde av forelderen (i stedet for å krympe til innholdsbredden i en vertikal stack). Settes som data-full-width |
announceOnPageLoad | boolean | false | Annonser meldingen selv om den er til stede ved første sidelast. Krever en omsluttende <MessageRegion> |
announceText | string | Overstyr teksten som leses opp. Standard er den synlige teksten (tittel + brødtekst). Bruk for å lese opp noe kortere ved rikt innhold | |
className | string | Ekstra CSS-klasser på rot-elementet |
MessageRegion
MessageRegion er en obligatorisk wrapper rundt React-meldinger. Den rendrer ingenting synlig selv — den legger én stabil, skjult ARIA-live-region (polite) i DOM som meldingene annonseres gjennom. Uten en omsluttende MessageRegion rendres <Message> visuelt, men annonseres ikke for skjermlesere (og logger en advarsel i utviklingsmodus).
Stabile, alltid-tilstedeværende regioner er det som gjør annonseringen pålitelig: en live-region som settes inn i DOM samtidig med innholdet rekker ofte ikke å bli registrert før teksten er der, og annonseres da ikke. MessageRegion har derfor regionen klar fra start og legger kun teksten til ved behov. Hver melding legges til som en egen node, slik at flere meldinger leses opp fortløpende i tur i stedet for at den siste overskriver de andre.
polite og ikke assertive?Det er bevisst valgt at alle meldinger leses opp fortløpende (køet i én polite-region) fremfor at en melding avbryter en annen. Message brukes typisk som tilbakemelding på skjema eller andre brukerhandlinger, og som regel er det bare én melding av gangen — men når flere dukker opp samtidig prioriterer vi at alt blir lest fremfor at noe hoppes over. Det betyr at status (info/success/warning/danger) kun styrer farge og ikon, ikke annonseringsprioritet; selv en danger-melding leses høflig i kø, ikke avbrytende.
Du kan ha én felles MessageRegion rundt et helt skjema eller en hel side, eller én rundt hver melding — begge fungerer. Det enkleste er å plassere én region høyt i treet og la alle meldinger ligge inni den.
Kode
<MessageRegion> <Message status="success" title="Endringene er lagret"> Innstillingene dine er oppdatert </Message> </MessageRegion>
Annonsering ved sidelast
Meldinger som settes inn dynamisk (etter at siden er ferdig lastet — f.eks. som svar på en handling) annonseres automatisk. Meldinger som allerede er til stede ved første sidelast er stille som standard, slik at en side full av meldinger ikke leser seg selv opp ved innlasting.
Når en melding er server-rendret eller til stede ved sidelast og likevel skal leses opp — typisk en success- eller feilmelding etter en redirect tilbake fra en tredjepart — setter du announceOnPageLoad på selve <Message>:
<MessageRegion>
<Message status="success" announceOnPageLoad>
Betalingen er gjennomført
</Message>
</MessageRegion>
MessageRegion Props / API
| Prop | Type | Standard | Beskrivelse |
|---|---|---|---|
children | ReactNode | Innholdet regionen omslutter, typisk én eller flere <Message>. Regionen rendrer i tillegg én skjult live-region |
Tilpasning med CSS
Trenger du ix-message-stylingen på HTML du setter sammen selv — uten React-komponenten — kan du bruke klassene direkte på elementene dine. Det finnes ingen web component for Message; rotklassen .ix-message brukes på en <div>.
Tilgjengelige klasser og attributter
| Element/tilstand | Selektor / attributt |
|---|---|
| Rot (melding) | .ix-message |
| Status | data-status="info" / "success" / "warning" / "danger" (kobler --ix-color-status-* automatisk) |
| Statusikon | <ix-icon data-badge name="…" aria-hidden="true"> (første barn — sirkel følger data-status, glyf via name) |
| Tekstblokk | .ix-message__body |
| Tittel | .ix-message__title |
| Lenke | .ix-link-text (vanlig Indeks-lenke — ingen message-spesifikk klasse) |
| Lukkeknapp | .ix-message__close |
| Full bredde | data-full-width (strekker meldingen til full bredde av forelderen) |
Statusikonet skrives som <ix-icon data-badge name="…" aria-hidden="true"> som første barn av .ix-message. data-badge gir sirkelen, som følger status-fill via data-status på meldingen; glyfen settes med name (info, hake eller utropstegn).
Annonsering for skjermlesere uten React
React-komponenten annonserer via en <MessageRegion> (en stabil, skjult live-region). I ren HTML finnes ikke denne automatikken — du må sette opp regionen selv. Den pålitelige oppskriften:
- Legg en stabil, tom live-region i DOM ved sidelast (den må eksistere før du skriver tekst inn i den):
<div class="ix-sr-only" role="status" aria-live="polite" aria-atomic="false"></div>
- Når du setter inn en melding dynamisk, legg den opplest teksten til som en egen node i regionen (i stedet for å erstatte innholdet). Med
aria-atomic="false"leses kun den nye noden, slik at flere meldinger som dukker opp tett etter hverandre alle leses opp fortløpende i tur. Fjern gjerne noden igjen etter et lite øyeblikk; det avbryter ikke opplesningen og hindrer at gammel tekst leses på nytt ved navigasjon.
Den enkle varianten — å sette role/aria-live rett på .ix-message-elementet (som i eksempelet under) — fungerer rimelig for role="alert" ved dynamisk innsetting, men er upålitelig for aria-live="polite" og annonserer ingenting for meldinger som er til stede ved sidelast.
Eksempel: ren HTML
<div class="ix-message" data-status="info" aria-live="polite">
<ix-icon data-badge name="info" aria-hidden="true"></ix-icon>
<div class="ix-message__body">
<strong class="ix-message__title">Behandling pågår</strong>
<p>Vi har mottatt søknaden din og behandler den nå</p>
<a class="ix-link-text" href="/saksbehandling">Les mer om saksbehandling</a>
</div>
<button class="ix-message__close" type="button" aria-label="Lukk melding"></button>
</div>
<div class="ix-message" data-status="info" data-full-width aria-live="polite">
<ix-icon data-badge name="info" aria-hidden="true"></ix-icon>
<div class="ix-message__body">
<p>Vi oppdaterer nettbanken i natt mellom 02 og 04</p>
</div>
<button class="ix-message__close" type="button" aria-label="Lukk melding"></button>
</div>