date-picker / time-picker / date-time-picker: component doesn't announce its role, value and state consistently

[TetraLogicalHelpdesk]

WCAG Level

Level A

Priority

High

Pages/screens/components affected

• Date Picker
• Time Picker
• Date Time Picker

Description

In some browser/assistive technology combinations (specifically, during testing, NVDA), when navigating using the virtual cursor/reading keys, the date picker, time picker, and the combined date-time picker are currently announced simply with their label and identified as "application", without exposing their current value (if present) nor their state (whether they are disabled, or read only, or invalid).

For instance, the Basic Usage example for vaadin-date-picker, when read by NVDA, is announced simply as:

clickable  application    Label  clickable  application       clickable  application 

(see the screen recording with the NVDA audio output)

One exception is the disabled date picker in the Disabled and Read Only, which at least announces that it is unavailable:

clickable  application  unavailable    Disabled

User impact

While this issue only affects NVDA users that navigate through a page/document using virtual cursor, it is nonetheless an important indication that the way that roles, values and states are conveyed by the components is not exposed in a robust way.

Required solution

Make sure that the select inside the custom field has an appropriate accessible name, and that it exposes its current state (i.e. whether it's valid or invalid).

Implementation guidance

The current structure, once processed, of the pickers (taking a read-only vaadin-date-picker as example, but the vaadin-time-picker and the internals of the vaadin-date-time-picker are equivalent) is as follows:

<vaadin-date-picker label="Label" tabindex="0">
  # Shadow root
  <vaadin-date-picker-text-field id="input" role="application" autocomplete="off" part="text-field" aria-label="Label" tabindex="0" has-label="">
    # Shadow root
    ...
    <input part="value" tabindex="0" aria-labelledby="..." autocomplete="off" readonly="">
    ...
    # end Shadow root
    ...
  </vaadin-date-picker-text-field>
  ...
  # end Shadow root
  ...
</vaadin-date-picker>

At a high level, it appears that attributes and values are correctly set on the internal <input> elements (in the above case, the fact that it is readonly). However, this is not exposed/reflected on the outer component itself, which is what is being announced when navigating through the page using the virtual cursor in NVDA.

In these cases, we'd recommend not setting role="application" on the component itself (which seems problematic for NVDA, as it makes the entire component only announce as "application"), and to refer to the WAI-ARIA Authoring Practices 1.2 combobox examples that most closely match these components, to ensure that they work correctly with assistive technologies.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:

1. Turn on your screen reader (in particular, NVDA)
2. Navigate to the date, time, and date-time pickers using virtual cursor/reading keys (cursor keys)
3. Verify that the picker is correctly announced, with an appropriate accessible name, role, value (if set), and any state information (such as read-only, invalid, disabled).

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the components, their variants, and the documentation website have been tested for the same issue.
• All issues identified throughout the rest of the components/website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 2.5.3 Label in Name (Level A)
• WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (Level A)

More information

• W3C - Including the text of the visible label as part of the accessible name
• W3C Accessible Name and Description Computation 1.1
  WAI-ARIA Authoring Practices 1.2 combobox

Test data

Test date: March 2021
Website: vaadin.com/components, vaadin.com/docs-beta

[web-padawan]

Possibly related: https://github.com/vaadin/vaadin-time-picker/issues/142#issuecomment-704113257

[web-padawan]

This should be fixed in Vaadin 22.0.0-beta1, as we have removed role="application" from date and time pickers.

[web-padawan]

Closing as fixed per above comment.