Fix 2D scrolling on Design Guidance pages at reflow dimensions (WCAG …#795
Open
amarinov-msft wants to merge 1 commit into
Open
Fix 2D scrolling on Design Guidance pages at reflow dimensions (WCAG …#795amarinov-msft wants to merge 1 commit into
amarinov-msft wants to merge 1 commit into
Conversation
…1.4.10) Typography, Spacing and Geometry pages showed both horizontal and vertical scrollbars in reflow mode because their reference tables used fixed-width Grid columns and the images used fixed sizes, forcing content wider than the viewport. Disable horizontal scrolling and make the tables reflow via proportional (star) column widths capped with MaxWidth, and let the images scale down (and wrap, on Spacing) so content fits within the available width and only a single vertical scrollbar is needed. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes an accessibility issue in the WPF Gallery Design Guidance pages. On the Typography, Spacing, and Geometry pages, both a horizontal and a vertical scrollbar appear at reflow dimensions, so users must scroll in two directions to reach all content. This fails WCAG 2.1 SC 1.4.10 (Reflow) / MAS 1.4.10, which requires content to be usable without scrolling in two dimensions, and is a physical-challenge trap (Trap 2.1) for low-vision and motor-impaired users. The cause is that each page's reference table uses fixed-width Grid columns and the example images use fixed sizes, forcing content wider than the viewport inside a
ScrollViewerwithHorizontalScrollBarVisibility="Auto".Change
Sample Applications/WPFGallery/Views/DesignGuidance/TypographyPage.xamlDisable horizontal scrolling on the
ScrollViewer. Convert the type-ramp table's fixed column widths to proportional star widths so the table reflows, and cap it withMaxWidth(left-aligned) so the normal wide-window appearance is unchanged.Sample Applications/WPFGallery/Views/DesignGuidance/SpacingPage.xamlDisable horizontal scrolling. Star-size the spacing table's usage column and cap the table with
MaxWidth. Change the two side-by-side example images from a horizontalStackPanelto aWrapPanelwith bounded, scalable cards so they scale down and stack vertically when the window is narrow.Sample Applications/WPFGallery/Views/DesignGuidance/GeometryPage.xamlDisable horizontal scrolling. Star-size the corner-radius table's usage column and make the example image responsive so it scales down instead of forcing width.
Result
At reflow dimensions the three pages now present a single vertical scrollbar; the tables' columns compress and their text wraps, and the images scale down (and stack, on Spacing), so all content is reachable without horizontal scrolling. At normal window sizes the layout and proportions are unchanged.
Testing
Microsoft Reviewers: Open in CodeFlow