rolfsmeds
commented
3 years ago Should cap overlay width to fit within viewport even when custom width set.
Open TetraLogicalHelpdesk opened 3 years ago
rolfsmeds
commented
3 years ago Should cap overlay width to fit within viewport even when custom width set.
rolfsmeds
commented
2 years ago Check if the same fix should also be applied to Select.
web-padawan
commented
2 years ago
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.
By default, the combo box component's popup adapts correctly the the browser's viewport, even at relatively small sizes. In the example for Popup Width, however, the popup is explicitly set to be at a particular size, which leads to its contents overflowing a horizontal viewport of 320 CSS pixels. As the documentation site also suppresses horizontal scrolling (or at least the presence of a horizontal scrollbar), the overflowing content is essentially cut off and unreachable for desktop users with high magnification.
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 - at least for the documentation site - horizontal scrolling is not possible, meaning that users will be unable to read any of the overflowing content altogether.
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.
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