eureka2
Calendar Icon <a> should be a <button> for accessibility reasons.
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
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.
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.
