Tackle accessibility issues, from WAVE or otherwise

[tigt]

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

[github-actions[bot]]

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]

• 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]

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