Search code examples
grailsdatepickeraccessibility

GSP date picker: Add label for each field (day, month, year)

I use the GSP date picker as suggested in the grails documentation, but this results in a component, which is not easily accessible with a screen reader. My preferred solution would be to either have a label for each or just to add a postfix (e.g. buy date (day)...). Is this possible with this date picker or would I have to implement a date picker on my own?

GSP:

<g:datePicker name="buyDate" precision="day" default="${new Date()}" value="${book.buyDate}"/>

Resulting HTML:

<label for="buyDate"> Buy date</label>
<input type="hidden" name="buyDate" value="date.struct">
<select name="buyDate_day" id="buyDate_day" aria-labelledby="buyDate">
<option value="1">1</option>
...
</select>
<select name="buyDate_month" id="buyDate_month" aria-labelledby="buyDate"><option value="1">Januar</option>
...
</select>
<select name="buyDate_year" id="buyDate_year" aria-labelledby="buyDate"><option value="2119">2119</option>
...
</select>
Solution

  • This is not possible with the grails datepicker alone. However, you could fairly easily add your own labels via javascript, or use an existing datepicker from a UI framework. I'm not sure what you mean by "add a postfix" so not sure how to help there.

    Example of a simple way to add labels via jquery:

    $("select[id^='buyDate_']").each(function(idx, el) { 
    $(el).before("<label for='" + $(el).attr("id") + "'>" + $(el).attr("id").replace("buyDate_", "") + ": </label");
});