search

detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

tooltip i table header på mobil #145

Closed FNA-atp closed 2 years ago

FNA-atp commented 3 years ago

Hej FDS, Vi bruger ofte tooltip i table header - og når tabellen har classen "table--responsive-headers" bliver th'er ikke vist på mobileenheder. Fordi man bruger data-title="" i td - og spørgsmålet er om der findes en smart måde at vise tooltip på både på mobil og desktop, så vi har tooltippen stående kun et sted i koden. Er det noget I har undersøgt før? image image

Mvh. Farzana fra ATP

detfaellesdesignsystem commented 3 years ago

Hej Farzana,

Tak for din henvendelse.

Vi vender det lige i teamet.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

detfaellesdesignsystem commented 3 years ago

Hej Farzana,

I eksemplet vises to tabeller med én række hver. Vil der på noget tidspunkt være mere end én række i tabellerne?

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

FNA-atp commented 3 years ago

Hej Kristina, Ja, der ville være flere rækker i tabellen - vi bruger også ofte "Avancerede tabeller" med et ikon til modal eller tooltip i t-headeren :-)

detfaellesdesignsystem commented 2 years ago

Hej Farzana

I jeres tilfælde vil vi anbefale at anvende et detaljeelement til tooltipbeskrivelserne på mobil. På mobil ville det altså se således ud:

Screenshot 2021-11-18 at 14 48 00 Screenshot 2021-11-18 at 14 48 09

Vi vil også anbefale jer at genoverveje, hvordan regnestykket kommunikeres til brugeren, da det ikke er tilgængeligt med tabelkolonner uden tilhørende labels i headeren (til x og =). I kunne fx vise rækkestykket over tabellen i stedet. Det ville se sådan ud (sørg i øvrigt for, at gangetegnet læses korrekt op af en skærmlæser):

Screenshot 2021-11-18 at 14 47 55

Bemærk i øvrigt at vi anbefaler højrestilling af tal med numerisk størrelse i tabeller, da det gør det lettere for brugeren at sammenlige tal.

Med venlig hilsen Mette Boldt Det Fælles Designsystem

FNA-atp commented 2 years ago

Hej Mette, Tak for tilbagemelding :-)

  1. Jeg skrev dette issue i håbet om, at I måske kunne finde en "kode" løsning på tooltips, så vi ikke gentog hele tooltip html-koden i data-title="" også. Jeg tror ikke details er løsningen her i tabelheaders. Tooltipen skal helst stå tæt på den th, den handler om. Den fungerer meget fint på mobil i andre tilfælde, når den ikke står i tabel.

  2. Vi har wcag testet tabellen - og har forklaret regnestykket til skærmlæsere.

  3. Højrestilling af tal med numerisk størrelse i tabeller er taget til efterretning :-)

Vh. Farzana fra ATP

detfaellesdesignsystem commented 2 years ago

Hej Farzana

Det er dejligt at høre, at I har taget god højde for skærmlæseren i jeres løsning.

Vi har desværre ikke planer om at inkludere en teknisk løsning på at vise tooltips sammen med kolonneoverskriften i responsive tabeller på mindre skærme, da vi mener, det vil forstyrre brugergrænsefladen med så mange tooltips, der reelt beskriver de samme labels flere gange.

Med venlig hilsen Mette Boldt Det Fælles Designsystem