Date Picker - Ensure custom controls provide proper textual name, role, and state information - (2036569898)

[dqateam]

Module:

12 Date Picker

Violation:

Ensure custom controls provide proper textual name, role, and state information

WCAG Reference:

• 1.1.1 Non-text Content
• 4.1.2 Name, Role, Value

Instance ID:

2036569898

Severity:

7

Description:

[Issue]
There are buttons without appropriate role information. Examples include:
-The role=Button is missing for the dates for the calendar widget.

[User Impact]
Screen reader users will be unable to determine that this content is interactive.

[Code Reference]

<div class="day-wrapper">
<span class="day">
<span class="text">29</span>
</span>
</div>

Note:

[Suggestion]
Developer should provide the role="button" to the source code.
Developer should provide aria-selected="true" to the currently selected date and provide aria-current="date" attribute to the current date
Developer should provide aria-disabled="true" to the disabled dates.

[Compliant Code Example]

<div class="day-wrapper" role="button" aria-selected="true">
<span class="day">
<span class="text">29</span>
</span>
</div>

Media Type:

Custom Controls

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[geospatialem]

We're fulfilling some of the basic requirements, but perhaps we could add a bit more context to the date?

Currently once in the date area screen readers are provided with the number (e.g., "1", but no other context). Perhaps could provide a bit more context to the month and year?

[geospatialem]

Also includes coordination with #5582, to provide context when engaging with the input-date-picker component.