nve-button
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-button.
<nve-button>NVE-knappen</nve-button>nve-button støtter nesten alle egenskaper fra en native HTML-knapp.
Det er likevel enkelte attributter som per i dag ikke støttes:
- command
- commandfor
- popovertarget
- popovertargetaction
Disse er foreløpig ikke implementert fordi de krever en referanse (ID) til et element som skal styres. Når vi bruker Shadow DOM, er det ikke mulig å referere direkte til elementer utenfor komponentens egen shadow root på en robust måte. Den interne knappen i nve-button kan derfor ikke på en trygg og enkel måte vite hvilken popover eller hvilket mål den skal styre.
For å få dette til måtte vi ha traversert hele DOM-treet for å finne riktig element basert på ID. Det virker lite effektivt, og vi har derfor valgt å ikke støtte disse attributtene inntil vi kan tilby en løsning som både er ytelseseffektiv og vedlikeholdbar.
Retningslinjer
Vi skal tydelig beskrive handlingene knappene utfører. En knapp kan bare ha en handling, ikke flere.
Vi skal holde oss til ett ikon per knapp.
Primærknappen skal alltid være venstrestilt, men når det er i trinnvis eller modal skal primærknapp ligge på høyre side.
Vi skal holde oss til én primærknapp per side. Hvis det er flere hovedhandlinger kan brukerne bli usikre på hva de skal gjøre.
Når bredden går over til mobil skal knappene alltid gå til full bredde. Dette er for å øke klikkflate.
Knappetekst skal alltid begynne med stor forbokstav, etterfulgt av små bokstaver..
Størrelsen small er tilgjengelig for bruk i tabeller eller interne løsninger. Den bør brukes sparsomt da klikkflaten kan være problematisk, spesielt på mobil.
Eksempler
Variant
Bruk variant for å styre farger. secondary er standard og trenger ikke spesifiseres.
<nve-button variant="primary">Primary</nve-button>
<nve-button>Secondary</nve-button>
<nve-button variant="tertiary">Tertiary</nve-button>
<nve-button variant="ghost">Ghost</nve-button>
<nve-button variant="danger">Danger</nve-button>Størrelse
Bruk size for å endre størrelse. medium er standard.
<nve-button size="large">Large</nve-button>
<nve-button>Medium</nve-button>
<nve-button size="small">Small</nve-button>Deaktivert
Bruk disabled for å deaktivere knappen.
Disabled bør brukes med måte, ettersom deaktiverte kontroller kan være vanskelige for noen brukere å forstå eller oppdage, særlig for dem som bruker hjelpemiddelteknologi. Når det er mulig, bør man vurdere å la knappen være aktiv og heller gi tydelig veiledning eller valideringsmeldinger som forklarer hva som må gjøres før handlingen kan fullføres.
<nve-button disabled>Deaktivert</nve-button>Start og end spor
Bruk start og end spor for å legge til ikoner.
<nve-button><nve-icon slot="start" name="house"></nve-icon>Varsel</nve-button>
<nve-button><nve-icon slot="end" name="warning"></nve-icon>Varsel</nve-button>Loading
Bruk loading for å legge til ei snurre. Knappen med loading kan ikke klikkes. Når knappen går inn i en lastetilstand, skjules slot-end-ikonet for å unngå visuell støy og at flere ikoner vises samtidig.
Knapp med loading kan ikke klikkes på.
<nve-button loading>Loading</nve-button>Kun ikon
Legg nve-icon i standardsporet for å få knapper med kun ikon. Man kan fortsatt bruke loading-attributtet for å vise kun en spinner.
Knapper med kun ikon trenger et tilgjengelig navn slik at skjermleserbrukere forstår hva knappen gjør. Les mer i aria-label seksjonen.
<nve-button size="large" variant="primary"><nve-icon name="house"></nve-icon></nve-button>
<nve-button><nve-icon name="house"></nve-icon></nve-button>
<nve-button size="small" variant="ghost"><nve-icon name="house"></nve-icon></nve-button>
<nve-button loading><nve-icon name="house"></nve-icon></nve-button>Knapp med bare ikon kan også gjøres runde ved å bruk circle.
<nve-button circle><nve-icon name="more_vert"></nve-button>Ikon farge
Du kan bruke css-variable for å styre farge på ikoner:
- --nve-icon-color CSS-egenskapen for vanlig farge,
- --nve-icon-color-hover for hover
- --nve-icon-color-pressed for klikk.
<nve-button style="--nve-icon-color: red; --nve-icon-color-hover: orange; --nve-icon-color-pressed:brown"
><nve-icon name="house"></nve-icon
></nve-button>
<nve-button style="--nve-icon-color: red"><nve-icon name="house"></nve-icon></nve-button>Lenkeknapp
Hvis href-attributtet er satt, rendres knappen som et a-element i stedet for button. Dette gjør at komponenten vil oppføre seg som en lenke, samtidig som den beholder det visuelle uttrykket til en knapp. Lenkeknapper kan også ta imot vanlige a-attributter som download, hreflang, referrerpolicy, rel og target.
Hvis du vil vise en deaktivert lenkeknapp, ikke bruk disabled. Det ikke fungere. Bruk tom href-attributtet i stedet.
<nve-button href="https://www.nve.no/" target="_blank">Gå til NVE</nve-button>Knapp i et skjema
Når knappen plasseres i et skjema, kan den brukes til å sende inn skjemaet ved å sette type til submit. Den støtter vanlige skjemaattributter som form, formAction, formEnctype, formMethod, formNoValidate, formTarget og name.
Ved å bruke form-attributtet trenger ikke knappen å være plassert inne i selve form-elementet for å kunne sende inn skjemaet.
Når nve-button brukes som en submit-knapp, opprettes en native knapp i light DOM for å trigge skjemainnsending korrekt. Dette er nødvendig fordi komponentens interne knapp ligger i Shadow DOM, noe som hindrer nettleserens innebygde skjemelogikk i å automatisk oppdage og koble den til skjemaet. Ved å opprette en usynlig native knapp i light DOM kan komponenten delta riktig i nettleserens innebygde mekanisme for skjemainnsending, slik at hendelser, validering og innsending fungerer som forventet. Light DOM knapp fjernes med en gang etter den har blitt klikket.
Tilgjengelighet
Alle ARIA-attributter beskrevet under kan brukes direkte på nve-button lowercased. Komponentet videresender dem til det underliggende native knappeelementet i Shadow DOM, slik at de tolkes korrekt av skjermlesere.
Kun ikon knapper
Når man bruker knapper med kun ikon, er det viktig å gi dem et tilgjengelig navn slik at skjermleserbrukere forstår hva knappen gjør. Dette gjøres vanligvis ved hjelp av aria-label eller title.
Å bruke både aria-label og title samtidig kan imidlertid gi en dårlig brukeropplevelse. Noen skjermlesere leser opp begge attributtene, noe som fører til dupliserte eller gjentakende opplesninger, som kan være irriterende og forvirrende for brukerne.
Samtidig er det ikke tilstrekkelig å kun bruke title. Noen skjermlesere leser ikke title-attributtet konsekvent, noe som kan føre til at knappen mangler et pålitelig tilgjengelig navn.
Det er også viktig å merke seg at aria-label ikke er synlig for seende brukere. I motsetning til title vises det ikke som en tooltip ved hover. Det betyr at hvis title utelates, vil det ikke finnes noen visuell indikasjon på hva knappen gjør, med mindre man tilbyr annen UI (for eksempel en tooltip).
I praksis bør aria-label brukes for å sikre tilgjengelighet for skjermlesere, mens synlige etiketter eller egne tooltips (som nve-tooltip) bør vurderes for å støtte seende brukere. Unngå å kombinere aria-label og title med mindre det finnes en tydelig og bevisst grunn til det.
Riktig bruk av aria-label:
<nve-button aria-label="Hjemmesiden"><nve-icon name="house"></nve-icon></nve-button>Toggle knapp
Ved a legge til aria-pressed-attributet gjør man knappen om til en toggle knapp. Les mer om aria-pressed her.
Knapper som styrer synligheten av innhold
For slike knapper, er aria-expanded det viktigste attributtet å inkludere. Det formidler gjeldende tilstand (utvidet eller kollapset) til hjelpemiddelteknologi, slik at skjermleserbrukere kan forstå om ekstra innhold er synlig. Dette er spesielt viktig for komponenter som akkordeoner, nedtrekksmenyer og utvidbare paneler/popovers.
Selv om aria-controls også kan brukes for å indikere hvilket element som styres, er det mindre kritisk i praksis. Støtten for aria-controls er inkonsekvent på tvers av skjermlesere, og mange utnytter det ikke på en meningsfull måte. I oppsett som bruker Shadow DOM, er det ikke pålitelig å referere til elementer med ID på tvers av grensen, siden ID-er ikke passerer gjennom shadow root. Dette betyr at selv om aria-controls er satt, kan det hende det ikke fungerer som forventet.
Av den grunn bør aria-expanded regnes som det primære og viktigste attributtet for å formidle tilstandsendringer. Det gir tydelig og pålitelig tilbakemelding til brukere av hjelpemiddelteknologi, selv når relasjoner som aria-controls ikke kan etableres fullt ut.
Arias som ikke støttes
På grunn av behovet for eksterne element-ID-er støttes heller ikke aria-labelledby og aria-describedby.
Spor
| Navn | Beskrivelse |
|---|---|
| start | - Innhold som vises før hovedinnholdet i knappen, for eksempel et ikon. |
| end | - Innhold som vises etter hovedinnholdet i knappen, for eksempel et ikon. |
Hendelser
| Navn | Arvet fra | Beskrivelse |
|---|---|---|
| click | Simulerer et klikk på native knapp-elementet. | |
| focus | Simulerer et fokus på native knapp-elementet. | |
| blur | Simulerer et blur på native knapp-elementet. |
Egenskaper
| Navn | Type | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| testId | string | undefined = undefined | |||
| circle | = false | Om knappen skal være rund. Fungerer kun når det ikke finnes noe tekst og bare et ikon vises | ||
| loading | = false | Setter knappen i lastemodus, slik at spinner vises | ||
| size | 'small' | 'medium' | 'large' = 'medium' | Størrelse på knappen | ||
| variant | 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger' = 'secondary' | Varianter av knappen | ||
| download | string | Filnavnet for nedlasting når `href` er tilstede. | ||
| href | string | URL-en som knappen skal navigere til når den klikkes. | ||
| hreflang | string | Språket for den lenkede ressursen. Støttes kun når `href` er tilstede. | ||
| referrerpolicy | string | Hvordan henviseren skal håndteres når lenken følges. Støttes kun når `href` er tilstede. | ||
| rel | string | rel-attributtet for lenken når `href` er tilstede. | ||
| target | '_blank' | '_parent' | '_self' | '_top' | Hvor lenken skal åpnes. Kun brukt når `href` er tilstede. | ||
| form | string | ID-en til skjemaet som knappen er tilknyttet. Støttes ikke av lenkeknapp. | ||
| formAction | string | URL-en som skjemaet skal sendes til når knappen klikkes. Støttes ikke av lenkeknapp. | ||
| formEnctype | 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | Hvordan skjemaet skal kodes når det sendes. Støttes ikke av lenkeknapp. | ||
| formMethod | 'get' | 'post' | 'dialog' | HTTP-metoden som skal brukes når skjemaet sendes. Støttes ikke av lenkeknapp. | ||
| formNoValidate | = false | Om skjemaet ikke skal valideres før sending. Støttes ikke av lenkeknapp. | ||
| formTarget | '_self' | '_blank' | '_parent' | '_top' | Hvor skjemaet skal åpnes når det sendes. Støttes ikke av lenkeknapp. | ||
| name | string | Navnet på knappen når den brukes i et skjema. Støttes ikke av lenkeknapp. | ||
| autofocus | = false | Om knappen skal være i fokus når siden lastes. | ||
| disabled | = false | Om knappen skal være deaktivert. Støttes ikke av lenkeknapp. | ||
| type | 'button' | 'submit' | 'reset' = 'button' | Knapp-typen. Støttes ikke av lenkeknapp. | ||
| value | string | Verdien til knappen. Brukes i skjemaer. Støttes ikke av lenkeknapp. | ||
| ariaControls | string | |||
| ariaExpanded | 'true' | 'false' | null = null | |||
| ariaHaspopup | 'true' | 'false' | null = null | |||
| ariaLabel | string | null = null | |||
| ariaPressed | 'true' | 'false' | 'mixed' | null = null |
Metoder
| Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
|---|---|---|---|---|
| click | Simulerer et klikk på knappen. | |||
| focus | options: FocusOptions | Setter fokus på knappen. | ||
| blur | Fjerner fokus fra knappen. |
Deler
| Navn | Beskrivelse |
|---|---|
| base | Topp-elementet, enten <button> eller <a>. |
| label | Hoved innholdet i knappen, vanligvis tekst. |
| spinner | Spinneren som vises når knappen er i loading-tilstand. |
| start | Innholdet i start-slottet, for eksempel et ikon. |
| end | Innholdet i end-slottet, for eksempel et ikon. |