search

detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

Checkbox med readonly attribute #89

Closed 4nd3r5 closed 4 years ago

4nd3r5 commented 4 years ago

Bekskriv fejlen (Describe the bug) input type="checbox" med readonly attribute, overholdes ikke hvis der bruges en label sammen med inputtet, og hvor man bruger id på checkbox og for attribute på label. Fjernes både for attribute på label virker det fint. Disabled attribute har ikke samme problem, men vores brugsscenarie er readonly. Jeg kan ikke reproducere hvis jeg ikke bruger dkfds.

Genskab fejlen (To Reproduce) Sådan genskabes fejlen (Steps to reproduce the behavior):

  1. Go to https://designsystem.dk/komponenter/form-controls/#tjekboks
  2. Åben devtools, og rediger markup så der sidder et readonly felt på en af de ikke disabled bokse.
  3. konstater at readonly ikke bliver respekteret.
  4. Fjern for="xxx" fra labellen
  5. Konstater at tjekboksen nu er readonly.

Sådan burde det fungere (Expected behavior) Jeg forventer at det at man "linker et input sammen med en label ikke har inflydelse på hvorvidt man kan bruge readonly på den eller ej."

Desktop - udfyld venligst følgende (please complete the following information):

detfaellesdesignsystem commented 4 years ago

Hej @4nd3r5,

Tak for din henvendelse!

Jeg har oprettet en sag på det i vores backlog og vil vende tilbage hurtigst muligt.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

detfaellesdesignsystem commented 4 years ago

Hej @4nd3r5 ,

Tak igen for din henvendelse.

Vi har undersøgt sagen, og generelt er readonly slet ikke understøttet på checkbox. Grunden til at det ser ud til at virke, når man følger din guide til punkt 5, er at checkbox slet ikke er koblet til - det er ren styling du ser på label, så status på om den er checked eller ej bliver aldrig hentet fra input elementet.

Jeg forsøgte mig med en readonly checkbox uden styling af nogen art, og attributten har absolut ingen effekt.

Som det står nu, er det ikke muligt - teknisk - at lave et readonly input checkbox.

Jeg sender gerne sagen videre til UX folkene i FDS-teamet, så vi kan se på om der skal laves et alternativ til visning af værdien i en checkbox. Har du mulighed for at levere noget kontekst i forbindelse med, hvordan du skal bruge readonly checkbox? Evt. screenshot af den ønskede løsning?

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

4nd3r5 commented 4 years ago

Hej Kristina

Konteksten er at vi har en form der har både visnings mode og redigeringsmode, vi har dog valgt at bruge disabled i stedet, da det giver bedre mening rent markup mæssigt. Dernæst styler vi selv hvordan et disabled checkbox/input type skal se ud.

MVH Anders

detfaellesdesignsystem commented 4 years ago

Hej @4nd3r5,

Modtaget.

Overvej om disabled løsningen opfylder evt. krav til oplæsning fra skærmlæser og eventuelt mulighed for at tabbe til checkbox/radiobutton.

Man kan ikke navigere til et disabled felt med tabulatoren og dermed kan man risikere at brugere overser feltet. Feltet bliver i så fald ikke læst op. Hvis dette er ok, så er der ingen alarm, men det er noget I bør overveje.

Hvis fokus er over det disabled felt, og man bruger ned-piletasten, så bliver feltet dog læst op, og man får at vide det ikke er tilgængeligt. Men det er i en specifik situation - Det er derfor ikke altid, at brugeren bliver gjort opmærksom på at feltet eksisterer.

Jeg lukker sagen her - men hvis du har flere spørgsmål til sagen, er du mere end velkommen til at genåbne den eller oprette en ny.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem