Responsiv, WCAG-compliant og React-kompatibel kalender på bookingflow

Owned by Christopher Juhl (Unlicensed)
Last updated: Jan 02, 2023 by Michèle Leyssac Naur (Unlicensed)
3 min read

https://starwiki.atlassian.net/browse/BVL-261

Storyline

Som bruger der har brug for at booke møder på jobnet, ønsker jeg at den kalender, der bruges til at vælge tider i bookingflowet, er responsiv og WCAG-compliant, så jeg kan benytte den med en telefon eller tablet, og så jeg kan få glæde af fuld tilgængelighed.

Acceptkriterier

  1. Non-funktionelt krav: Kalenderen skal bygges som React-komponent.

  2. Kalenderen skal være fuldt responsiv.

  3. kalenderen skal være WCAG compliant (navigérbar med tabulator, piletaster samt oplæsning i skærmlæser).

  4. “As-is”-krav: kalenderen skal udover ovenstående virke as-is på bookingflowet.

    1. Kalenderen skal vises for den måned den første ledige tid er i.
      Dvs. hvis den første ledige tid er i januar, så er det i januar man starter i. Dage med ledige tider vises med det grønne ikon ’Ledige tider’. Borgeren kan bladre frem til næste måned, hvis fristen giver borgeren mulighed for at booke et møde i næste måned, og jobcenter har ledige tider. Borgeren bladrer til næste måned i den blå bjælke hvor måned og år er skrevet. Kalenderen vil vise dage med ledige tider set i forhold til valget af mødeform.

       

    2. Hvis den sidste ledige tid er i måned (t), så skal man ikke kunne klikke sig videre til månederne efter (dvs. være inaktive i (t+1), (t+2),… osv).

    3. Har borgeren en frist på booking, så skal kalenderen kun vise mødetider, der ligger inden for bookingfristen, eller mødetider der ligger op til 7 dage efter bookingfrist-datoen for øvrige ydelsesmodtagere end dagpengemodtagere. Kalendervisningen skal begrænses til maksimalt den måned sidste ledige tid er i.
      (Der er ikke en tilsvarende begrænsning før første ledige tid, idet brugeren også må kunne se indeværende måned, se dog AK 4 a.)

    4. Man skal kunne se på en dato, hvis der er ledige tider

      1. as-is:

    5. Hvis man trykker på en dato med ledige tider, skal der åbnes en modal med de tider, det er muligt at vælge.

      1. as-is:

         

      2. Såfremt man har andre aktiviteter på den valgte dag, skal de vises i modalen under de ledige mødetider. Klikker borgeren på et tidspunkt, skal tidspunktet vises med et flueben. Klikker borgeren derefter på knappen 'OK', skal oversigten lukke med tidspunkter og brugeren skal føres tilbage til kalenderoversigten og fortsætte resten af booking processen.

      3. Er der kun et møde på dagen, er dette møde preselected.

Baggrund

Ideen er, at der skal benyttes den nye kalenderkomponent som er genbrugelig til moderniseringen.

Afklaringer

 

 

Tilgængelighed: https://starwiki.atlassian.net/was