Skip to content

Commit fa5f985

Browse files
FebakkeBarsnes
andauthored
docs: update textfield.mdx with more clear info on autocomplete and input type="number" (#4187)
Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
1 parent 6f675b0 commit fa5f985

1 file changed

Lines changed: 15 additions & 2 deletions

File tree

packages/react/src/components/textfield/textfield.mdx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,23 @@ Brukere som skal fylle ut et tekstområde, trenger ofte å kopiere og lime inn i
6969
For å sikre en god brukeropplevelse er det viktig å bruke en kombinasjon av riktig `input`-type og `autocomplete`-attributter. Les mer om [autocomplete på MDN Webdocs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete).
7070

7171
- Tillat variasjoner i hvordan data skrives inn, så lenge informasjonen er forståelig. For eksempel bør telefonnumre kunne inneholde mellomrom, personnumre punktum, og e-postadresser aksepteres selv om de har et mellomrom til slutt.
72-
- Velg inputtyper som samsvarer med informasjonen du ber om, for eksempel `tel`, `search` eller `email`. Dette gir mobilbrukere et tilpasset tastatur, men vær oppmerksom på at enkelte inputtyper kan aktivere klientsidevalidering.
73-
- `autocomplete` brukes i felter som mottar personlig informasjon. Hvis feltet skal be om personopplysninger om en annen person enn brukeren, må du sette `autocomplete="off"`.
7472
- Pass på at brukerne ser inndata som formateres automatisk, men uten at det forstyrrer dem mens de fyller ut.
7573

74+
#### Formål med inndata
75+
Autocomplete er påkrevd i felter der formålet finnes i den forhåndsdefinerte listen beskrevet i [1.3.5 formål med inndata (uutilsynet.no)](https://www.uutilsynet.no/wcag-standarden/135-identifiser-formal-med-inndata-niva-aa/142).
76+
Det hjelper nettlesere og hjelpemidler med å gjenkjenne og fylle ut personopplysninger automatisk.
77+
78+
- Bruk `autocomplete` bare når feltet samsvarer med den forhåndsdefinert listen som er gjengitt på UUtilsynets sider. (For eksempel `given name`, `email` eller `address-line1`)
79+
- Hvis feltet gjelder **en annen person en brukeren**, skal du sette `autocomplete="off"`. Dersom alle felt trenger `autocomplete="off"` kan du sette dette på et overordnet `form`-element. Alle `input`, `select` og `textarea` arver fra overordna `form`-element.
80+
81+
#### Input type
82+
- Velg inputtyper som samsvarer med informasjonen du ber om, for eksempel `tel`, `search` eller `email`. Dette gir mobilbrukere et tilpasset tastatur, men vær oppmerksom på at enkelte inputtyper kan aktivere klientsidevalidering.
83+
- Unngå `type="number"` med mindre du har brukerinnsikt som viser at det fungerer godt. Denne typen kan fjerne nuller, endre verdier ved scrolling, skape problemer for skjermlesere og runde lange tall. Bruk heller `type="text"` med `inputmode="numeric"` for bedre tilgjengelighet. [Hvorfor Gov.uk endret input type for nummer (Gov.uk)](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)
84+
85+
86+
87+
88+
7689
## Tekst
7790

7891
Det skal alltid være ledetekst på `Textfield`.

0 commit comments

Comments
 (0)