Calendar Icon <a> should be a <button> for accessibility reasons.

[boeltjen]

Hi there,

While you've added most of the workarounds (keyboard interactions and role=button), it would be simpler to just replace the with a in the template for the calendar picker element.

e.g.: replace: = ['<a class="datepicker-button input-group-addon btn" role="button" aria-haspopup="true" tabindex="0" aria-labelledby="datepicker-bn-open-label-CALENDARID">', '\t<span class="glyphicon glyphicon-calendar" title="Select Date..."></span>', "</a>"]

with

= ['<button class="datepicker-button input-group-addon btn" aria-haspopup="true" tabindex="0" aria-labelledby="datepicker-bn-open-label-CALENDARID">', '\t<span class="glyphicon glyphicon-calendar" title="Select Date..."></span>', "</button>"]

This also avoids a sometimes conflict with bootstrap 3's calendar picker which can result in a keyboard trap.

This isn't so much an accessibility reason as it is "best practice". There isn't really a good reason to use an anchor over a button, especially since you could just preventDefault on click.

@eureka2 would you consider providing functionality for people to choose to use a button over an anchor? For example, providing an option (boolean) named useButtonForTrigger.

[jcputney]

This would also be really helpful in browser/OS combinations that don't allow tabbing to anchors by default (like Firefox on Mac), but do allow tabbing to buttons.