rolfsmeds
commented
2 years ago https://github.com/vaadin/web-components/issues/113 already covers the grid content part of this issue, but we're keeping this ticket open for the CRUD toolbar issue.
Open TetraLogicalHelpdesk opened 3 years ago
rolfsmeds
commented
2 years ago https://github.com/vaadin/web-components/issues/113 already covers the grid content part of this issue, but we're keeping this ticket open for the CRUD toolbar issue.
rolfsmeds
commented
2 years ago The editor toolbar also suffers from button label truncation if the labels are too long
WCAG Level
Level AA
Priority
High
Pages/screens/components affected
Description
Browsers have functionality that lets people zoom in on the page, enlarging all of the content in equal proportion. If zoom hasn't been taken into consideration when designing the page, it can result in 2 Dimensional scrolling (both horizontal and vertical) being needed to view the content.
The related WCAG 2.1 success criterion states that it should be possible to zoom into a website presented in "standard" desktop size (generally accepted to be 1280 x 1024 pixels) to 400% without 2D scrolling occurring, and without any loss of content or functionality.
At small viewport sizes, in the Custom search and renderers demo, the additional search field is cut off on the left-hand side. The fact that this is a search field (visually denoted with a search/magnifying glass icon), the placeholder text, and - when interacting with the field - the first few characters that a user enters into the search field, are all cut off and not reachable.
Note that this may be an issue with the demo/documentation, rather than a problem of the component itself.
User impact
When zooming causes horizontal and vertical scrolling it makes it hard to read the content because scrolling up/down and left/right disrupts the reading flow. If someone has mobility difficulties in addition to having low vision they may lack the dexterity needed to scroll in different directions, making the content completely inaccessible.
In this case, users will be not be able to see the search icon and placeholder text of the field, nor to see the first few characters of their entry when using the field.
Required solution
Make sure that content adapts/reflows to fit a 320 CSS px width viewport, so that scrolling in two directions is not necessary. Also make sure content is not cut off and unreachable at this viewport width.
In this case, make sure that the custom search field is fully visible at small viewport sizes. Consider vertically stacking the search field and the "New item" control.
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.
Implementation guidance
In this particular case, despite the author having specified a popup width, consider effectively overriding their choice if the end result would mean a popup that is wider than the viewport width.
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