Accessibility Update

[SmittyShmee]

What is the expected behavior?

when a user is moving about the calendar via a keyboard (or some other a11y device), the calendar needs to set "aria-selected" for the currently selected item and "aria-current" for the current item (day, month, year, whichever).

What is the current behavior?

A user can see the currently selected and the current date, but users who are visually impaired and screen readers cannot.

What are the steps to reproduce?

• be focused within the open calendar and moving about the calendar via keyboard.
• the aria-selected attribute is never being set -- nor is aria-current

Which versions of angular-bootstrap-datetimepicker, OS, TypeScript, browsers are affected?

• angular-bootstrap-datetimepicker: ^2.2.1
• OS: Windows (not sure about others)
• Browsers: Firefox and Chrome
• TypeScript: 4.2

Is there anything else we should know?

• Accessibility testing was done by Deque (https://www.deque.com/). We attempted to fix it but there were not enough sufficient @Output events to let us set these attributes ourselves. Deque's accessibility testing tool gave us the following output:

Description The selected state of an element is not conveyed to screen reader users.

Element name: Current date and selected date example "9".

Location: On the calendar widget.

Additional details: Current date and selected dates are not announced to the screen reader users. Recommendation to fix RULE : The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

HOW TO FIX: Fix this issue by using ONE of the following techniques:

1. Use the aria-selected attribute with the following four ARIA roles: gridcell, option, row, tab.
2. Use the aria-current attribute to indicate the element that represents the current item within a container or set of related elements, such as the currently selected page, step, location, date, or time.

REFERENCE: WAI-ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-selected WAI ARIA Authoring Practices: https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel WAI-ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-current

BACKGROUND: States and properties are attributes used to convey essential information about an element to screen readers and other assistive technologies. Some roles require certain state and property information - such as the checked/unchecked state of a checkbox. Native HTML elements provide those required states and properties, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant states and properties using ARIA.

[dalelotts]

Thanks @SmittyShmee! I'm super happy to see a11y testing happening! Sorry I missed this!

I have not verified this but yet but I will shortly.

Can you tell me a bit more: What version of Angular are you using? Do you have a timeline or specific date when you need this fixed?

[SmittyShmee]

Hello @dalelotts,

The testing was done on an Angular 12 build (12.0.2). The framework we include angular-bootstrap-datetimepicker in will be getting an update to Angular 13 (13.1.1) in the not-to-distant future.

I know there is another round of a11y testing set to be done, just not sure when it's scheduled for.

Thanks.