Text and Page contents section a11y issues

[jnurthen]

filed in response to https://lists.w3.org/Archives/Public/public-aria-practices/2023Feb/0003.html

text copied here for reference:

Two core issues I ran into are:

1. Headings (particularly the Patterns) bleed past the container (https://www.w3.org/WAI/ARIA/apg/patterns/) - breadcrumbs, disclosure
2. When in a particular pattern, the Page contents section blocks nearly the entire page. (https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)

I am legally blind and use magnification and text magnification. The following are the specs of my environment:
OS: Mac OSx Monterey 12.6.3

Browser: Chrome 109.0.5414.119
Within Chrome Preferences:
Appearance ~ Font Size: Very Large
Appearance ~ Page Zoom:110%

Browser: Safari Version 16.3
Within Safari Preferences:
Advanced ~ New use font sizes smaller than: 18
Page Zoomed: 110%

[jnurthen]

Screenshot showing issue (1)

Video showing the Page Contents section becoming large at certain breakpoints (2)

Screen.Recording.2023-02-10.at.10.44.43.AM.mov

[a11ydoer]

Thanks for transferring the issue to github, @jnurthen
@alflennik @howard-e, Can you kindly look into the problems?

[howard-e]

Thanks @jnurthen @a11ydoer. Seems #2601 is also related.

[jnurthen]

+1 on #2601
The problem is that the header becomes sticky at 960px (https://github.com/w3c/wai-aria-practices/blob/83c8575ad4e0379868df5b5c92bdc84a03f2d48f/content-assets/wai-aria-practices/styles.css#L41) but the grid takes effect at 60em which is driven by this variable https://github.com/w3c/wai-website-theme/blob/a60a7002fb117e5c9389f972b442372aa2deb065/_css/base.css#L6 . Now - these are often the same but when the user has larger font sizes they are not which is why we are seeing this.

For simplicity I would probably look at changing our breakpoint from 960px to 60em (unless there is a way in our css to use the same variable as that would probably be the best long term solution)

[a11ydoer]

@mcking65 This issue is fixed.