detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

Responsiv tabel med sortering giver forkerte overskrifter #229

Open jkruse opened 3 months ago

jkruse commented 3 months ago

Bekskriv fejlen (Describe the bug) Hvis man laver en responsiv tabel (table--responsive-headers) som også har mulighed for sortering af kolonnerne, så bliver "kolonneoverskrifterne" i mobilvisningen forkerte, da de også indeholder skærmlæser-teksten til sorteringsknapperne.

Genskab fejlen (To Reproduce) Sådan genskabes fejlen (Steps to reproduce the behavior): Tilføj klassen table--responsive-headers til eksemplet på en tabel med sortering.

Screenshots image

Sådan burde det fungere (Expected behavior) Kun de synlige kolonneoverskrifter vises i mobil-visningen.

Supplerende oplysninger (Additional context) Problemet er at initialiseringen af en ResponsiveTable tilføjer "data-title" attributter til alle cellerne i tabellen, hvis indhold er det fulde tekstindhold af den tilhørende overskrift (inkl. den del som er "sr-only"), og som bliver brugt som overskrift for cellens indhold i mobil-visning. I skriver selv at "Ved sortering af responsive tabeller på mobil anvendes i stedet komponenten Sortering med overflow menu", men er ikke muligt at lave et fornuftigt skift imellem de to løsninger, når "data-title" bliver udfyldt på denne måde. Lige nu må man derfor vælge imellem enten at gøre tabellen responsiv, eller give mulighed for sortering.

Workaround Hvis der manuelt tilføjes "data-title" attribut til samtlige celler i tabellen, så kan man undgå at skærmlæser-teksten fra sorteringsknapperne kommer med. Det er lidt tungt i længden dog.

detfaellesdesignsystem commented 3 months ago

Hej @jkruse

Tak for henvendelsen!

Vi har oprettet en sag på det.

Med venlig hilsen Det Fælles Designsystem

detfaellesdesignsystem commented 2 weeks ago

Hej @jkruse

Fejlen er løst i version 10.0.0.

Med venlig hilsen Det Fælles Designsystem