Accessibility Update #488

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.