patrickhlauke
commented
3 years ago As discussed in Slack, the more standard examples (e.g. https://vaadin.com/components/vaadin-crud/html-examples/crud-basic-demos) actually do work for keyboard users - Space toggles the sort order, while Enter/F2 set focus to the text field. The standard examples therefore do not fail 2.1.1, though the interaction is slightly unusual (for instance, it is not documented here https://www.w3.org/TR/wai-aria-practices-1.2/#grid) and may not be familiar to keyboard users. It would benefit from being documented. Or, alternatively, refactoring these combined filter/sort cells to make the sort order control focusable as a separate control.
tomivirkki
WCAG Level
Level A
Priority
High
Pages/screens/components affected
Description
Good design means supporting different modes of interaction, because there are many reasons why someone might use a keyboard instead of a mouse, and if keyboard interaction is not fully supported the website is effectively unusable.
The CRUD documentation page contains various examples of grids that use combined filter and sorting column headers. While keyboard users are able to trigger/operate the filter inputs, it doesn't appear to be possible to change the sort order of these columns using the keyboard.
This is likely an issue with the Grid component itself, but we didn't find any examples of these combined filter/search column headers in the documentation for that component.
User impact
Someone with mobility problems will often use a keyboard instead of a mouse to navigate a web page. A screen reader user will also tend to use a keyboard if they cannot see the screen to use the mouse. Therefore if the website does not properly support keyboard interaction a large number of people are effectively prevented from using it.
In this case, keyboard users will be unable to change the sort order of these combined filter/sort column headers.
Required solution
Make sure that all interactive controls can be used with a keyboard.
In this case, consider adding making the sort order controls separately focusable and operable for keyboard users. Once the user "activates" one of the column header cells to edit, also allow
Tab/Shift+Tabto cycle between the edit field and the sort control, and allow users to explicitly toggle the sort order control. As this is a complex and unusual pattern, this will likely require testing (ideally user testing, particularly with assistive technology users) and iteration.This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the components, their variants, and the documentation website.
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 components, their variants, and the documentation website for instances of the same issue:
Definition of done
Complete all of these tasks before closing this issue or indicating it is ready for retest:
Related standards
More information
Test data
Test date: March 2021 Website: vaadin.com/components, vaadin.com/docs-beta