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:
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.aria-current="date"
, op het referentie platform wordt dit uitgesproken als “huidige datum”.aria-selected="true"
. Op het referentie platform wordt dit uitgesproken als “geselecteerd”.
<!-- 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