Tackle accessibility issues, from WAVE or otherwise

tigt commented 1 year ago

a11y work I did in a fugue state, pushing up so I don't forget

github-actions[bot] commented 1 year ago

PR Preview Action v1.1.1 :---: :rocket: Deployed preview to https://marko-js.github.io/website/./pr-86/ on branch gh-pages at 2022-08-31 14:13 UTC

tigt commented 1 year ago

Site now only overflows horizontally below 254 pixels wide — a big improvement over the previous 875px on the homepage and 966px on docs pages
- This has non-obvious accessibility and performance problems, so it’s a good problem to fix: scrolling overflow areas receive assistive tech’s virtual cursor focus, and without an accessible name they just announce something unhelpful. Also, less layout CPU cycles
- html { overflow-x: hidden } truncated content on the homepage, so it was a no-go.
- I had to touch the header and footer once the homepage illustrations no longer caused problems, because they also caused overflow
Ironically the site now renders a lot better in IE11, despite it not supporting <foreignObject>.
I deleted the preventOverscroll() method in <layout-sidebar> and replaced it with CSS’s overscroll-behavior: contain. The JS wasn’t even preventing overscroll for me on Firefox+MacOS+Touchpad, but the CSS does! overscroll-behavior’s browser support is great except for Safari — and on mobile where most of Safari happens, preventing overscroll isn’t really needed since the sidebar overlay takes up the entire viewport.

tigt commented 1 year ago

The <foreignObject> change also fixes the huge blank overscroll area on the homepage, as seen here:

marko-js / website