ADA violation - buttons without discernible text

[bifodus]

Bug description:

In the Datepicker, the arrow buttons signify going forward or backward by a day, month, or year, but to a screen reader this can not be discerned since there is no inner text or label on these button elements that describe said buttons' functions.

Additionally, there exists a <ul> element with ng-click=$event.stopPropagation(), and ngAria by default will add a role="button" to every element with an ng-click attribute. However, this <ul> isn't functioning as a button.

Reproduce the issue:

Use this FireFox plugin to test accessibility:
https://addons.mozilla.org/en-us/firefox/addon/axe-devtools/

Make sure the datepicker is visible when you analyze the page.

Solution:

Adding labels to these button elements (e.g., aria-label="view next month" or aria-labelledby=...) should resolve these issues.

Although the <ul> isn't functioning as a button, a workaround would be to add a label to this element as well.

Version of Angular, UIBS, and Bootstrap:

Angular: 1.5.2
UIBS: 2.0.2
Bootstrap: 3.3.1

[wesleycho]

Feel free to file a PR