Date Picker

Component preview opent in nieuw tabblad

Gedrag en toegankelijkheid

Checklist bij implementatie

  • Het invoerveld moet een label hebben wat de gevraagde datum duidelijk omschrijft, zoals “datum afgifte vergunning” of “startdatum werkzaamheden”.

Toelichting toegankelijkheidsfuncties Toetsenbord gebruikers kunnen de datum in het invoerveld typen, dat werkt sneller dan de datum kiezen in het modal. Het modal is echter wel volledig toegankelijk. Hiertoe zijn de volgende maatregelen genomen:

  • Het knopje om de modal voor het kiezen van een datum te openen heeft het aria-expanded attribuut en als label “kies datum”, daaraan wordt “geselecteerde datum [datum]”‘ toegevoegd als al een datum is geselecteerd. Dit is bedoeld als extra hint voor de gebruiker.
  • Het modal kan worden gesloten met de escape toets of het sluitknopje.
  • Rond de huidige datum (vandaag) wordt een groen cirkeltje geplaatst. Tekstalternatief daarvoor is het attribuut aria-current="date", op het referentie platform wordt dit uitgesproken als “huidige datum”.
  • De geselecteerde datum (datum die in het invoerveld staat / komt) staat in een gevuld groen cirkeltje. Tekstalternatief is het attribuut aria-selected="true". Op het referentie platform wordt dit uitgesproken als “geselecteerd”.
  • In de tabel met datums kan worden genavigeerd met de pijltjestoetsen, met enter wordt een datum geselecteerd en sluit het modal. Op het referentie platform behandelt NVDA dit als een standaard tabel waardoor met de commando’s voor tabel navigatie wordt genavigeerd, dit is een kennelijke ontwerpkeuze van NVDA en werkt goed. Het is ook mogelijk op de gebruikelijke manier met pijltjestoetsen te navigeren door de focusmodus te activeren (NVDA + spatie).






<!-- Default -->
<label for="initial">
    Default
</label>
<dso-date-picker identifier="initial"></dso-date-picker>
<!-- Disabled -->
<label for="disabled">
    Disabled
</label>
<dso-date-picker identifier="disabled" disabled></dso-date-picker>
<!-- Showbutton -->
<label for="showButton">
    Toon kalender knop
</label>
<dso-date-picker identifier="showButton"></dso-date-picker>

<br><button type="button" class="dso-secondary btn-sm" id="showButton-show-button">Open date picker met script</button>

<script>
    const button = document.getElementById('showButton-show-button');
    button.addEventListener('click', function() {
        document.querySelector('dso-date-picker[identifier="showButton"]').show();
    });
</script>
<!-- Predefined Value -->
<label for="predefinedValue">
    Vooringevulde datum
</label>
<dso-date-picker identifier="predefinedValue" value="15-11-2020"></dso-date-picker>
<!-- Min Max -->
<label for="min-max">
    Minimum en maximum datum
</label>
<dso-date-picker identifier="min-max" min="8-1-2020" max="29-1-2020"></dso-date-picker>
<label for="{{ id }}">
  {{ label }}
</label>
<dso-date-picker identifier="{{ id }}" {{ attributes(
  [min, 'min', min],
  [max, 'max', max],
  [disabled, 'disabled'],
  [value, 'value', value]
)}}></dso-date-picker>

{% if showButton %}
  <br><button type="button" class="dso-secondary btn-sm" id="{{ id }}-show-button">Open date picker met script</button>

  <script>
    const button = document.getElementById('{{ id }}-show-button');

    button.addEventListener('click', function() {
      document.querySelector('dso-date-picker[identifier="{{ id }}"]').show();
    });
  </script>
{% endif %}
/* Default */
label: Default
id: initial
/* Disabled */
label: Disabled
id: disabled
disabled: true
/* Showbutton */
label: Toon kalender knop
id: showButton
showButton: true
/* Predefined Value */
label: Vooringevulde datum
id: predefinedValue
value: 15-11-2020
/* Min Max */
label: Minimum en maximum datum
id: min-max
min: 8-1-2020
max: 29-1-2020