mirror of
https://github.com/Unleash/unleash.git
synced 2025-11-10 01:19:53 +01:00
Fixes the issue where the skip link wouldn't take you to the main content of the page anymore. Also includes a few related minor semantic and a11y improvements: 1. The `main` element now only surrounds the actual main content of the page. The sidebar is nav content and shouldn't be within it. The easiest way to do this was to change the element that was previously a `main` to a `div` and make the main content wrapper a `main` instead. 2. Makes the skip link target visible when focused. But invisible otherwise. This has two benefits: 1. It's immediately obvious that using the skip link has worked. It tells you that it's at the start of the main content. 2. Because the link now has text, it can be targeted by link search (e.g. in Firefox, press `'` to search for links (I use this **a lot**)), making it super easy to move your focus to the main content directly. (Yes, landmark navigation should also work here, though, especially with the `main` change). The implementation of UI considerations of the skip link are based on the CSS-tricks article [a deep dive on skipping to content](https://css-tricks.com/a-deep-dive-on-skipping-to-content/) from 2021. Here's what it looks like when you skip to content:  When it doesn't have focus, it's invisible. |
||
|---|---|---|
| .. | ||
| SkipNavLink.tsx | ||
| SkipNavTarget.tsx | ||