detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

Forsimpling af forældet modal: benyt moderne `<dialog>` element #234

Open jesperronn opened 1 month ago

jesperronn commented 1 month ago

Som et levn fra gamle dage, beskrives modal komponenten med følgende HTML selv i nyeste version af Designsystem:

<div class="fds-modal" id="modal-example" aria-hidden="true" role="dialog" aria-modal="true"
    aria-labelledby="modal-example-heading">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="modal-example-heading">

eksempel ovenfor fra https://designsystem.dk/kode/komponenter/modal/

Det vil være oplagt at release en ny version af designsystem således at man hjælper løsningerne til at implementere simplere HTML, og fjerner unødvendig javascript, da fx ESC knap for lukning er standard understøttet uden man behøver at kode det.

Designsystem afhang i sin tid af javascript bibliotek micromodal, skiftede sidenhen til egen javascript implementering. Men spørgsmålet er hvornår det er tid til en simplere release igen?

Hvis I overvejder dette seriøst, kunne man lave et 'legacy' migrate javascript/css som kunne understøtte den gamle html struktur. Dermed kunne udviklere implementere nye dialog bokse på den nye måde, og omskrive en modal af gangen i eksisterende løsninger.

Vend gerne tilbage hvis jeg kan hjælpe med yderligere input

detfaellesdesignsystem commented 1 month ago

Hej @jesperronn

Mange tak for dit input. Det er et interessant forslag at skrive HTML-koden til modaler som <dialog>. Vi har vendt muligheden i teamet, og på nuværende tidspunkt ser vi nogle potentielle udfordringer ift. samspillet med nogle af designsystemets andre komponenter. Derfor skal du desværre ikke regne med at se ændringen i den kommende release, men vi har lagt en opgave i backloggen og vil undersøge muligheden nærmere på et senere tidspunkt.

Igen også tak for forslaget om at tilbyde legacy-filer ifm. release. Det vil vi kigge nærmere ind i.

Venlig hilsen Det Fælles Designsystem