Luk af modal scroller til top af side på iPads

[clpatp]

Når vi lukker modaler længere ned på siden scroller siden tilbage til toppen.

Step 1: Jeg klikker på knappen 'Se detaljer':

Step 2: Jeg klikker på 'I' ikonet:

Step 3: Modalen åbner, og jeg trykker på 'Luk' knappen.

Step 4: Jeg kommer tilbage til forsiden i stedet for tabellen:

Brugeren burde blive ved detaljetabellen i stedet for at blive sendt til toppen af siden.

[detfaellesdesignsystem]

Hej @clpatp ,

Tak for din henvendelse.

Oplever du kun dette issue på iPad, eller sker det også på andre enheder/browsere?

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[clpatp]

Hej Kristina

Det er kun på iPad (og både i Chrome og Safari). På en iPhone fx virker det med begge browsere.

[detfaellesdesignsystem]

Vi opretter en sag på det, og vil vende tilbage.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[clpatp]

Tak :)

[detfaellesdesignsystem]

Hej @clpatp,

Det har ikke været muligt for os at reproducere fejlen, så jeg har brug for nogle flere oplysninger.

Det informations-ikon som aktiverer modalen, den ligger inde i et element, som bliver aktiveret. når man trykker på Se detaljer. Hvilken type komponent er det? Har svært ved at få et overblik af sidens opbygning i de billeder du har vedhæftet.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[clpatp]

Hej

Det ligger som start inde i et card. Card text div'en indeholder så en tabel der viser detaljerne - og herefter bliver linket (I - ikonet) så vist hvis det er nødvendigt. Vi anvender javascript/angular til at åbne for de forskellige modaler der findes på siden - herunder åbnes modalen max25feriedage.

Var det det du var ude efter?

                                        <td [attr.data-title]="'Optjent ferie' | tss">
                                            <span class="align-text-right">
                                                <span *ngIf="optjening.optjentDage > 25">
                                                    <a href="#" (click)="open(max25feriedage);$event.preventDefault();" id="modal" attr.alt='{{ "Information om antal feriedage" |tss: "Tekst" }}' attr.aria-label='{{ "Information om max antal feriedage" | tss:"Tekst" }}'>
                                                        <svg class="icon-svg" ><use xlink:href="#info"></use></svg>
                                                    </a>
                                                </span>
                                                {{ optjening.optjentDage | number:'0.2'}}&nbsp;<tss label="feriedage"></tss><br />{{ optjening.optjentBeloeb | currency:'DKK' }}&nbsp;<span *ngIf="optjening.beloebFoerSkat"><tss tekst="før skat"></tss></span><span *ngIf="!optjening.beloebFoerSkat"><tss tekst="efter skat"></tss></span>
                                            </span>
                                            <span *ngIf="optjening.lgindbetalt" class="mindre-font align-text-right"><br />{{ optjening.lgoptjentDage | number:'0.2'}}&nbsp;<tss label="dage ("></tss>{{ optjening.lgoptjentBeloeb | currency:'DKK' }}<tss label=")"></tss></span>
                                        </td>

[detfaellesdesignsystem]

Hej @clpatp ,

Ikke helt - jeg mener hvad der sker fra step 1 til step 2. Er det en helt ny side, eller hvordan er de sat sammen? Det er svært at se på billederne. Jeg kan se der er en luk knap på step 2 billedet også, så er det samme side eller hvordan er det skruet sammen?

Umiddelbart ville mit gæt være at du muligvis har noget js der overlapper på en måde. Jeg har ikke kunne reproducere fejlen på ipad på en alm. side, hvor linket til modalen lå i bunden. Som hovedregel, så scroller man tilbage til knappen ved luk af modal, da fokus går tilbage til det sted på siden. (Giver særligt mening når det kommer til tilgængelighed) Den bør ikke ændre status på nogen andre elementer på siden.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[clpatp]

Ah - "Se detaljer" er et andet card der vises i bunden af siden. Forhåbentligt giver nedenstående et bedre billede af sidens opbygning. Den nederste grønne markering er linket til den modal der ved lukkes forsager sroll til top på iPad.

[detfaellesdesignsystem]

Hej @clpatp,

Med reference til https://github.com/detfaellesdesignsystem/dkfds-components/issues/46, går jeg ud fra, at det er samme issue med manglende brug af dkfds JS som gør sig gældende i dette issue?

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[clpatp]

Det skal jeg så ikke kunne sige. Vi bliver nødt til at kigge på om jeres JS forhindre scroll ved luk af modal.

[detfaellesdesignsystem]

Vores JS sætter - ved luk af modal - fokus på den knap, som aktiverede modal i første omgang, som i dit tilfælde er informations ikonet, så den bør ikke scroll til top. Det har ikke været muligt for mig at genskabe den opførsel du beskriver.

Du skriver i https://github.com/detfaellesdesignsystem/dkfds-components/issues/46#issuecomment-528289464 at der sættes modal-open på body og ikke modal-active hos dig - det indikerer for mig, at I muligvis har et andet js til at håndtere modalen eller at I gør brug af micromodal.js uden for dkfds.js (Eller har en ændre version end 4.4.0). Kan dette passe?

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[clpatp]

Vi sætter nu modal-active hos os, men anvender stadig ikke dkfds.js. Jeg skal lige have kigget på jeres javascript og se hvad vi kan gøre i Angular.

[detfaellesdesignsystem]

Modtaget.

Jeg lukker sagen for nu, da det lyder til at vores JS ikke bliver brugt, og derved ikke kan være årsagen til scroll. Hvis jeg har misforstået det, så er du velkommen til at genåbne sagen eller oprette en ny.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem