nve-alert
Arvet fra LitElement
Feil / oppgaver / PR
Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-alert.
<nve-alert open label="Info" text="Dette er alert komponent. Den har ventet hele livet på å varsle deg!"></nve-alert>Bruk open for å vise en alert. Hvis ikke open er satt, vises den ikke.
Eksempler
Styr innhold
Du kan bruke spor for å vise innhold i alerten. Standard-spor er hovedteksten. Du kan også bruke egne spor for overskrift (label).
<nve-alert open>
<nve-label slot="label">Label</nve-label>
Bruk av slots i alerten.
</nve-alert>Som alternativ kan du bruke attributer iconName, label og text.
<nve-alert open label="Label" text="Bruk av attributer"></nve-alert>Variant
Bruk variant for å styre farger. primary er standard og trenger ikke spesifiseres.
<nve-alert open text="primary"></nve-alert>
<nve-alert variant="success" open text="success"></nve-alert>
<nve-alert variant="warning" open text="warning"></nve-alert>
<nve-alert variant="neutral" open text="neutral"></nve-alert>
<nve-alert variant="danger" open text="danger"></nve-alert>Ikon
Velger du variant, kommer det et bestemt ikon som standard. Du kan overstyre ikonet med iconName-egenskapen. Du kan skjule ikonet med showIcon="false".
<nve-alert open>Standard ikon på info variant</nve-alert>
<nve-alert open variant="danger">Standard ikon på fare variant</nve-alert>
<nve-alert variant="success" open iconName="house">Annet ikon</nve-alert>
<nve-alert variant="warning" open showIcon="false">Ingen ikon</nve-alert>Left stroke
Bruk leftStroke for å vise en fet strek på venstre side.
<nve-alert variant="danger" text="Left stroke" leftStroke open> </nve-alert>Høyere metning
Bruk saturation="emphasized" for å få litt mørkere bakgrunnsfarge.
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem">
<nve-alert variant="warning" text="Emphasized" saturation="emphasized" open> </nve-alert>
<nve-alert variant="warning" text="Ikke emphasized" open> </nve-alert>
<nve-alert variant="success" text="Emphasized" saturation="emphasized" open> </nve-alert>
<nve-alert variant="success" text="Ikke emphasized" open> </nve-alert>
<nve-alert variant="neutral" text="Emphasized" saturation="emphasized" open> </nve-alert>
<nve-alert variant="neutral" text="Ikke emphasized" open> </nve-alert>
<nve-alert variant="danger" text="Emphasized" saturation="emphasized" open> </nve-alert>
<nve-alert variant="danger" text="Ikke emphasized" open> </nve-alert>
<nve-alert text="Emphasized" saturation="emphasized" open> </nve-alert>
<nve-alert text="Ikke emphasized" open> </nve-alert>
</div>Closable
Bruk closable for å vise en lukke-knapp på høyre side, som skjuler komponenten.
Når du bruker closable vises det en knapp med kun ikon.
Siden det ikke finnes noe tekst på knappen, må vi informere skjermleser-brukere om hva knappen gjør. Derfor har knappen et aria-label-attributt. Dette styres via buttonLabel-egenskapen i alert-komponenten. Standardverdien er "Lukk", men det er viktig å oppdatere denne hvis du bruker et annet språk.
<nve-alert open closable class="alert-closeable"> Trykk på krysset for å lukke denne </nve-alert>
<script>
// Denne snutten vil vise alert igjen etter 2 sekunder, slik at du kan prøve å lukke den flere ganger
const alert = document.querySelector('.alert-closeable');
alert.addEventListener('sl-after-hide', async () => {
setTimeout(() => (alert.open = true), 2000);
});
</script>Duration
Du kan bruke duration for å lukke alerten automatisk. Verdien er gitt i millisekunder.
<nve-alert class="alert-duration" duration="2000"> Denne skal forsvinne etter 2 sekunder. </nve-alert>
<nve-button class="show-alert">Vis alerten</nve-button>
<script>
// Denne snutten vil åpne alerten når man klikker på knappen.
const button = document.querySelector('.show-alert');
const alert = document.querySelector('.alert-duration');
button.addEventListener('click', () => alert.show());
</script>Toast
Du kan selv bestemme hvordan du vil vise alerten i løsningen din. Når du legger til nve-alert i DOM-en, er den alltid der selv om open er satt til false. display: none gjør at skjermlesere ignorerer komponenten, så det er ingen fare ved å ha den i DOM-en hele tiden.
Ofte ønsker man å skjule slike komponenter i SPA-applikasjoner uansett. Vi tilbyr derfor også toast-funksjonalitet som gjør dette for deg. Du skal åpne alerten med toast() metoden som kalles på den.
Som standard vises toast øverst i høyre hjørne. For å vise en alert som toast, må du wrappe nve-alert i en div med klassen toast-stack. Denne blir injisert i DOM-en utenfor hovedinnholdet. Når alerten lukkes, forsvinner også toast-stack sammen med alle nve-alert-komponentene. Vi anbefaler ikke å vise mer enn én alert samtidig. Les mer i seksjonen om universell utforming. Den er ikke justbar. Per i dag støttes det kun en animasjon, men kan sikkert prate med designere hvis det er behov for flere typer animasjoner.
I dette eksemplet vises det to alert meldinger samtidig når man klikker på begge knappene. Husk at det ikke er best praksis å vise flere alert meldinger samtidig. Bruk det med omhu, og les mer om det i universel utforming seksjonen.
<div class="toast-container">
<nve-alert class="alert-toast" variant="warning" closable label="Toast" text="Obs! Dette er en toast."> </nve-alert>
<nve-alert class="alert-toast" variant="success" closable label="Toast" text="Gratulerer! Dette er en toast">
</nve-alert>
<nve-button class="show-alert-warning">Vis varsel toast</nve-button>
<nve-button class="show-alert-success" variant="neutral">Vis suksess toast</nve-button>
</div>
<script>
// Denne snutten vil åpne alert meldinger når man klikker på knapper.
const container = document.querySelector('.toast-container');
const buttonWarning = container.querySelector('.show-alert-warning');
const buttonSuccsess = container.querySelector('.show-alert-success');
const warningAlert = container.querySelector('nve-alert[variant="warning"]');
const successAlert = container.querySelector('nve-alert[variant="success"]');
buttonWarning.addEventListener('click', () => warningAlert.toast());
buttonSuccsess.addEventListener('click', () => successAlert.toast());
</script>Universell utforming
nve-alert bruker alert live-region-rolle. Hovedoppgaven til alert-komponenten er å gi brukeren en umiddelbar og viktig beskjed. alert bruker derfor aria-live="assertive", som betyr at når alerten vises i DOM-en (for eksempel med display:block), vil skjermlesere umiddelbart stoppe det de leser og fokusere på innholdet i alerten. Den har også aria-atomic="true", som gjør at hvis innholdet i alerten endres mens den vises, vil skjermleseren lese opp hele innholdet på nytt. Vi har ikke endret noen av disse egenskapene, så de fungerer som standard for alert-rollen.
En av grunnene til at alerten leses opp umiddelbart, kan være at den ofte vises i et begrenset tidsrom. Alerts forsvinner gjerne etter en viss tid. Hvis du tror brukeren ikke rekker å lese meldingen på den tiden, kan du fjerne duration-verdien fra komponenten (hvis den brukes) og la brukeren lukke alerten selv. På grunn av aria-live="assertive", anbefales det å ikke vise mange tidsstyrte alerts, eller generelt mange alerts samtidig. Det anbefales også å ikke vise alerts for ofte. Bruk denne komponenten med omhu, kun for de viktigste meldingene/tilbakemeldingene.
Alerten tar ikke fokus fra tastaturet når den vises. Hvis du vil at bruker skal kunne lukke closable alert med en gang den dukkes opp, og uten å tabbe gjenneom hele dokumentet, du kan gjerne sette fokus på knappen når alerten vises. Husk da å returnere fokus til det elementet som hadde fokus før du satte det på knappen i alerten.
På grunn av sin rolle anbefales det ikke å bruke nve-alert til å vise statiske meldinger. Til det kan man gjerne bruke nve-message-card komponent.
Siden alerten vises med en animasjon, er det viktig at vi respekterer innstillingen for redusert bevegelse (prefers-reduced-motion). Dette er allerede implementert i animation.ts-filen.
WCAG anbefaler å følge disse to reglene når alerten er implementert:
Ingen av disse kriteriene er påkrevd av UUtilsynet, så vi trenger ikke å følge dem strengt.
Alerten ble testet med NVDA skjerm-leser, og den fungerer som forventet.
Spor
| Navn | Beskrivelse |
|---|---|
| (standard) | tekst - Hoved teksten i alerten. |
| icon | Det første ikonet (til venstre). |
| label | Overskriften for alerten. |
Hendelser
| Navn | Arvet fra | Beskrivelse |
|---|---|---|
| sl-show | Når alerten blir vist | |
| sl-hide | Når alerten blir skjult | |
| sl-after-show | Etter allerten er vist | |
| sl-after-hide | Etter allerten er skjult |
Egenskaper
| Navn | Type | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| testId | string | undefined = undefined | |||
| label | string | undefined | Overskriften | ||
| text | string | undefined | Hoved tekst | ||
| saturation | 'emphasized' | undefined | Bestemmer sterkere bakgrunnsfarge | ||
| leftStroke | boolean = false | Ramme linje til venstre | ||
| variant | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary' | Bestemmer hvilken variant av alerten som skal brukes. | ||
| closable | boolean = false | Om lukk knapp skal vises | ||
| open | boolean = false | Om alerten er åpen. Hvis sant alerten vises, ellers er den skjult. | ||
| duration | = Infinity | Hvor lenge alerten skal være åpen før den lukkes automatisk, i millisekunder. Altid er standard | ||
| buttonLabel | string | undefined = 'Lukk' | Aria label på knapp med kun ikone. Lukk er standard. | ||
| iconName | string | undefined | Navnet på ikonet som skal vises til venstre siden av alerten. | ||
| showIcon | 'true' | 'false' = 'true' | Om variant ikonen skal vises |
Metoder
| Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
|---|---|---|---|---|
| show | Viser alerten med animasjon. Setter `open` til true, kjører visningsanimasjonen, og starter eventuell auto-hide timer. Sender ut eventen `sl-after-show` når animasjonen er ferdig. | |||
| hide | Skjuler alerten med animasjon. Kjører skjuleanimasjonen før `open` settes til false. Sender ut eventen `sl-after-hide` når animasjonen og oppdateringen er ferdig. Stopper eventuell auto-hide timer. | |||
| toast | Viser alerten som en toast-melding. Legger alerten i toast-stacken, venter til den er rendret, og viser den med animasjon. Fjerner alerten fra toast-stacken når den skjules, og fjerner stacken hvis det ikke er flere alerts igjen. |
Deler
| Navn | Beskrivelse |
|---|---|
| base | Topp-element |
| icon | Ikonet til venstre |
| label | Overskriften |
| message | Hoved tekst |