Only Keyboard users accessibility and Screen readers support

[ganesh045]

Bug description: Only Keyboard users accessibility issues and Screen readers support

Currently we are facing below issues with DatePicker

1. For next/previous month buttons: there is no way to access it from only keyboard navigation and text for screen readers
2. Only the number is ready by screen readers for the dates in the Calendar: "1" instead of "Monday 1 September"
3. Once Calendar popup comes up Date is focusing directly where it should be (at least in our req.) like below screen capture. Instead of that it's focusing on date directly and there is no way back to arrow buttons (as they have tabIndex='-1')
4. We did managed to take focus on arrow buttons with TAB click but on enter key press its just selecting current focus date and closing the popup, where It should be move to next month according to arrow buttons.

These (next/previous month buttons) are working fine with regular mouse interaction.

Do we have any predefined method to bind on keyboard arrow click and complete Calendar navigation hacks.

I found few issues related to this but nothing has proper direction or leads: 1946, 2165 and 3148

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: V.5.2.9
ng-bootstrap: V.1.1.2
Bootstrap: V.4.3.1

Any help, Your help will be much appreciated and Thanks in advance :)

[fbasso]

Thanks for reporting the issues @ganesh045.

You mentioned that you are using the version 1.1.2 of ngBootstrap. If it's the one, it's quite old as the current one is the 9.

Did you consider to upgrade ? A lot of the described issues are probably fixed. In the demo (https://ng-bootstrap.github.io/#/components/datepicker/examples), days have aria-label with the full days (not only numbers), arrow buttons don't have tabindex="-1", ...

[ganesh045]

@fbasso glad to get your response.

We did upgraded our app and aria-labels on calendar dates seems working fine. But there are still 2 points that I need to be resolved from above are 1 & 3.

is there any external configuration that we need to do in order to make arrow button accessible from only keyboard (TAB).

As you mentioned in the above comment, arrow buttons don't have tabindex='-1' but at the same time don't have the tabindex='0'. So we are unable to access while navigating through only keyboard.

Please let us know if any changes can fix this or any leads will be highly appreciated. Thanks

Updated Versions of Angular, ng-bootstrap and Bootstrap:

Angular: V.10.0.9
ng-bootstrap: V.8.0.4
Bootstrap: V.4.6.0